[Yoav TalerParticipant]

Hi.

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

Thank You.

[ThaiModerator]

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.

[Yoav TalerParticipant]

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.

[Rue NelModerator]

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.

[Yoav TalerParticipant]

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

Thanks.

[ThaiModerator]

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.

[Yoav TalerParticipant]

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?

[Paul RModerator]

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.

[Yoav TalerParticipant]

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.

[Rue NelModerator]

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.

[Yoav TalerParticipant]

Thanks.

Regarding the former issue (centering the navbar), I’ve noticed that responsive menu displays the desktop menu – it should be hidden:

How can I fix this?

Thanks.

[Yoav TalerParticipant]

Thanks,

Regarding the navbar icons, the spacing fix is good. How can I align those three icons more to the left? With padding or whatever.

Thank again.

[ChristopherModerator]

Hi there,

Change :

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;
}

To this:

@media (min-width:979px){
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;
}
}

Add this code as well :

li.menu-item span i {
padding: 0 14px;
}

Hope it helps.

[Yoav TalerParticipant]

Ok, regarding the mobile menu, this css is good.

Regarding the icons, the code re-creates the large horizontal gap between them, and I need the left and right padding to remain small, but align all three of them to the left (like the logo is all the way to the right — http://www.bodyguide.co.il)

I suspect margin-right would be better, since padding changes the top red line above the icon and it doesn’t look good.
So just selecting the right most icon, and giving it a right-margin is what I ask for.

Thanks for the help,

Yoav.

[Paul RModerator]

Hi Yoav,

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

body .x-navbar .x-nav-wrap.desktop .x-nav li.menu-item-4311,
body .x-navbar .x-nav-wrap.desktop .x-nav li.menu-item-4312,
body .x-navbar .x-nav-wrap.desktop .x-nav li.x-menu-item-search {
       float:left;
}

body .x-navbar .x-nav-wrap.desktop .x-nav li.menu-item-4311 a,
body .x-navbar .x-nav-wrap.desktop .x-nav li.menu-item-4312 a,
body .x-navbar .x-nav-wrap.desktop .x-nav li.x-menu-item-search a {
       padding-left: 0;
       padding-right: 0;;
}

Change 0 to adjust spacing in between the icons.

Hope that helps.

[Author]

Posts