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:
  • Zaid Ladha

    You post this in opencart 2.x but the module you talk about doesn’t work with opencart 2.

    • The module was renamed to Sellegance – Theme Panel, but the code is no longer needed because the menu is centered by default on all OpenCart 2.x supported versions.

  • Zaid Ladha

    menu is not centered by default in opencart 2.x I just installed opencart 2.3.0.2 and it was not centered so I purchased the module, which you recommended, but does not work for the current version. I purchased a different module that worked for version 2.X