I have the first letter selector working, to change the color of the first letter but when hovering that area the color matches with the background so it becomes invisible. This is the part of code working
.nav-menu li a:first-letter {color:#b5b503;}
.nav-menu li a:first-letter {font-weight:bold;}
.nav-menu li a {
color: #fff;
display: block;
font-size: 15px;
line-height: 1;
padding: 15px 20px;
text-decoration: none;
}
And this is the part where i guess i should add a .first-letter selector but cant find out how as it is already a hover selector in it
.nav-menu li:hover > a,
.nav-menu li a:hover {
background-color: #b5b503;
color: #273664;
}
Yes, you can
Example CSS :
p:first-letter {
font-size: 120%;
}
p:hover:first-letter {
color: white;
}
HTML :
<p>Hello world</p>
Demo here : http://jsfiddle.net/LRFw8/1/
For your code, you would style this in .nav-menu li a:hover:first-letter
Related
I'm trying to figure out how to change the hover color, but only when the text has a link
This is the css code, but it changes color with or without links
h1, h2, h3, h4 {
color:#3F3F3F;
}
h1:hover, h2:hover, h3:hover, h4:hover {
color:#000000;
}
This will depend on how you have structured the links.
There are two basic varieties.
a) Links inside headings. In which case:
a {
color: red;
text-decoration: none;
}
h1 a:hover {
color: blue;
}
<h1>Link Inside Heading</h1>
b) Headings inside links. In which event:
a {
color: red;
text-decoration: none;
border: 1px solid grey;
display: inline-block;
}
a:hover {
color: green;
}
/* or */
h1 {
background: #c0ffee;
}
a h1:hover {
color: pink;
}
<h1>Heading Inside Link</h1>
Sample:
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover {
color:grey;
}
The anwser you are looking for is simple:
h1 a:hover, h2 a:hover, ect {
color:#000000;
}
You stated that the header when hovered should change color, which is not what you want.
Now it says that a header which contains a link (a) should change color when it is hovered. ;)
I'd like to ask you about the way to replace the text with icon (home icon as the first menu child).
My css is similar to this one:
http://livedemo00.template-help.com/prestashop_53577/
I've added this code at the end of the global.css:
.sf-menu li:first-child a:before{
content: "\f015";
font-family: "FontAwesome";
display: inline-block;
font-size: 33px;
line-height: 70px;
color: black;
}
.sf-menu li ul li a:before{
content:none!important;
}
which gives:
What's the best way to hide the text "Clothing"?
You just need to add
text-indent: -9999em
to .sf-menu li:first-child, to indent the text out of view a and then
text-indent: 0
to .sf-menu li:first-child a:before, to reset the property for the pseudo selector
I have a submenu in WordPress that was set up as a list in the following way:
.sidebar .widget { margin-top:20px; margin-bottom: 0px; padding-left:20px;}
.sidebar .widget h5 {line-height: 13px; margin-bottom: 30px; font-weight: bold;font-family: 'Droid Serif', Georgia, Times, serif; }
.sidebar .widget ul li { margin-bottom: 2px;background-color:#b3b1b2;padding:6px 2px; }
.sidebar .widget ul li a { margin-bottom: 2px;background-color:#b3b1b2;color:#ffffff ;padding:6px 2px; }
.sidebar .widget ul li a:hover { margin-bottom: 2px;background-color:#dadada;color:#202e3b ;padding:6px 2px; }
.sidebar .widget ul li a:active { margin-bottom: 2px;background-color:#dadada;color:#202e3b ;padding:6px 2px; }
See the page here: http://www.mahabbanetwork.com/who-we-are/
However, I would like the hover state to change the colour of the whole "bar" to the lighter grey, i.e. the full width instead of just the text-background which it is at present. I have played around with increasing the righthand padding but it, of course, increases it relative to the length/number of characters of the text link, which is different for each link.
This site uses a pre-coded WP template so I am not sure how to amend it to achieve the desire effect without messing things up elsewhere on the site.
Help would be greatly appreciated.
Add :hover to li
.sidebar .widget ul li:hover
{
background-color:#dadada;
color:#202e3b ;
}
Add the hover state grey color to .sidebar .widget ul li:hover instead of .sidebar .widget ul li a:hover
.sidebar .widget ul li:hover
{
background-color:#dadada;
color:#202e3b ;
}
I have a div in which I'd like to override my global link style. I have two link styles, one global, one specific. Here the code:
A:link {text-decoration: none; color: #FF0000;}
A:visited {text-decoration: none; color: #FF0000;}
A:hover {text-decoration: none; color: #FF0000;}
A:active {text-decoration: none; color: #FF0000;}
#macrosectiontext
{
position:relative;
font:Arial, sans-serif;
text-align:center;
font-size:50px;
font-style: bold;
margin-top:245px;
opacity: 0.6;
background-color:transparent;
}
#macrosectiontext A:link {text-decoration: none; color: #000000;}
#macrosectiontext A:visited {text-decoration: none; color: #FFFFFF;}
#macrosectiontext A:hover {text-decoration: none; color: #FFFFFF;}
#macrosectiontext A:active {text-decoration: none; color: #FFFFFF;}
and I use the div like this:
<div id="macrosectiontext">bla bla bla</div>
however it seems that it doesn't work. The div still inherits the global link style.
CSS work on inheritance, so you should only override the properties you want to change.
Try always to write HTML & CSS lowercase, still your HTML and CSS are correct
a:link,
a:visited,
a:hover,
a:active {
text-decoration: none;
color: #f00;
}
#macrosectiontext {
position: relative;
font:Arial, sans-serif;
text-align: center;
font-size: 50px;
font-style: bold;
margin-top: 245px;
opacity: 0.6;
background-color: transparent;
}
#macrosectiontext a:link {
color: #000;
}
#macrosectiontext a:visited,
#macrosectiontext a:hover,
#macrosectiontext a:active {
color: #fff;
}
I made a fiddle for you to show your code is working (changed the hover color, just for demo)
In The css I would not use the id "#macrosectiontext a:link..." for the link code I would use a class ".macrosectiontext"
use a lower case "a" instead of a Cap "A" in the link style
If you using the style only a few times you can use a span tag around the link and then call to your style from the span tag in stead of the div.
I am currently working on a menu that uses superfish. It is completely customizable via css but I am experiencing a very very frustrating problem.
The 2nd tier menu somehow inherits values from I-know-not-where and whatever I do to change it completely destroys the entire layout. It looks as if the text is somehow an entire line further down then it should be. The mouseover style is working as it should be however.
Another frustrating thing is that I need to move the text from the tier1 menu items to the bottom of the bar - nothing I have tried so far has moved only the text and not the entire item. If anyone has a solution for that it would be greatly appreciated as well.
you can see what I mean here: http://redaxo.witconsult.de/
it concerns the tier 2menues on menu item 2 and 5 (Leistungen & Kontakt)
here is the code I believe is responsible for the problem:
the entire code here: http://redaxo.witconsult.de/files/superfish.css
Thanks a ton!!!
.sf-menu {
float: left;
margin-bottom: 1em;
}
.sf-menu a {
text-indent: 7px;
}
.sf-menu a, .sf-menu a:visited {
/* visited pseudo selector so IE6 applies text colour*/
color: #333;
}
.sf-menu li { /*///////////// menu lvl 1 /////////////*/
color: #333;
width: 118px;
line-height: 85px;
font-weight: normal;
font-size: 14px;
text-decoration:none;
background: url(../images/menu/menuitem.png);
}
.sf-menu li a:focus, .sf-menu li a:hover, .sf-menu li a:active {
color: #DDD;
line-height: 85px;
background: url(../images/menu/menuitem-mo.png);
}
.sf-menu li li { /*///////////// submenu lvl 2 ///////////////////*/
color: #ddd;
font-size: 12px;
top: 50px;
height: 26px;
background: url(../images/png_black40per.png);
}
.sf-menu li li a:focus, .sf-menu li li a:hover, .sf-menu li li a:active {
color: #333;
line-height: 26px;
background: url(../images/png_white40per.png);
In response to your new problem - that the text is at the top now instead of the bottom - change the height of your anchor elements <a> and add some padding-top:
/* superfish.css line 59 */
.sf-menu a {
color:#DDDDDD;
text-indent:7px;
height: 50px; /* ADDED */
padding-top: 35px; /* ADDED */
}
/* superfish.css line 78 */
.sf-menu li a:focus, .sf-menu li a:hover, .sf-menu li a:active {
color: #DDD;
height: 50px; /* CHANGED */
background: url(../images/menu/menuitem-mo.png);
padding-top: 35px; /* ADDED */
}
... if you can't edit superfish.css add a rule like this one somewhere else:
#site-content .sf-menu li a {
height: 50px;
padding-top: 35px;
}
PS Please update the question body to reflect the changes in your question ;)