CODEWITHSUNDEEP
htmlcsswordpress
Joneskvist
Joneskvist

Reputation: 137

How to edit menu in header - wordpress

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

Answers (2)

chrisbedoya
chrisbedoya

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:

enter image description here

Upvotes: 1

hungerstar
hungerstar

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

Related Questions