Underline page in navbar

Support
#1

Hi,

I have find a way to underline the selected section in my navbar but it’s not exactly like I want.

Now it’s like that

But I would like someting like that

Is it possible ?

Also, how can I use bold for the texts in my navabar ?

Best regards

#2

Hello Camille,

Yes, this is possible through some custom CSS. Please add this code in X > Theme Options > CSS:

.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: none;
}

.x-navbar .desktop .x-nav > li > a:hover span:before, 
.x-navbar .desktop .x-nav > .x-active > a  span:before, 
.x-navbar .desktop .x-nav > .current-menu-item > a span:before {
    content: '';
    width: 100%;
    height: 2px;
    display: block;
    background-color: #000;
    position: absolute;
    bottom: -10px;
}

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

You might need to update some parts of the code for it to fit correctly on your setup but that should help you get started.

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. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps.

#3

Hi Jade,

Thanks for your answer. Sorry I can’t manage to make it work.

I’ve added the code to the CSS section.

Maybe the problem is because I have the section underline ? My issue is that I don’t remember how to disable it.

Could you help me ?

Best regards

#4

Hi Camille,

My apologies but the suggestion I have previously given is for an X site and it seems that you are using the Navigation Inline element through the Pro header.

To achieve the underlined effect on hover, please remove the codes I have previously given and do the following:

#1 Edit the navigation inline element settings and disable the particles.

#2 Add this code in the Element CSS of the navigation inline element:

$el.x-menu > li > .x-anchor:hover .x-anchor-text-primary {
  text-decoration: underline;
}

Hope this helps.

#5

Hi Jade,

Thanks for you answer. In fact I would like that the page selected (page active) is underline.
I don’t want a hoover, only the page selected.

Best regards

#6

Hi Camille,

In that case, please try:

$el.x-menu > li.current-menu-item > .x-anchor .x-anchor-text-primary {
  text-decoration: underline;
}

Hope this helps.

#7

Thank you, it helps a lot and works fine.

Is it possible to modify the design of this underline :

  • spacing with the texte ?
  • width of the line ?

Best regards

#8

Hello Camille,

Thanks for updating the thread.

Please update previous code with following:

$el.x-menu > li.current-menu-item > .x-anchor .x-anchor-text-primary {
    text-decoration: underline;
    box-shadow: inset 0 0px 0 white, inset 0 -1px 0 black;
    text-underline-position: under;
}

Thanks.

#9

Thanks Prasant,

It works fine.

Have a good day

#10

You’re welcome, Camille.

1 Like
#11

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