Docs

[Adam Breen]

hi there
we are using the icon stack, and note that we have padding on the left and right of the menu, which is affecting its presentation

we would like to alter this to achieve a menu that spans the width of the available space, maintaining an alignment with the logo in the top left of the menu bar

please advise

thanks!

http://livingnow.wpengine.com

[Joao]

Hi There,

You can go to Appereance > Customizer > Header and adjust the letter and link spacing.

Or alternatively you can add the following code to Appereance > Customizer > Custom > CSS

.masthead-inline .desktop .x-nav {
    float: left;
}

Hope that helps

Joao

[Adam Breen]

Thanks Joao,
What I’m looking to do is have the menu align to the left and right of the screen. There is padding on the left and right with this css, and I can’t seem to find any way to remove it.

The spacing and font size have already been reduced as much as is practical. The problem I am solving for is that the menu may tile on smaller screens, and I need to prevent this from happening.

Maximising the horizontal real estate is the only way left to achieve this.

[Rue Nel]

Hello There,

Thanks for updating in! Do you want something like this?

If that is the case, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-navbar .desktop .x-nav>li>a>span {
    padding-left: 5px; 
    padding-right: 5px;
}

.x-navbar .desktop .x-nav > li:nth-child(1) > a:not(.x-btn-navbar-woocommerce),
.x-navbar .desktop .x-nav > li:first-child > a:not(.x-btn-navbar-woocommerce) {
    padding-left: 0 !important;
}

.x-navbar .desktop .x-nav > li:nth-child(1) > a > span,
.x-navbar .desktop .x-nav > li:first-child > a > span {
    padding-left: 0px; 
}

We would loved to know if this has work for you. Thank you.

[Adam Breen]

Hi there,
Nope – this didn’t work.
See attached screenshot

[Christopher]

Hi there,

Please add following code:

.masthead-inline .desktop .x-nav {
    float: none;
    margin: 0 auto;
    display: table;
}
.x-topbar-inner.x-container.max.width {
    width: 90%;
}

Hope it helps.

[Adam Breen]

Thanks guys. Appreciate the support

[Nico]

Happy to hear that.

Feel free to ask us again.

Thanks.

[Author]

Posts