Change The Color Of The Highlighted Part Of The Menu

Hi,

use below CSS rules into custom CSS editor:

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
-webkit-box-shadow: 3px 3px 0 rgba(179, 79, 79, 1) !important;
-moz-box-shadow: 3px 3px 0 rgba(179, 79, 79, 1) !important;
box-shadow: 3px 3px 0 rgba(179, 79, 79, 1) !important;
font-size: 50px !important;
}

Now save the changes.

Thanks

Hey Support!

Sorry – the above solution did not work. The highlights are still the original blue.

I’m having trouble with this too-I hope this problem can be solved!

Hi,

Try below CSS rules into custom CSS editor:

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
	-webkit-box-shadow: 3px 3px 0 rgba(71, 117, 200, 1)  !important;
	-moz-box-shadow: 3px 3px 0 rgba(71, 117, 200, 1) !important;
	box-shadow: 3px 3px 0 rgba(71, 117, 200, 1) !important;
}

Save the changes.

Thanks

Sorry – that solution didn’t work either… ??

I had a thought – I have made quite a few customizations. Is it possible one of the other customizations I made are conflicting? For you review, I have pasted the full contents of my Custom CSS box below (including the solution above):

/* Change Header Background Color */
.header_section { background-color: #ffffff !important; } 

/* Eliminate The Blank Space Below The Logo */
.logo a{float:right;} 

/* Change Header Font Color */
.head-contact-info li a { color: #000666 !important; }
.head-contact-info i { color: #000666 !important; } 

/* Center the FontAwesome Icons In The Service Section */
.enigma_service_iocn i { top: -3px; }

/* Change Footer Background Color */
.enigma_footer_area { background: #000666 !important; } 

/* Remove Footer Widget */
.enigma_footer_widget_area { display: none; } 

/* Remove Footer From Blog Posts*/
.enigma_blog_thumb_footer, .blog-date-left { display: none; }

/* Change Header Menu Highlight Color */
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
	-webkit-box-shadow: 3px 3px 0 rgba(71, 117, 200, 1)  !important;
	-moz-box-shadow: 3px 3px 0 rgba(71, 117, 200, 1) !important;
	box-shadow: 3px 3px 0 rgba(71, 117, 200, 1) !important;
}

/* Change Homepage Icon Colors */
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.dropdown-menu .active a { background-color: #000666 !important; } 

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus{ background-color: #000666 !important; }
.dropdown-menu { background-color: #000666 !important; } 

.carousel-list li { background: rgba(0,6,102,.4) !important; } 

.enigma_blog_read_btn {
border: 2px solid #000666 !important;
background-size: 100% 200%;
background-color: #000666 !important;
background-image: linear-gradient(to bottom, #000666 50%, #fff 50%) !important; } 

.carousel-text .enigma_blog_read_btn:hover { color: rgba(0,6,102,.5) !important; } 

.enigma_service_area:hover
.enigma_service_iocn i { color: #000666 !important; }
.enigma_service_iocn {
border: 4px solid #000666 !important;
background-color: #000666 !important;
background-size: 100% 200%;
background-image: linear-gradient(to bottom, #000666 50%, #fff 50%) !important; } 

.enigma_service_detail h3 a { color: #000666 !important; }
.enigma_heading_title h3 { border-bottom: 4px solid #000666 !important; }
.enigma_home_portfolio_showcase
.enigma_home_portfolio_showcase_icons a {
background-color: #000666 !important;
border: 2px solid #000666 !important; } 

.enigma_home_portfolio_showcase
.enigma_home_portfolio_showcase_icons a i:hover{
color: #000666 !important; }

Hi,

Now try this:

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
-webkit-box-shadow: 3px 3px 0 #000 !important;
-moz-box-shadow: 3px 3px 0 #000 !important;
box-shadow: 3px 3px 0 #000 !important;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
-webkit-box-shadow: 3px 3px 0 #000 !important;
-moz-box-shadow: 3px 3px 0 #000 !important;
box-shadow: 3px 3px 0 #000 !important;
}

Save the changes.

I hope it will help you.

Thanks

Sorry – nope. That didn’t do the trick. After I added the above code to the Custom CSS section and saved it, nothing happened…

Hi,

Firstly backup your CSS code which you inserted into custom CSS editor.

After it replace it with above code.

And try to deactivate all the plugins.

Save the changes.

Thanks

I tried the above and it didn’t do the trick, so I decided to take it a step further and did some experimentation. Here is what I did:

• Deactivated all off the plugin
• Deleted everything from the Custom CSS section and saved
• Changed the theme Enigma-Child back to Enigma
• Deleted the Enigma-Child theme
• My logic wit this approach is that, at this point, I should be right back to square one with absolutely no other customization – there is zero chance I’ve created a conflict somewhere
• Back into the Theme Options
• Added the above code to the Custom CSS box and clicked save

Unfortunately, it still had no impact. It made no change on the page. Just to be thorough, I went ahead and tried the other two solutions you had suggested earlier – neither of those made a change either.

Sorry, that post got screwed up… Please disregard the above.
—————————————————————–

I tried the above and it didn’t do the trick, so I decided to take it a step further and did some experimentation. Here is what I did:

• Deactivated all of the plugins
• Deleted everything from the Custom CSS section and saved
• Changed the theme Enigma-Child back to Enigma
• Deleted the Enigma-Child theme
• My logic wit this approach is that, at this point, I should be right back to square one with absolutely no other customization – there is zero chance I’ve created a conflict somewhere
• Back into the Theme Options
• Added the above code to the Custom CSS box and clicked save

Unfortunately, it still had no impact. It made no change on the page. Just to be thorough, I went ahead and tried the other two solutions you had suggested earlier – neither of those made a change either.

Any update on this?

Hi,

Create a Separate ticket for this issue.

Thanks