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
Related
On this site, if I inspect "What We Do", I see the HTML code:
<a title="What we do – Mad Hat Media" href="http://test.doig.com.au/MHM/services/" class="sf-with-ul">What We Do<span class="sf-sub-indicator"> »</span></a>
with CSS code:
.menu li a .sf-sub-indicator, .menu li li a .sf-sub-indicator, .menu li li li a .sf-sub-indicator {
background: none;
content: '»';
color: #622C82;
}
I can't see why the content: '»' does not display. The CSS element has a width and a colour.
What is missing are the drop down indicators (indicated by the green arrows in the screen shot below)
Help appreciated.
I guess you should have a look at this class
.menu li a .sf-sub-indicator,
.menu li li a .sf-sub-indicator,
.menu li li li a .sf-sub-indicator {
background: url(images/arrow-down.png) no-repeat;
height: 16px;
position: absolute;
right: 5px;
text-indent: -9999px;
top: 13px;
width: 16px;
}
the text-indent property causes the >> to go AWOL. Remove that and you are kinda set. You may have to toggle other classes though.
As for the drop down indicators, they are very much present, just remove the background:none
On that note, content property is usually set to ::before and ::after pseudoelement. Do have a look into this mdn link .
As I can see in your code selectors .menu li a .sf-sub-indicator, .menu li li a .sf-sub-indicator, .menu li li li a .sf-sub-indicator look almost equal.
Anyway if you want implement content attribute it's better to write something like:
.sf-sub-indicator::after {
background: none;
content: '»';
color: #622C82;
}
http://imgur.com/a/hw1kb
Background image is set for this span.
Inspect it again:
.menu li a .sf-sub-indicator, .menu li li a .sf-sub-indicator, .menu li li li a .sf-sub-indicator {
background: url(images/arrow-right2.png) no-repeat;
}
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 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
I need some more help on my superfish menu here:
http://web288.merkur.ibone.ch/klingler/
I would like to modify the main buttons on hover and current. However this does also change the submenu entries what I do not want. I am not a CSS expert but somehow the submenu entries do inherit the properties. What I tried to add is the following
.sf-menu a:hover,
.sf-menu li.current a,
.sf-menu li.sfHover a {
background: #e24c4c url(../../images/bg-top-a-active.png) no-repeat center bottom;
margin: 5px;
padding: 0 10px;
height: 35px;
line-height: 35px;
border-radius: 5px;
}
This does what I want for the main buttons but it does also change the submenu entries... What am I doing wrong?
As I understand you only want to select the a elements which are direct children of li.current or li.sfHover.
.sf-menu a:hover,
.sf-menu li.current > a,
.sf-menu li.sfHover > a {
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 ;)