I'm trying to edit a menu in wordpress but I can't seem to give the current page menu item the background colour that I want (highlight effect).
When I put in this bit of css...
ul#menu-menu-1.nav.navbar-nav a {
background-color: #FFFFFF;
z-index:9999999;
}
...the link background went white (which is what I wanted). Then I added this:
ul#menu-menu-1.nav.navbar-nav a:hover {
background-color: #34676b;
}
ul#menu-menu-1.nav.navbar-nav a:active {
background-color: #34676b;
}
The a:hover works, but a:active doesn't. Next I tried...
.current_page_item and .current_page_item a:active
...but nothing works, the code below is what I have now and it doesn't work either. Any help will be much appreciated, hopefully all css (I don't know php).
Thanks,
Lisa
ul#menu-menu-1.nav.navbar-nav {
padding-top:30px;
}
ul#menu-menu-1.nav.navbar-nav a {
background-color: #FFFFFF;
z-index:9999999;
}
ul#menu-menu-1.nav.navbar-nav a:hover {
background-color: #34676b;
}
ul#menu-menu-1.nav.navbar-nav li.current_page_item a:focus {
background-color: #34676b;
}
li#menu-item-14.menu-item.menu-item-type-custom.menu-item-object-custom.current-menu- item.current_page_item.menu-item-home.menu-item-14.active {
background-color: #34676b;
}
If I understand this right, you just want to highlight the current page link?
If so:
li.current_page_item a {
background-color: #34676b;
}
Should work.
It searches for the active <li> and then styles the <a> inside it.
I had almost the same problem and I used the following code to solve it.
li.current-menu-item a {
background-color: #34676b;
}
And just in case you want to change the color of the text once the item menu is selected:
li.current-menu-item a {
color: #34676b;
}
Related
I want my link only to change color after I click on it. I have added the appropriate a:link and a:visited pseudo-classes in the correct order. However, my link changes color when I refresh the page too and I don't want this.
I created a simple example for you
If you've never visited the link before, it will be black (default color)
If you've visited the link before, it will be blue
If you hover the link, it will be red
https://jsfiddle.net/ykrfqucw/1/
HTML:
emrerothzerg.com
CSS:
a{
color: black;
}
a:visited {
color: blue;
}
a:hover {
color: red;
}
a:active {
color: yellow;
}
SASS (if you like to have):
a {
color: black;
&:visited {
color: blue;
}
&:hover {
color: red;
}
&:active {
color: yellow;
}
}
#style {
background-color: red;
}
#style:focus {
background-color:yellow;
}
#style:visited {
background-color:yellow;
}
#style:active {
background-color:yellow;
}
Several ways to do it below. Hope it helps
i have this site in wordpress, which has a menu
and the css property which changes the color on hover
.main-navigation a:hover {
background: #fa5742;
color: #f1f1f1;
}
i want Home to be highlighted by default, how can i do that?
i am new to wordpress,therefor i might be missing the simplest of tricks here.
proper way to do it is by highlighting the current menu item
.main-navigation li.current_page_item a {
background: #fa5742;
color: #f1f1f1;
}
Please Write Css (use First Child)
.main-navigation li:first-chile a {
background: #fa5742;
color: #f1f1f1;
}
If you're using a standard WordPress menu you could use the .current_page_item class to highlight the page the user is currently on.
.main-navigation li.current_page_item a {
background: #fa5742;
color: #f1f1f1;
}
If like you describe you simply wish for the first item to always be highlighted you can use the following CSS.
.main-navigation li:first-child a {
background: #fa5742;
color: #f1f1f1;
}
I would like to know how to split or sperate hyperlinks from eachother, i also would like to know how to align or position where the links go. ps. i am just beginning so this is probably basic.
thanks
Not sure about your problem. But from the code you given i just added some changes. Try this.
html { background-image: url(file:///C:/Users/Tom/Pictures/93af2cd5d83f6f839db98e6d5079b4f4.jpg); }
h1 { color: gray; }
a:visited { color: black; }
a:hover { color: yellow; }
a:active { color: yellow; }
a { background-color:gray; filter:alpha(opacity=60); opacity:0.4; padding:0px 15px; }
Sorry for my poor english, I'm french !
The first li is already in red, but I want classical rollover effect (only css)
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ul>
with
li:first-child { color: red; }
li:hover { color: red; }
ul:hover li:first-child { color: black; }
li:first-child:hover { color: red; }
The last line doesn't work : When my mouse is over 1111, he becomes black instead of stay red.
Look here please : http://jsfiddle.net/cP5rQ/3/
And thank you for advance.
You need to increase the specificity of your last rule enough so that it becomes at least equal to the specificity of the third rule; it will then override the third rule and the item will become red as it should.
Do this by writing the last rule as
ul:hover li:first-child:hover { color: red; }
See it in action.
This does the trick. Is this what you wanted?
li:first-child { color: red; }
ul:hover li:first-child { color: black; }
li:hover { color: red; }
ul:hover li:first-child:hover { color: red; }
http://jsfiddle.net/cP5rQ/6/
I have the following HTML:
Bioshock 2<span> - Xbox 360 review</span>
I'd like to style the first part of the link in one way and the span in another, like this:
I've managed to do this, using the following CSS:
a {
text-decoration: none;
}
a span {
color: #c8c8c8;
}
a:link,
a:visited {
color: #787878;
}
a:hover,
a:active {
color: #fff;
background-color: #a10000;
}
However, it doesn't work as expected when I hover over it:
I'd like the entire link to have the same hover effect and not have the span keep its colour. I'd also like this to happen whether you're hovering over the span or the rest of the link. The desired effect would look like this:
Any ideas how I could do this?
Try:
a:hover, a:active, a:hover span {
// ...
}
instead of:
a:hover, a:active {
// ...
}
Add this css code to it:
a span:hover {
color: #fff;
background-color: #a10000;
}
And here is the demonstration. :)