Centering the Navbar – Themeco Community

Centering the Navbar

Yoav Taler — Sun, 22 Feb 2015 11:54:29 +0000

Hi.

How do I center my navbar items?
Right now it’s aligned to the left: http://www.bodyguide.co.il

Thank You.

Reply To: Centering the Navbar

Thai — Sun, 22 Feb 2015 15:07:19 +0000

Hi There,
Thanks for writing in.
Try adding following CSS under Appearance > Customize > Custom > CSS:

.x-navbar .sub-menu a {
text-align: center !important;
}

Hope it helps.

Reply To: Centering the Navbar

Yoav Taler — Sun, 22 Feb 2015 19:11:01 +0000

Thanks, but I want the navbar items to be centered inside the header.
The code you offered centers the sub-menu items only.

Thanks again.

Reply To: Centering the Navbar

Rue Nel — Mon, 23 Feb 2015 03:22:22 +0000

Hi there,

have you tried checking out the customizer, Appearance > Customize > Header > LOGO AND NAVIGATION. When you choose Stacked layout, the navbar items will be at the center.

Hope this may help you.

Reply To: Centering the Navbar

Yoav Taler — Mon, 23 Feb 2015 12:21:27 +0000

I see, but can I still get the logo to be centered with the menu – not on top of it?

Thanks.

Reply To: Centering the Navbar

Thai — Mon, 23 Feb 2015 13:40:26 +0000

Hi Yoav,
Sorry for the confusion.
Try adding following CSS under Appearance > Customize > Custom > CSS:

.x-navbar-inner .x-container.width {
width: 62% !important;
}

Screenshot: http://c2n.me/3cZwPQg
Hope it helps.

Reply To: Centering the Navbar

Yoav Taler — Tue, 24 Feb 2015 10:56:02 +0000

Thanks, but this doesn’t work for me, since I want the container width to remain 100%.
SO I need to center only the navbar items, within it’s own container. The logo should stay all the way to the right.

Is it possible?

Reply To: Centering the Navbar

Paul R — Tue, 24 Feb 2015 13:33:38 +0000

Hi,

You can add this under Custom > CSS in the Customizer.


body .x-navbar .x-nav-wrap.desktop .x-nav li {
     float: none;
     display: inline-block;
}

body .x-navbar .x-nav-wrap.desktop .x-nav {
     width:100%;
     text-align:center;
}

body .x-nav-wrap.desktop {
     float: left;
     display: block;
     width: 100%;
     max-width: 720px;
}

Hope that helps.

Reply To: Centering the Navbar

Yoav Taler — Tue, 24 Feb 2015 20:58:00 +0000

Great help.

One more question, if you may:

How can I alter distances between the search/facebook/youtube icons in the navbar? They appear too spaced to my taste…

Thank you.

Reply To: Centering the Navbar

Rue Nel — Wed, 25 Feb 2015 03:39:09 +0000

Hi there,

To changes the distance between the icons in your navbar, please add the following code:

.x-navbar .x-nav-wrap .x-nav > li.menu-item-object-custom > a,
.x-navbar .x-nav-wrap .x-nav > li.x-menu-item-search a{
    padding-left: 3px;
    padding-right: 3px;
}

Please let us know if this helps you.