Jump to content
lakersalex

Centering the Navigation without breaking responsive design

Recommended Posts

lakersalex

I've been reading a few posts regarding centering navigation menus. The solutions that I found are less than ideal because they depend on changing the left margin by a certain number of pixels. While that works when the website is displayed on a computer screen, it's completely broken on a mobile device. From what I read online, the correct way to center an element is to set the left and right margins to auto but this doesn't seem to work. Is there a way to center the nav when viewed on a computer without breaking it on a mobile device? I'd appreciate any advice. Thanks!

Share this post


Link to post
Share on other sites
Danny
Hi, Try adding the code below and see if that works. [code]#primary-nav ul.main-nav { text-align: center; // centers the inline elements in nav } ul.sf-menu li{ float: none; // don't float anymore display: inline-block; // change the display format }[/code]

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
lakersalex
Hmm.. didn't work. I found a solution, but it's a little janky. It looks ok on a computer and on an iphone each menu item has its own row:


#menu-store-categories .menu-item {margin-left:2.3em;}

#menu-store-categories .sub-menu .menu-item {margin-left:0em;}

#secondnav #menu-store-categories .main-nav li {margin-left:2em;}

How does the footer nav get styled? It's perfectly centered in the footer!

Share this post


Link to post
Share on other sites
Danny
Hi,

I can assure you that the code I provided does indeed work. I tested it personally before posting. Therefore, can you provide a link to your website please, so I can take a closer look for you.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
lakersalex
Thanks for taking a look:

http://kneelandmercado.com/

http://kneelandmercado.com/new-arrivals/

The nav is a "classic nav" with the id #menu-store-categories. The home page uses a branding while the other pages use a brand nav to show the shopping cart menu about the main nav.

I've disabled my fix and implemented yours.

Share this post


Link to post
Share on other sites
Danny
Hi,

Add this to your custom CSS, this should work now :D

[CODE]
.main_nav ul { float: none !important; text-align: center !important; }
[/CODE]

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
lakersalex
sorry that didn't work. If fact it moved the store nav slightly that I don't want to touch, both use the same class .main-nav

Share this post


Link to post
Share on other sites
lakersalex
Still searching for a solution that centers the nav without messing up the iphone view...

How does the footer nav work? I can't figure out how that is set in the center....

I'm playing with this code, which is not horrible on an iphone.


#nav_row .menu-item {display: block; margin-left:2.6%; margin-right:0;}

#nav_row .sub-menu {background-image:none;}

Share this post


Link to post
Share on other sites
Danny
Hi, yeah that code will break responsive design, to fix it we are going to need to use a @media query. However, I have just this moment looked at your site which you linked above and it seems be OK. Therefore, can you provide a screenshot of your issue please.

Please search our forums, before posting!

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


×