I have a bunch of images named after my pages in wordpress. Example:
page name : heart-health
image name : heart-health.png
My main menu has 1 sub-menu level and for each page name in a sub-level I would like to display the image as a background image set to the left. I have tried so many different ways but had no luck.
I know you can add custom text to the menu in the admin but I wish for it all to be done automatically.
I have found the start and end for sub level menu items in "nav-menu-template.php" & "class-wp-walker.php"
At the moment I just have the same picture showing on all sub menu items when you rollover but that is just using CSS.
.menu ul ul :hover > a{color:#000000;background-color: #eeeeee; background-image:url(images/menu-images/fruit.png); background-repeat:no-repeat;}
Any help or advice would be much appreciated.
The best way to do it is via CSS.
For example
.menu ul ul .custom-class a { ... }
.menu ul ul .custom-class:hover a { ... }
You can set custom classes for each menu item in the WordPress menu management, just make sure the "CSS Classes" checkbox in "Screen Option" (top right of page) is checked.
Also, to make things easier, I would suggest making an image sprite of all the images you'll be using in the menu so that your CSS code is much simpler.
.menu ul ul a {
background:url('/url-to-sprite.png') no-repeat 0px 0px;
}
.menu ul ul :hover a {
background-position:-20px 0px;
}
.menu ul ul .custom-class a {
background-position:0px -20px;
}
.menu ul ul .custom-class:hover a {
background-position:-20px -20px;
}
Related
I am working on a site that that is supposed to display sub-menus when you hover over both the "References" and the "Contact Us" items in the main nav. However, these items will not display.
I have tried adding hover properties via CSS to the menu & sub-menu items but nothing seems to work. It seems to always default to the "display: none;" for the sub-menu.
Here is the URL for the site: http://fongconstruction.com
I'm not sure where to go from here, if there is a CSS fix that maybe I'm missing then any guidance would be helpful! Thanks in advance!
First you need to delete below css from custom.cs(line number 1) and style.css(line number 844) https://prnt.sc/15pru62
#nav .sub-menu {
display: block !important;
}
Also you need to delete inline style(display: none) from sub menu https://prnt.sc/15ps03v
After that add this css
#nav li ul.sub-menu {
display: none;
}
#nav li:hover ul.sub-menu {
display: block;
}
I was able to locate a solution by using a different selector that I had not thought of before:
#menu-item-5990 a:hover + .sub-menu,
#menu-item-5237 a:hover + .sub-menu {
display: block;
}
I want to change the color of the parent and the sub parent category into two different colours. Currently using the following code for my widget side tab.
.widget ul {background: gray;padding-top: 1px;}
.widget ul li {background:lightgray;margin: 1px;}
.widget ul a{background-color:darkgray;padding:1px;}
looking to change the font colour. I have tried many options but still not getting it right.
Try this:
.widget ul li.parent > a {
color: red !important;
}
It's hard to say without seeing your HTML structure, but are each of the sub-parent links ('Access Control', 'Electronic locks', etc) their own ul tags?
If so, could you not target each of their first li's like this:
.widget ul > li:first-of-type > a {
color: red;
/* INSERT STYLES */
}
This would target all uls' first li > a elements, as in the image on the right.
Im trying to change to the color in both the drop down menu, as well as the footer background color of the site http://ablecareinhome.com/
Ive tried numerous css tweeks to make this change, but I am at a stale mate. I was able to get the nenu buttons themselves to change using the following:
#menu li.current-menu-item a,
#menu li.current-menu-parent a,
#menu li.current_page_parent a,
#menu li a.selected,
#menu li a:hover,
#menu li.current_page_item a {
background: url("../images/menu-bg.png") repeat-x scroll center top #00a99d !important;
}
this is the color i am going for in the other footer and menu parts. #00a99d
Any help is appreciated. As a side note, this theme allows internal css options/modifications without building a full childs theme. It is done from the dashboard, and stylesheets are coming from external source it appears.
Any help is greatly appreciated!!
well see the css here
#menu .sf-menu li li {
font:12px Arial, Helvetica, sans-serif !important;
text-transform:capitalize;
margin:0;
padding:0;
background-color: #00a99d;}
As for footer its an image see the link
you can remove the backgroun image and
edit this css
.footer-container {
background:url(../images/footer-bg.png); remove this
background-color: # #00a99d;}
I am using Superfish to show a horizontal menu on a website. Whenever I am on a page that is either the current menu item or sub-menu item, the sub-menu always show. When this happens, it overlaps other sub-menus when you hover the mouse over them. How do you hide the current sub-menu being shown?
edit:
OK I figured out how to do this with CSS. I added the following code to superfish-navbar.css
ul.sf-navbar ul {
display: none;
}
ul.sf-navbar li:hover ul {
display: block;
}
It hides the current sub-menu and shows all sub-menus when you hover over the parent item.
For CSS
In superfish-navbar.css you would remove the following rule at line 63.
ul.sf-navbar .current ul, ul.sf-navbar ul li:hover ul, ul.sf-navbar ul li.sfHover ul {
left: 0;
top: 2.5em;
}
When You End Up Using Javascript
In the documentation for the superfish plugin, on the Options tab, it shows the default options. It looks like pathLevels is set to 1, and the description of pathLevels
the number of levels of submenus that remain open or are restored
using pathClass
looks like the option you need. Try setting pathLevels to 0.
See this jsfiddle for comparison: http://jsfiddle.net/keithwyland/G87Lm/
http://users.tpg.com.au/j_birch/plugins/superfish/#options
I have a drop down menu made in css. When you hover over the text (ul) the menu appears (the li appears). I wanted to know, how to make a submenu, that when you hover over the li's another menu (submenu) would appear and would offer other options.
Ex:
-Tutorials (You hover over tutorials)
(Then these options appear)
-Video tutorials
-Other tutorials
-Windows (and if you hover over windows you have 3 choices)
//How do I make that!
-Windows xp
-windows 7
-Windows Vista
That is what I want to make.
Thanks people!!
you need this tutorial: son of suckerfish dropdowns
If you're using pure CSS then you just need to add a new level of styles. You haven't posted your original code, but assuming you currently have something like:
ul.menu > li > ul {
display: none;
}
ul.menu > li:hover > ul {
display: block;
}
Then you'd simply need to add:
ul.menu > li > ul > li > ul {
display: none;
}
ul.menu > li > ul > li:hover > ul {
display: block;
}
You will of course need to add some positioning code to your third level list so it appears to the right of the active menu item.
CSSPlay is a great resource with all kinds of menu's you can possibly imagine. Plus all menu's are completely cross-browser.
Check it out, I'm sure Stu got one that fits your needs:
http://www.cssplay.co.uk/menus/