Change The Colors In The Menu NavBar

My Site: https://www.gatewayreporting.com

Is there a way to change the color of the box that pops up around the menu items when you make a selection (or hover over it)? I have changed most of the colors on my page to a darker blue and would like to do the same with the menu.

I grabbed a screenshot of the section I am referring to: click here.

We had some back and forth about this in a previous thread, click here, but we were unable to find a solution. For some reason the solutions you were suggesting were not making any change on the page. I have made quite a few customizations on my page, and had the thought that perhaps one of the other customizations I made are conflicting? For you review, I have pasted the full contents of my Custom CSS box below:

/* 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; }

Following that, you suggested that I back up my Custom CSS code and replace it with the below:

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

I took that a step further and removed all of my customization. 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 with this approach is that, at this point, I should be right back to square one with absolutely no other customization, meaning there should be 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.

Any ideas?