How to highlight the active menu option in a secondary menu

Support
#1

I am trying to create a secondary navigation bar for a sub-section (‘Services’). It spreads horizontally across the top of the page for that sub-section. I tried 2 methods, but each has its own challenges:

  1. using the built-in / default buttons in the X theme. The problem is that when hovering over the button, it doesn’t change colour (it should be the smokey blue as seen on the “FAQ” button).
  2. manually creating the navbar through
      and
    • items, which highlights over ‘hover’ nicely, but does not show the active page at “rest”.

The URL is: http://terracana.priscillathen.com/our-services/residential-faq/
Any advice would be appreciated! Thanks. :slight_smile:

#2

Hi there,

I am not sure about the second method, but for the first button method you can simply add the CSS code below to X > Launch > Options > CSS to have them change color on hover:

#x-section-1 .x-btn:hover {
	background-color: rgb(100, 139, 150) !important;
	color: white !important;
}

Thank you.

#3

Awesome, it worked, thank you!!! :smiley: What’s the difference between the ‘Editor’ section (Appearance > Editor) and the ‘Global CSS’ section (X > Launch > Options > CSS) that you suggested?

#4

Hi there,

At the moment they are the same, but in the future we will phase out Appearance > Customize function and you will be relying only on X > Launch > Options > CSS section. So it is better to get used to that :slight_smile:

Glad that we could be of a help.

#5

Oh, I see, good to know, thanks. :slight_smile:

#6

You are most welcome. :slight_smile:

#7

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