How do I change the background color of the links in my header's navigation upon hover? (image provided)

celuva2017 · ‎10-12-2017

How do I change the background color of the links in my navigation header when I hover over them? I've changed the font color (as you can see in the image- it changes from its original blue to orange text when I hover), but I can't change the background color of the link. As you see now in the "My Requests" link below, it's currently a lighter gray when you hover, but I want it to change to white instead. Can provide code if needed. Thanks!

brianrichards · ‎10-12-2017

A quick and dirty way to do this might be to edit the page properties of the page(s) where you want to make the change and add the following page-specific CSS:

header ul li:hover {

background-color: yellow;

}

Naturally pick the color you want. This should affect only the menu items in the header. This code could be added directly to the header style as well.

- Brian

celuva2017 · ‎10-12-2017

Thanks! I have CSS for my header widget, so I assume I could just add it there? But, what HTML would I use to make it work? Here's my CSS:

.navbar {

transition: 250ms opacity ease-in-out;

-webkit-transition: 250ms opacity ease-in-out;

border: 0;

border-bottom: 4px solid $sp-navbar-divider-color;

}

.navbar-inverse .navbar-fade {

opacity: 0.4;

}

.navbar-toggle {

border-color: rgba(255, 255, 255, 0.25);

}

.nav > li > a {

max-height: 50px;

}

.navbar-brand {

height: 50px;

padding: 0;

}

.navbar-brand img, .navbar-brand span {

margin-left: $sp-logo-margin-x;

margin-right: $sp-logo-margin-x;

margin-top: $sp-logo-margin-y;

margin-bottom: $sp-logo-margin-y;

display: block;

max-height: $sp-logo-max-height;

max-width: $sp-logo-max-width;

position: relative;

top: 50%;

-webkit-transform: translateY(-50%);

-ms-transform: translateY(-50%);

transform: translateY(-50%);

}

.breadcrumb-container {

background-color: $panel-bg;

}

/* for mobile app */

.navbar-inverse.is-native {

background-color: #405060;

}

nav{

margin-bottom: 0px;

border-radius: 0px;

}

.navbar-collapse{

padding-right: 0px;

}

.navbar-nav {

margin: 0px;

}

/* unvisited link */

a:link {

color: #002F6C;

}

/* visited link */

a:visited {

color: #002F6C;

}

/* mouse over link */

a:hover {

color: #EB5F0C;

}

Jaspal Singh · ‎10-12-2017

Possibly the last piece of snippet

/* mouse over link */

a:hover {

color: #EB5F0C;

}

try replacing it with

/* mouse over link */

a:hover {

color: #405060;

}

celuva2017 · ‎10-12-2017

Thanks, Jaspal, but that line of code is actually what makes my links change color, and it works correctly for me.