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 ;
}
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'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 folder that drops down when you hover over it, however I've placed a 20px margin-top to the drop down so it's not pushed up against the main navigation. I like the spacing however when you move your mouse to go select a sub-item the menu disappears.
How would you adjust the margin of the drop down so that it stays so the user can select an item in it?
> ul {
display: none;
}
&:hover > ul {
display: block;
position:absolute;
text-align: left;
z-index:1000;
background-color:#nav-folder-bg-color;
width:150px;
padding: 10px;
list-style: none;
border-radius:#nav-border-radius;
margin-top:20px;
> li a {
color:black;
font-size: .8em;
text-decoration: none;
}
}
EDIT: Here is the menu I am working on - http://menudemo.squarespace.com/home
Put the margin on the first LI in the sub-menu:
&:hover > ul li:first-child {
margin-top:20px;
}
Needed to add
height:50px;
to .main-navigation ul li
I'm not sure if I formulated the question correctly, but let me try to explain what I want to achieve.
I'm trying to style navigation menu of a WordPress-based site.
I want the submenu links to be evenly arranged along the entire width of the website's <body> tag (960px wide). If the links of a particular submenu do not fit in one row, I want them to wrap around and arrange themselves in neat columns.
Finally, I want the submenu, when it drops down on hover, to push the rest of the website's content down.
Problem: the submenu unordered list affects the position of the links in the parent unordered list, moving the links around. Somehow, the only thing I could do to keep the parent menu links in place was to pull the submenus out of the way by applying margin-right:-965px;
Question: How should I modify my CSS to position both submenus all the way to the left, level with the edge of the main container?
(If necessary, I can assign custom classes to each submenu separately, for example: .submenu-about and .submenu-investors.)
Thank you in advance for your help!
Here's the complete CSS for the navigation menu:
.main-navigation ul {
list-style-type:none;
margin-top:45px;
}
.main-navigation ul {
display: inline-block;
width:70%;
float:right;
}
.main-navigation ul li {
float:left;
}
.main-navigation ul li a {
display:block;
margin:3px 0 3px 40px;
}
.main-navigation ul ul {
background:#efefef;
display:none;
}
.main-navigation li {
font-size: 13px;
}
.main-navigation li a {
outline: none;
text-decoration:none;
border-bottom: 0;
color: #6a6a6a;
text-transform: uppercase;
//white-space: nowrap;
}
.main-navigation li a:hover {
color: #000;
}
.main-navigation ul li:hover > ul {
margin:-1px -960px 3px 0;
display:block;
width:960px;
}
.main-navigation li ul li a {
font-size: 11px;
margin: 10px 0 10px 10px;
width:180px;
}
.main-navigation .menu-item > a,
.main-navigation .menu-ancestor > a,
.main-navigation .page_item > a,
.main-navigation .page_ancestor > a {
color: #9a9a9a;
font-weight:bold;
}
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_item > a,
.main-navigation .current_page_ancestor > a {
color: #636363;
font-weight:bold;
}
This Should do it
Add this to your css
.main-navigation ul li .sub-menu {position:absolute; left:0px;}
Found my own answer.
Remove the background from ul li:hover ul.
Set position:relative and the gray background for the ul li:hover >ul li.
Set individually the negative left margins for each submenu li item, to pull them left separately by different number of pixels.
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 ;)