Presented below is the code snippet that I am currently working with. (Update: The entire navbar code has been included here now since I realized that the limited amount originally posted may be restricting the ability to identify the problem)
<nav class="navbar navbar-inverse navsize">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" ><img id="logo" src="/Images/SC2_MyLink_Logo.png" alt="SC2 Logo"/></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul id="navposition" class="nav navbar-nav">
<li class="individualbtnposition col-lg-2">@Html.ActionLink("Home", "Index", "Home")</li>
<li class="dropdown individualbtnposition">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Our Company<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>@Html.ActionLink("Our History", "Index", "OurCompany")</li>
<li>@Html.ActionLink("Facilities", "Facilities", "OurCompany")</li>
</ul>
</li>
<li class="dropdown individualbtnposition">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Employee Services<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Forms</a>
<ul class="dropdown-menu">
<li>@Html.ActionLink("HR Forms", "HRForms", "FormsHandlers")</li>
<li>@Html.ActionLink("Corporate Forms", "CorporateForms", "FormsHandlers")</li>
<li>@Html.ActionLink("Employee Benefits", "EmployeeBenefitsForms", "FormsHandlers")</li>
<li>@Html.ActionLink("Accident Forms", "AccidentForms", "FormsHandlers")</li>
<li>@Html.ActionLink("Payroll Forms", "PayrollForms", "FormsHandlers")</li>
</ul>
</li>
<li><a href="#">Pay Stubs</a></li>
<li>@Html.ActionLink("FAQ", "FAQ", "FormsHandlers")</li>
</ul>
</li>
<li class="dropdown individualbtnposition">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Support Services<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">IT Support</a></li>
<li>@Html.ActionLink("Purchasing Ticket", "OnlineForms", "FormsHandlers", new {id = "purchasing-services-form" })</li>
<li><a href="#">Maint. Support</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="logout col-lg-1">
<a asp-area="" asp-controller="Home" asp-action="Logout">Sign Out</a>
</div>
I have noticed that on the class="dropdown-toggle", when a menu button is clicked, it changes the square around it to black. This color change is not desired, but attempts to prevent it have been unsuccessful. Despite applying this code:
.dropdown-toggle{ background: white; }
The background only turns white before clicking. After clicking, I have been unable to maintain the original color. Any suggestions? View the reference image for a visual representation of the issue: https://i.sstatic.net/BgdZq.png