How to center main menu

Hey there Blancolor,

Hope you’re well today!

This should be possible with some custom CSS. Try adding the following CSS code in Appearance -> Market Settings -> Layout Settings -> Custom CSS:

nav#site-navigation {
  float: none;
  margin-left: auto;
  margin-right: auto;
  width: 260px;
  display: block;
}

Please not that in order for this to work you’ll have to match the width of your navigation with the width declared here (260px). If you’re uncomfortable with doing this please post link to your site and I’ll be happy to do that for you ??

Cheers,
Bojan

Thanks a lot Bojan,

I did what you told me, but I don′t understand the width issue, so it doesn′t work.

This is my website: https://pikadeelo.mymodulator.com/

I hope you can help me.

Thanks again.

Hey again Blancolor,

Not sure how can I explain this, but the code provided above will center the navigation element and it will only work if you specify the width of the element with CSS so it will effectively center element based on its width which means that if the width if not matching the actual width of the whole navigation element it will look displaced. Hope this makes sense ??

With that being said, please try adding the following CSS.

.default-nav-wrapper {
  width: 100%;
  padding-right: 0;
}

nav#site-navigation {
  float: none;
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: 703px;
}

Please let me know if this works ??

Cheers,
Bojan

Hi Bojan,

I′ve just tried it, and it almost work! The only problem is that if I put an absoltute width, the template is not responsive anymore…I′ve checked this out on my mobile phone and the menu doesn′t adjust to the screen.

You know how to solve this?

Thanks a lot!

Hey again Blancolor,

Sure thing, sorry about that one I completely missed it with even checking the smaller resolutions.

We should be able to fix that with using media queries. This will limit the CSS only on bigger resolutions from the mobile one. Please try replacing the code with the following

@media screen and (min-width: 768px) {
.default-nav-wrapper {
  width: 100%;
  padding-right: 0;
}

nav#site-navigation {
  float: none;
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: 703px;
}
}

Hope this helps ??

Best regards,
Bojan

Perfect!

It works!

Thanks a lot Bojan!

Glad that works ??

Have a great day!

Cheers,
Bojan