Slide Down Box Menu with jQuery and...

User 2744602 Photo


Registered User
162 posts

Hi Guys :)
Need some help please, with a menu, that works well but I can not for the life of me align the Main Text in the centre.
I can the sub text, but not the main text, I am getting the feeling it may not be possible with this code the way it is at the moment?
The link has all the details CSS jQuery HTML in code boxes.
To sum up I wish to CENTRE all the Text in the Menu..
http://tympanus.net/codrops/2010/07/16/slide-down-box-menu/

I am now CSS coder so if its easy sorry but I have been looking and trying different things :)
KISS is the key!
User 187934 Photo


Senior Advisor
20,181 posts

Can you provide a link to the menu on your page?
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 271657 Photo


Ambassador
3,816 posts

It would be better to see it live on your page, but maybe this helps. It seams the main links have a float: left applied to them. Have you tried removing that and putting some padding on them instead?
ul.sdt_menu li span span.sdt_link {
clear: both;
color: #fff;
float: left;
font-size: 24px;
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 2744602 Photo


Registered User
162 posts

Eric and paintbrush thanks guy!
I have a quick mock up of a site here: http://bpburgess.coffeecup.com/

@ Eric float: left; yes this is the issue the secondary text will centre ok. Sorry mate I am not much good with css.
KISS is the key!
User 2744602 Photo


Registered User
162 posts

Well I fixed it ~wipes my brow~
For anybody who's interested I had to remove the float and replace it with:

display:inline-block;

text-align: center;

margin-left from 15px to 0px
Looks really good.
Cheers!
KISS is the key!
User 122279 Photo


Senior Advisor
14,447 posts

Brett, I see you are using one of CC's responsive apps to create the site. But the menu is not responsive; all the menu items end up on top of each other when the wiewport narrows.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 271657 Photo


Ambassador
3,816 posts

It looks like it would be possible to make it responsive, just change the fixed-width items to percentages and the menu itself to 100% width. And resize the fonts as needed.
It still would still need a mobile version for small screens, maybe just one of the boxes with a drop down would work?
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 2744602 Photo


Registered User
162 posts

Inger wrote:
Brett, I see you are using one of CC's responsive apps to create the site. But the menu is not responsive; all the menu items end up on top of each other when the wiewport narrows.

Hi Inger :) Yep using RSD however this menu will only be displayer at high BPs, I will be replacing it with a mobile bootstrap one at lower BPs.

@paintbrush yes it stacks ok and is css a jquery so it should be responsive to a point, it also make a nifty vert menu.
KISS is the key!

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.