Reputation: 137
I need help on how to start editing the header on my wordpress site.I am using google chrome and the developers tool. I am a bit lost on how to pick out css properties and edit them myself and would appreciate some help.
The URL to my site I want it to look like the wordpress header
When you hover over it I want it to display an opacity and when you click on it I want it to mark the whole "Square".
The CSS I am using for my menu is:
.navbar-nav > li > a {
color: #fff;
text-transform: uppercase;
font-weight: bold;
font-family: inherit;
font-size: 12px;
line-height: 15px;
}
.navbar-nav > li > a:hover {
background: rgba(255, 255, 255, 0.8);
transition: background 0.3s;
}
.navbar-nav > li.active > a {
background: rgba(255, 255, 255, 0.8);
}
Upvotes: 0
Views: 100
Reputation: 810
Remove the margin from the a elements
.navbar-nav > li > a {
color: #fff;
text-transform: uppercase;
font-weight: bold;
font-family: inherit;
font-size: 12px;
line-height: 15px;
}
Once you hover the navigation item you add a semi transparent background. You can also add a transition to add a "fade" animation.
#wpo-mainnav.navbar ul.nav > li:hover > a {
background: rgba(255, 255, 255, 0.8);
transition: background 0.3s;
}
To mark the current category just add a background to that item.
#wpo-mainnav.navbar ul.nav > li.active > a {
background: rgba(255, 255, 255, 0.8);
}
* EDIT *
Your navigation items have an :active styling, try adding this:
.navbar-default .navbar-nav > li > a:active {
color: #434a54;
}
Stylesheets being used:
Upvotes: 1
Reputation: 21725
The background color that you are looking to modify is on the list element (li
) not the anchor element (a
). I suppose you could use the anchor element but it doesn't take up the whole height of your navigation bar and that might not be the look you want. WordPress will add the class of .active
to the menu item that corresponds to the current page.
#main-menu > li:hover,
#main-menu > .active {
background-color: #8ACEEC;
}
As a side note, try to use !important
sparingly. It should more or less only be used as a last resort.
Upvotes: 0