Jump to content
Sign in to follow this  
freshlydesigned

Nav menu 100% width

Recommended Posts

freshlydesigned

Hi there, This is more of a CSS question but if anybody could help it would be great. I am having issues standardizing the Nav menu so the last item (in my case Contact Us) will get pushed down to another line on iphones and ipads. I could take out the 'us' and the manu will stay on the same line, but then in Firefox it will look like a huge space to the far right margin. Is there any CSS that can space the menu to 100% width via automatically adjusting the padding, instead of having to set fixed padding? Thanks a lot Jamie

Share this post


Link to post
Share on other sites
Kate

Hi James, Do you have a link to your site, please?

Share this post


Link to post
Share on other sites
Kate

Hi James, It just seems to be a matter of not enough room. You could alter the spacing of the links. For instance:

.main-nav a{padding-left:6px !important;padding-right:6px !important;}

Share this post


Link to post
Share on other sites
freshlydesigned

Hi Kate, Thanks, I just wondered of there was CSS that would achieve maximum padding to fill out the space so it looks good in Firefox, Chrome, Safari AND on an iphone, ipad etc. Will try and fiddle with padding though, thanks again. :-)

Share this post


Link to post
Share on other sites
freshlydesigned

...or maybe easier...is there some code that you can just apply those padding changes on mobile browsers?

Share this post


Link to post
Share on other sites
freshlydesigned

Thanks Adam, that's interesting...and a little beyond my powers probably, but thanks!

Share this post


Link to post
Share on other sites
toddatkins

Hey I'm having the exact same issue with the nav menu and the last item, ("contact" in my case) being wrapped around and pushed down. Throws the whole look of the page. See: Baton Rouge Counseling I tried Kate's suggestion above, and it did not work. I even played with the numbers but to no avail. I'd love it if someone could find an easy fix for this and post it here. Hell, I'd pay... ;-)

Share this post


Link to post
Share on other sites
toddatkins

Addendum Note: It happens only when I view the page from an iphone (safari) browser.

Share this post


Link to post
Share on other sites
toddatkins

I am so sorry. I have been using a CDN (cloudflare), and sometimes I can't see updates until hours later. This fix above mentioned by Kate DOES actually work for me. I just need to tweak the numbers. God, I feel like an idiot. Sorry again and thanks Kate.

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  

×