How to change highlighted box in navigation menu

Dazzling
1

Dazzling: Current version
WP: 4.1.1
Site: curlyafrodotcom

Hi Aigars,

Again, this is an amazing theme and I thank you from the bottom of my heart.

I have tried to change the box-highlight (in the navigation menu) for the active page (i.e. demo would be green box highlighting homepage) to just “underlining” the highlighted active page. Is this at all possible? I tried the following, to no avail:

.nav > li > a {
display: underline;
}

Thanks in advance,

2

Add this CSS code to Appearance >> Theme Options >> Other >> Custom CSS. It will get rid of dark brown background for active menu items that you have now and will add replace it with a simple underline. It will also add underline on hover for items.

.navbar-default .navbar-nav .active a, .navbar-default .navbar-nav .active a:hover, .navbar-default .navbar-nav .active a:focus, .navbar-default .navbar-nav li a:hover, .navbar-default .navbar-nav li a:focus, .navbar-default .navbar-nav .open a, .navbar-default .navbar-nav .open a:hover, .navbar-default .navbar-nav .open a:focus, .dropdown-menu li a:hover, .dropdown-menu li a:focus, .navbar-default .navbar-nav .open .dropdown-menu li a:hover, .navbar-default .navbar-nav .open .dropdown-menu li a:focus, .dropdown-menu .active a, .navbar-default .navbar-nav .open .dropdown-menu .active a {
	text-decoration: underline;
	background: transparent;
}

Let me know if this is what you were looking for.

3

Thanks so much Aigars.

I was able to remove the block highlight, but I wanted to know if the underline could look more like this: people.com
(the active “home” page has an underline by the lower border of the navigation bar) I would want my underline to still be the same as the element colour and the text for the highlighted item to be the same as the underline (i.e. brown). All of the other menu items remain the same (i.e. white)

Thanks in advance,

4

Apologies, URL for above example is: people.com

Thanks,

5

Yes, why not to have border at the bottom. You can get it by using code like this:

.navbar-default .navbar-nav .active a, .navbar-default .navbar-nav .active a:hover, .navbar-default .navbar-nav .active a:focus, .navbar-default .navbar-nav li a:hover, .navbar-default .navbar-nav li a:focus, .navbar-default .navbar-nav .open a, .navbar-default .navbar-nav .open a:hover, .navbar-default .navbar-nav .open a:focus, .dropdown-menu li a:hover, .dropdown-menu li a:focus, .navbar-default .navbar-nav .open .dropdown-menu li a:hover, .navbar-default .navbar-nav .open .dropdown-menu li a:focus, .dropdown-menu .active a, .navbar-default .navbar-nav .open .dropdown-menu .active a {
  border-bottom: 5px solid #260502;
}

Since you already have this chunk of code you can just add the missing part to your existing code:

border-bottom: 5px solid #260502;

Let me know if this helps.

6

Thanks Aigars, works perfectly!

Is it possible to have the text highlighted to be the same colour as bottom border (i.e. 260502)? All the other menu items will stay white.

Thanks,

7

You can simply add color: #260502; at the end of that code I provided earlier.

8

Thanks Aigars, I

I tried adding “text-color: #260502” to code but once I removed the “text”, it works perfectly.

Thanks so much.

9

@4alex

Did you even check code that I provided? :slight_smile:

There is no such text-color property in CSS.

10

Hi Aigars,

I added the “text-color” incorrectly. I realised in retrospect, once I reviewed the code you provided.

Thanks again,