Display Main Menue Nav Bar in the center

Support
#1

Hello support team,

I hope you can help me. I want to display the main menue in the nav bar centered. I tried this:

.x-navbar-inner{
padding-right: 280px;
}

It worked fine on my pc, but on mobile devices the menue is cut off.

I hope you can help me to solve the problem.

Thank you very much.

My website is: http://testumgebung-simbach.de

Mario

#2

Hi Mario,

Thanks for writing in!

There is currently no settings to achieve that, the only way to make it centered is by using Custom CSS
You may add the code below in Theme Options > CSS


.masthead-inline .desktop .x-nav {
  float:none;
  display:inline-block;
}

@media(min-width:1400px) {
.x-brand {
    position: absolute;
}
}

I was able to came up with that code with the help of google inpect element.
In case you want to learn CSS please watch the videos below.


Thanks

#3

Hello,

thank you very much for your help and videos. I just began to learn css and sometimes I need your help :slight_smile:

When I add the CSS below the result looks like this. Please see the screenshot adjust.

Thank you very much for your help.

Best regards
Mario

#4

Hi There,

Thanks for the screenshot!

In addition to above CSS given by @paul.r please add this.

.x-nav-wrap.desktop {
text-align: center;
}
.x-nav-wrap.desktop ul li ul {
text-align: left;
}

Hope this helps!

#5

Thank you very much. This helped a lot. One last question:

How can I change the position of the main menue. I would be nice if I could display the menue exact in the middle of the navar. Is this possible?

Best regards

Mario

#6

Hi There,

Could you please try adding the previous CSS?

.x-nav-wrap.desktop {
     text-align: center;
}
.x-nav-wrap.desktop ul li ul {
     text-align: left;
}

So the menu should be center likes this screenshots:

Hope that helps and thank you for understanding.

#7

Thank you very much. I did not explain it very well. I was talking about the heigth of the main menue. The heigth of the menue should be in the middle of the navbar. Do you understand?

Thank you very much.

Best regards

#8

Hey @Mario1986,

There is an option for height and vertical position of the navbar links in Theme Options > Header. To increase the height of the Navbar, please edit the Navbar Top Height.

To position the Navbar Links vertically, edit the Navbar Top Link Alignment

Hope that helps.

#9

Thank you very much. You always make a great joB!

#10

On behalf of my colleague, you’re most welcome.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.