Keeping the menu bar the same color when opened

HTML & CSS
1

When I click a button on my navbar to open up a dropdown, the button that was clicked turns black. I can’t seem to figure out any way to fix this. I have tried modifying the dropdown class and the dropdown-toggle class but nothing seems to effect the color after it is clicked. I would like the color to either stay unchanged, or for me to be able to edit it, but I certainly don’t want it black. Here is the code:

<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>
</nav>

css:

.layoutBody {
    background: white;
    color: #002d62;
    font-family: 'Oswald', sans-serif;
}
.navsize{
    height: 135px;
    border-bottom-style: solid;
    border-bottom-width: 10px;
    border-bottom-color: #002d62;
}
.navbar-inverse {
    background: linear-gradient(#8c8c8c, #c4c4c4);
}
nav a {
    color: #002d62 !important;
    font-size: 17px;
}

nav a:hover {
    color: #efcd21 !important;
}
.navbar-header a {
    height: 120px;
    width: auto;
    padding-top: 3px;
}

#logo {
    height: 120px;
    width: auto;
}

#navposition {
    width: 50%;
    margin-top: 5.5%;
}
.individualbtnposition {
    font-size: large;
}


.dropdown-submenu {
    position: relative;
}
.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu > a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #cccccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover > a:after {
    border-left-color: #002d62;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left > .dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

#footer {
    background-color: #002d62;
    padding-top: 8px;
}

#bottombar {
    background-color: #efcd21;
    width: 100%;
    height: 30px;
}

#sc2info {
    color: #002d62;
    margin-left: 15px;
}

.logout {
    position: absolute;
    bottom: 5px;
    right: 20px;
}

    .logout > a {
        font-size: 16px;
        font-weight: bolder;
        color: white;
    }

        .logout > a:hover {
            color: white;
        }

And here is an example of my problem:

1059×229 25.8 KB

2

We’d need to see the CSS which goes with that - or preferably a link to a page which demonstrates the problem.

3

Ok, I added the CSS, however this page is not active at this time so I don’t have a way to show you a live page.

4

Here is a codepen, but I can’t seem to get the actual menu buttons to work…
It just displays the navbar, buttons don’t work. But if someone knows what I’m missing to get it to work then that would be the best thing to be able to see it in action.

See the Pen deXKbB by Ethan Forbes (@ethancodes) on CodePen.

5

From looking at your screenshot and html, the culprit will be this list item or anchor, not the sub ul.

 <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>

Look through your css for either

.individualbtnposition
or
.dropdown-toggle

You should also be able to use your browser dev tools to inspect that element and track down the css that styles it

6

Ah I may have to try to use the dev tools, I’m not really familiar with using them much, but I will figure that out. I did put this in:

.individualbtnposition:active {
    background-color: white;
}

And now when I click the button, it turns white for a split second before it seems to be covered up or changed back to black.

7

I tracked it down using the dev tool, found it can be modified at nav > li, put in nav > li : active { background-color:white}, and got the same results as when I put that on .individualbtnposition.

8

pseudo :active only styles while your mouse is down. The moment you let up on the mouse click :active styles go away

9

aaahhh I did not know that…

10

I got it! I was looking at the wrong component. This fixed it:

.navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus {
    color: #fff;
    background-color: initial;
}

Found this in the dev tools.

4 Likes
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.