Changing color of line in top menu

Support
#1

Hi There,
I have spent hours trying to get the correct class to change the color of the underline when I hover over a top nav item.

Please see this site in development: http://365.568.myftpupload.com/

The current page has an orange line under the nav item at the top. When I hover over other top nav items, the line is white. I’d like it to be orange. What am I missing here? I have tried all sorts of combinations but just cannot find the solution.

Could you please help me with the CSS?

Thanks very much,
Nancy

#2

Hello Nancy,

Thanks for asking. :slight_smile:

To change line color, please add following CSS code under Pro > Theme Options > CSS:

.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: 0 2px 0 0 rgb(113, 90, 90) !important;
}

I have found the proper CSS code selector using the Chrome browser Developer Toolbar:

For the CSS code itself, I suggest that you get started with this tutorial:

Thanks.

#3

Hi Prasant,
Thanks so much for the solution. I do use the Chrome developer tool and know how to inspect the element. (Most of my websites have several hundred lines of CSS that I write.) I find that the most difficult part of changing styles is selecting the correct class. In this case, I had tried variations of your solution but never strung them all together!

Many, many thanks for the answer. If you have any other videos of more advanced CSS, I would love to know about them.

Thanks again Prasant.

Nancy

#4

Hello @NLeVasseur,

I suggest you to take a free course at Khan Academy to learn more about CSS.

Thanks.

#5

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