Change Header Menu Coloured Bar Distance in Ethos

[hellogriff]

Hi

Is it possible to change the distance of the coloured bars that appear when you hover over a top menu link? At the moment on my site, they are very low and hit the main image?

Screenshot

Also, can the colour of these bars be changed?

Thanks

[jade]

Hey Paul,

This is possible by adding this code in X > Theme Options > CSS:

.x-navbar .desktop .x-nav > li > a:hover {
    box-shadow: none;
}

.x-navbar .desktop .x-nav > li > a {
    position: relative;
    display: block;
}

.x-navbar .desktop .x-nav > li > a:after {
    content: "";
    height: 2px;
    width: 65%;
    display: block;
    background-color: #000;
    position: absolute;
    bottom: 46px;

    opacity: 0;
}

.x-navbar .desktop .x-nav > li > a:hover:after {
    opacity: 1;
}

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates.

Here are some related links for further reading:

• Intro to CSS - https://goo.gl/mFuWQT
• How to get CSS selectors - https://goo.gl/BmoH39
• Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa

Hope this helps.

[hellogriff]

@Jade

.x-navbar .desktop .x-nav > li > a:hover {
box-shadow: none;
}

.x-navbar .desktop .x-nav > li > a {
position: relative;
display: block;
}

.x-navbar .desktop .x-nav > li > a:after {
content: “”;
height: 2px;
width: 65%;
display: block;
background-color: #000;
position: absolute;
bottom: 46px;

opacity: 0;

}

.x-navbar .desktop .x-nav > li > a:hover:after {
opacity: 1;
}

Thanks but what part of this code changes the position and colour?

Does this need changing to anything: content: “”;?

[jade]

Hey Paul,

You just need to place the code in the Global CSS and check the links I previously provided as reference for your to know more about CSS but to address your question, to change the alignment of the bottom border, change the value of bottom: 46px; in the block:

.x-navbar .desktop .x-nav > li > a:after {
    content: "";
    height: 2px;
    width: 65%;
    display: block;
    background-color: #000;
    position: absolute;
    bottom: 46px;

    opacity: 0;
}

Then to change the color of the border, change the value of background-color: #000;.

• CSS Colors - https://goo.gl/rM1ys1

Hope this helps.

[hellogriff]

Hi Jade

Thanks, I did change the value of bottom: 46px; but this didn’t change the distance of the bar from the top menu. I will keep trying.

Thanks

[thai]

Hi @hellogriff,

Please replace the previous CSS with this:

.x-navbar .desktop .x-nav > li > a {
    box-shadow: none !important;
}
.x-navbar .desktop .x-nav > li > a > span {
    position: relative;
}
.x-navbar .desktop .x-nav > li > a > span::before {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0,139,210);
    height: 2px;
    bottom: -5px;
    opacity: 0;
}
.x-navbar .desktop .x-nav > li > a:hover > span::before,
.x-navbar .desktop .x-nav > li.current-menu-item > a > span::before {
    opacity: 1;
}

I could see that you’re using the W3 Total Cache plugin. Don’t forget to purge all the caches so you can see the changes.

Regards!