Docs

[ansonofficial]

Hi Support,

http://brothersbassin.com/

I am using ethos, and I was wondering how do I accomplish this type of navbar.
http://theme.co/x/demo/ethos/2/

Thanks,

Anson

[Joao]

Hi Anson,

For that you need to go to your Appereance / Customizer / Custom / Header and make the “Navbar Top Height” Smaller I believe around 17px.

Scrolling down you will be able to select your logo font size, weight, and other parameters that you can adjust until you achieve the same results as on Ethos 2

If you scroll even more down you will have link alignment and also aligment for your mobile button what might be intersting to adjust as well.

Hope that helps,

Joao

[ansonofficial]

It did thanks, but when I made the nav bar smaller, it made the bottom nav menu hover highlighters be placed in the middle of the text which is strange. How would I fix that? Also, how do I change the hover color of the bottom highlighter from red to another color?

Thanks in advanced,

Anson

[Nabeel A]

Hi again,

Try adding the following code in your Customizer:

.x-navbar-inner {
    min-height: 50px !important;
    max-height: 60px !important;
}
.x-brand {
    margin-top: 12px !important;
}
.x-navbar .desktop .x-nav > li > a {
    height: 60px !important;
}
.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    padding-top: 26px !important;
}
.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
    box-shadow: 0 2px 0 0 #13FFDE !important;
}

Let us know how this goes!

[Author]

Posts