How to center the top menu

By default the top menu aligns to the left. But if you have a few links you may want to show them centered as show in the following image:

Centered menu

Just paste the following code in the Theme Options module. Under the last tab “Custom Code” in the “Custom CSS Code” field:

@media (min-width: 768px) {
 .navbar-collapse.collapse { text-align: center; }
 .navbar-nav { float: none; display: inline-block;}
}

That will do the trick.

You can paste all your custom CSS snippets in that field. But if you want to customize your site heavily it’s better to use an alternative stylesheet.

In that case created the file catalog/view/theme/[your-theme]/stylesheet/custom.css and enabled the option in the same tab of the Theme Options module:

Screen Shot 2015-05-06 at 10.27.42 AM

 

 

 

Short URL: http://goo.gl/jPwJNB
Tagged: