I need to center my logo and navbar

[SonyaElsie]

I have looked on a few other similar threads but the code suggested seems to be ineffective for me.

I am using X theme - renew (light) and currently my logo is to the left and my navbar is to the right and are inline.

I need them to both meet in the centre and for the margin to automatically adjust depending on screen size.

The following code:

.x-navbar {
text-align:center;
}

.x-brand {
float: none;
margin: 20px auto 0;
}

bring logo to the center with the navbar below but I need them both on the same line and centered.

Please help.

[SonyaElsie]

Currently appearing like this…

[mldarshana]

Hi Sonya,

Thanks for writing in! If you need to center both logo and the navbar, head over to X -> Theme Options -> Header -> Logo & Navigation and set layout as stacked.

If you want them in a same line, try adding the following CSS rules and see if that helps (make sure to remove your ones).

.x-brand.img {
    margin-left: 25%;
}
.x-nav-wrap.desktop {
    margin-right: 25%;
}

Hope that helps.

[SonyaElsie]

Thank you.

I have followed those instructions above and this is the result…

Not quite right.

I’ll experiment a bit further but any other suggested coding?

[jade]

Hi there,

If you set your Logo and Navigation layout to Stacked, the logo and the menu will be automatically centered without any custom CSS just like the demo here:

http://demo.theme.co/integrity-9/

If your layout is set to Inline the default placement of the logo will be on the left and the menu on the right. If you want to push them closer together to the center, it would involve some custom CSS with some media queries so that you can set the maximum with of the container depending on the screen width like this:

@media (min-width: 980px ) {
    .x-navbar-inner .x-container.max {
        max-width: 900px;
    }
}

The code above should help you get started. Kindly remove the previous code you have added then adjust the value of the max-width in the code.

Here are some reference links related to the suggestions above:

• CSS Introduction - https://www.w3schools.com/css/css_intro.asp
• How to get CSS Selectors using Chrome - https://stackoverflow.com/questions/4500572/how-can-i-get-the-css-selector-in-chrome
• CSS Media Queries - https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Please note that since this is modifying the default display of the theme, it requires some customization which goes beyond the scope of our support. If you are not comfortable making further changes and if you require more customization on your site, it would be best to get in touch with a developer.

Hope this helps you get started.

[SonyaElsie]

@Jade

@media (min-width: 980px ) {
.x-navbar-inner .x-container.max {
max-width: 900px;
}
}

Thank you Jade This has worked perfectly!!

[ruenel]

You’re most welcome!
It’s good to know that @Jade’s solution has worked for you.