Take a look at my navbar image below. When the home page is active, it is simply underlined. https://i.sstatic.net/e2Au3.png
Another picture of my navbar shows an issue with the dropdown menu being highlighted in a different color when active. I've tried various CSS fixes without success. It should have a transparent background like the ones above it. Any assistance would be greatly appreciated. https://i.sstatic.net/8Xi4L.png
Here is the HTML code for my navbar...
<nav role="navigation" class="navbar navbar-default navbar-fixed-top font">
<div class="container">
<!-- Title -->
<div class="navbar-header pull-left">
<div class="navbar-brand-image"> <%=link_to "#{image_tag 'rsz_1rsz_13logo.png'}".html_safe ,root_path %></div>
</div>
<button id="nav-icon1" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Additional navbar items -->
<div class="collapse navbar-collapse navbar-right navHeaderCollapse">
<ul class="nav navbar-nav">
<li class="<%= 'active' if current_page?(root_path) %>"><% yield (:home)%><%= link_to "Home", root_path%></li>
<li class="<%= 'active' if current_page?(services_path) %>"><% yield (:services)%><%= link_to "Services", services_path%></li>
<li class="<%= 'active' if current_page?(careers_path) %>"><% yield (:careers)%><%= link_to "Careers", careers_path%></li>
<li class="<%= 'active' if current_page?(contact_path) %>"><% yield (:contact)%><%= link_to "Contact Us", contact_path %>
<li class="<%= 'active' if current_page?(about_us_path) %>"><% yield (:about_us)%><%= link_to "About Us", about_us_path%></li>
<li class="dropdown nav-drop">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Language <span class="caret"></span></a>
<ul class="dropdown-menu" style="background-color: rgba(54, 54, 54, .6);">
<li><a href="/">English</a></li>
<li><a href="/de/home">German</a></li>
<li class="disabled"><a href="#">Spanish - Coming Soon</a></li>
</ul>
</li>
</ul>
</ul>
</div>