I modified the menu for animated underline but now everything in menu gets underline

Support
#1

Hello!

I modified the main nav bar to get animated underlined links, but now whenever i go on mobile, the mobile button becomes underlined and so do menu items, on desktop, the logo also draws an underline on top, here is the code I wrote.

.x-navbar .desktop .x-nav > li > a:hover > span, .x-navbar .desktop .x-nav > li.x-active > a > span, .x-navbar .desktop .x-nav > li.current-menu-item > a > span {
box-shadow: none !important;
}

.x-navbar
a {
text-decoration: none;
position: relative;
color: black !important;
}

.x-navbar
a:after {
content: ā€˜ā€™;
position: absolute;
bottom: 30px;
left: 0px;
width: 0%;
border-bottom: 2px solid black;
transition: 0.6s;
}

.x-navbar
a:hover:after {
width: 100%;
}

what am i missing from stopping this from happening on mobile?

here is the website
bit.ly/2IY69uj

#2

Hey Vanja,

It looks like you already fixed your custom CSS. I donā€™t see underlines in mobile view. If the issue persists. on your end, would you mind posting a screenshot.

Please just note that we can only assist with simple or cosmetic CSS. Custom development is not a part of our product support in general.

Thanks.

#3

Here is an example when I am in mobile

any help would be appreciated to stop ā€œdesktop cssā€ from running on mobile versionsā€¦

#4

#5

#6

Hello Vanja,

Thanks for updating the thread:

Please add following CSS under X > Theme Options > CSS:


.x-navbar a:after{border-bottom: none !important;}

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

#7

This bit of code did not solve my problem as it disabled animations completely on desktop and mobileā€¦ I know how to look for code, if you looked above I actually wrote the codeā€¦ I just want it disabled on mobile header that is all!!

#8

Hello Vanja,

I am really sorry for the confusion. Please add following CSS under X > Theme Options > CSS:


@media only screen and (max-width: 600px) {
  .x-navbar a:after{border-bottom: none !important;}

}

Thanks.

1 Like
#9

Thank! you that seems to have solved it!!

#10

Glad to hear that. :slight_smile:

#11

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