Icon - style top links

Support
#1

dear support,
i would like to have the top-links in icon styled like in ethos. just the bottom underline. not the boxed line.
but… the bottom line should not be visible at first. only on mouse-over and then stay when the page is selected.
and… not in the whole width of the button but maybe only 90% width. hope you know what i mean?
thanks a million! kai

#2

Hi Kai,

Thank you for reaching out to us. To achieve this please add the following code in the Theme Options > CSS:

.x-navbar .desktop .x-nav>li>a>span {
    border-bottom: none !important;
    padding-bottom: 10px !important;
}

.x-navbar .desktop .x-nav>li>a:hover span,
.x-navbar .desktop .x-nav > .current-menu-item > a span {
    border-bottom: 1px solid #000 !important;
}

Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

#3

hi @Nabeel!
thanks so much for the code and also for the further reading css links! :wink:
what i can’t find is a way to make the bottom-border less wide than the top-link element. please have another look at the screenshot in the secure note. percentage in width only seem to apply to the whole top-item (button) but only the line below should be somewhat narrower.
thanks again for your great support! kai

#4

Hey Kai,

That was actually the limitation of CSS border property, we need to change our approach to achieve this. Please replace the previously given code with the following:

.x-navbar .desktop .x-nav>li>a>span {
    border-bottom: none !important;
    padding-bottom: 5px !important;
}

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

.x-navbar .desktop .x-nav>li>a:hover span:before,
.x-navbar .desktop .x-nav > .current-menu-item > a span:before {
    content: '';
    width: 70%;
    height: 2px;
    background: #9b9b9b;
    position: absolute;
    top: 100%;
    left: 15%
}

Feel free to make adjustments in the code. Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

#5

dear @Nabeel,
supercalifragilisticexpialidocious!
i am still trying to wrap my head around the css you gave me.
but it works perfectly and just what i wanted.
thank you sooo much! best wishes, kai

#6

Glad we could help you Kai.

Cheers!

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.