[David GParticipant]

Hi,

Is there a way to center the main navigation. Home, About, Services, Contact. Currently it’s flush right.

-David

[SupportMember]

Hi David,

Thanks for dropping by, to make your navigation centered, please add the following code snippet into the customizer Custom > CSS

.masthead-inline .x-nav{
  display: block;
  float: none;
  text-align: center;
  width: 100%;
  position: absolute;
}
.masthead-inline .x-navbar .x-nav>li {
  display: inline-block;
}

Hope that help, cheers.

[Patrick MParticipant]

When i add this code ist turn from right to left but not in the middle. I use Renew. Same with the Logo, how can i set it to the middle ?

[David GParticipant]

Hi,

Me too. It turns from right justified to left Justified.

Another approach might be to go from inline to stacked, but eliminate the x-logobar. Is this possible?

I am putting the logo in the slider and I want to eliminate it from the nave bar entirely, but have the links centered.

Awesome theme by the way.

David

[RadModerator]

Hi David,

Stacked navigation is good option too and you could hide logo by adding this css.

.x-logobar {
display: none;
}

Cheers!

[David GParticipant]

That did the trick! Thanks for being so quick!!! You guys are awesome!

[ChristianModerator]

You’re welcome David. And, thank you for your kind words.

[Chance WParticipant]

I ran into the same problem with the Renew stack. The code referenced above to center navigation actually makes it aligned left. Is there some other CSS I can try to align in center in the renew stack and not have to use a stacked logo? I’d like to use inline logo and just display:none on the homepage since I’m using a slide above the masthead on the home page and still have the inline logo on other pages.

[RadModerator]

Hi Chance,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL as stated on the forum entrance page. This is to ensure that we can provide you with a tailored answer to your situation. Once you have have provided us with your URL, we will be happy to assist you with everything.

[Chance WParticipant]

This reply has been marked as private.

[ChristianModerator]

Hey Chance,

Please choose Stacked layout for your logo and navigation and you’ll have a centered navbar.

Thanks.

[Chance WParticipant]

Is there a way to only make the homepage have the stacked layout to get the centered nav menu? Or CSS for the inline layout to center the nav menu? Only the homepage needs the centered menu and the rest of the site will be inline layout. I tried the code above on the custom css for just the homepage and like the other users it aligned the menu left.

[ChristianModerator]

In that case, please don’t use the Stacked layout since it is a global setting. Please add the code below in your Customizer > Custom > CSS instead.

.masthead-inline .x-nav {
float: none;
position: relative;
left: 25%;
}

@media (min-width:980px) and (max-width:1080px) {
.masthead-inline .x-nav {
left: 15%;
}
}

Hope that helps. 🙂

[Chance WParticipant]

Awesome, it worked! Thanks for the super fast response.

[ChristianModerator]

Hey Chance,

I have updated the code to maintain centering between 980px and 1080px.

Hope that helps. 🙂

[Author]

Posts