Jump to content
Sign in to follow this  
insightlab

align the width of menu navigation equally

Recommended Posts

insightlab

Hi, I wanted to align the width of menu navigation equally at iblog5 theme . I tried to add the code such as ul.sf-menu ul li {width: 50px}; But it didn't work so far. Please advise me.

Share this post


Link to post
Share on other sites
Danny
Hi, Can you post a reply and provide a link to your website please.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
insightlab
link here at http://bit.ly/xuItwD Many thanks!

Share this post


Link to post
Share on other sites
catrina
By aligning the width of the menu equally, do you mean you'd want the menu items to stretch so that they fit the entire width of the menu?

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
Jenny
You will need to add a couple CSS elements to make this work. The menu UL will need to be set to 100% width, and the LI will need to be set to a percentage of that based on your menu items. Since you have 5 menu items, 100 / 5 = 20% so use that for your LI width. You'll also need to center your text at the LI level. Keep in mind we can't design your site for you so if you need CSS help, make sure you've downloaded [url="http://www.getfirebug.com"]Firebug[/url] and check out [url="http://www.w3schools.com"]W3 Schools[/url] for more info.

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
anlinares
I am working on the same thing. I had it working with the original nav but I created a custom nav to link to category pages in the subnav and that got it all messed up. I have fixed the main nav but can't find the selector I'm supposed to use for the subnav. Actually, I thought the code I am using for the main nav was for the subnav but it fixed the main nav. I'm all confused!! Can you point me in the direction of the right selector now? Trying to make subnav width smaller to fit it all on one line. [url]http://www.highcottontesting.info/whitney[/url] My current code is: [code]#page ul.sf-menu a {width: 90px; height: 35px; text-align: center;}[/code]

Share this post


Link to post
Share on other sites
catrina
AI inspected your site using Firebug and the subnav uses a different CSS selector: [b]ul.sub-menu[/b]. If you haven't downloaded Firebug for CSS customization already, it's available at http://getfirebug.com. Please refer to this documentation for instructions on how to use it for customizing your site: http://www.pagelines.com/wiki/Custom_CSS#How_to_use_CSS_Inspection_Tools

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
anlinares
I do I just couldn't pick that out. I'm learning but sometimes I get lost in all the code. Thank you so much for your help! That did the trick.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×