Docs

[ZerotoOne]

hey there,
I’d like to make
the horizontal line under my navbar thinner,change it to a slightly darker color
and get rid of the vertical lines, separating the elements.
here is a screenshot of the problem http://prntscr.com/ci7nrt

my page is zerotoone.de
thanks a lot! 🙂

[Paul R]

Hi,

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

body .x-navbar-fixed-top-active .x-navbar-wrap {
    margin-bottom: 0;
}

body .x-navbar {
    border-bottom: 1px solid rgba(255,255,255,0.7);
}

body .x-navbar .desktop .x-nav>li:first-child>a {
    border-left: 0;
}

body .x-navbar .desktop .x-nav>li>a {
    border-right: 0;
}

.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 1px 0 0 #a98b69;
}

Hope that helps.

[ZerotoOne]

this was perfect!!!!! thank you so much! One more thing: I’d really like to have a button in my navbar looking like the one in the right corner of this screenshot http://prntscr.com/cico2c

in my case I’d like this button http://prntscr.com/cicpq2 on my page to look like this.

thank you 🙂

[Jade]

Hi there,

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

.x-nav-wrap.desktop li#menu-item-91 {
    padding: 0 30px;
    background-color: #a98b69;
}

.x-nav-wrap.desktop li#menu-item-91 a:hover {
    box-shadow: none;
}

.x-nav-wrap.desktop {    
    position: absolute;
    right: -7%;
}

Hope this helps.

[ZerotoOne]

thank you 🙂 is it possible to add a hover effect too?

[Rahul]

Glad it worked for you.

You can follow this thread to add a hover effect to your navbar : https://community.theme.co/forums/topic/navbar-hover/

Let us know how it goes!

[ZerotoOne]

sorry for the misunderstanding, I mean a hover effect, just for the newly inserted button 🙂

thank you!

[Joao]

Hi There,

Update this :

.x-nav-wrap.desktop li#menu-item-91 a:hover {
    box-shadow: none;
}

To this:

.x-nav-wrap.desktop li#menu-item-91 a:hover {
    box-shadow: none;
    background-color: red;
}

Change red for the desired color:

Hope that helps

Joao

[ZerotoOne]

thank you this worked, but the hover box does not match the size of the menu item item now.
please have a look: zerotoone.de 🙂

[Thai]

Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[ZerotoOne]

here is an example page http://rnbtheme.com/ and this is my page http://www.zerotoone.de 🙂 thank you very much!

[Thai]

Hi There,

Please update the previous code a bit:

.x-nav-wrap.desktop li#menu-item-91:hover {
    background-color: red;
}
.x-nav-wrap.desktop li#menu-item-91 a:hover {
    box-shadow: none;
}

Hope it helps 🙂

[ZerotoOne]

thank you, thats very good 🙂 is there a way to make the button overlap the grey line right under the sidebar?

[Thai]

Hi There,

Please find this CSS:

.x-nav-wrap.desktop li#menu-item-91 {
    padding: 0 30px;
    background-color: #a98b69;
}

And change to this:

.x-nav-wrap.desktop li#menu-item-91 {
    padding: 0 30px;
    background-color: #a98b69;
    height: 61px;
}
.x-nav-wrap.desktop li#menu-item-91 a {
    box-shadow: none;
}

Hope it helps 🙂

[ZerotoOne]

thank you thats perfect, but isn’t it easier to just add a ‘real’ button with hover effect to the navbar?

[Author]

Posts