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;
}
Related
On the WordPress theme I am working on https://themes.getmotopress.com/2019/ the menu turns into a circle and excess menu items are put into this when the screen resolution decreases.
I would like to stop <div class="main-menu-more"> from showing and all elements become listed in the main container. I have used the code
.main-navigation .main-menu-more {
display:none;
}
Which hides the more menu however the elements inside do not show?
Try this style I hope this will work for you but you should have to upgrade style according to your requirement
#media (max-width:500px){
.submenu-expand{
display: none;
}
.main-navigation .sub-menu {
background-color: transparent;
position: relative;
opacity: 1;
left: 0;
}
.main-navigation .sub-menu > li > a, .main-navigation .sub-menu > li > .menu-item-link-return {
color: #0073aa;
}
.sub-menu:hover{
position: relative;
}
}
I checked out the source codes of the WordPress you are currently working and determined that by deleting the word "toggle" from class="submenu-expand main-menu-more-toggle is-empty" which will become class="submenu-expand main-menu-more is-empty" will no longer hide the menus in the circle, but will simply become part of the responsive webpage.
The code came from the button section of your WordPress. Simply search for the class attribute with a value of "submenu-expand main-menu-more-toggle" using the search function on your text editor and delete the word "toggle" from it. It worked for me.
Let me know how it went.
I am using the twentysenteen wordpress theme. I want to change the Breakpoint of the desktop menu to the responsive menu.
Is there any way that you can change it a clean way. I only found some fishy Css solutions in the web.
Thanks in advance
Okay i found a solution a pretty clean solution.
There are two basic things you need to change.
First display the toggle button
.js .menu-toggle,
.js .dropdown-toggle {
display: block;
}
and secondly just hide the menu ul
.js .main-navigation ul, .js .main-navigation ul ul, .js .main-navigation > div > ul {
display: none;
}
than add some styles like display: block the li
I have a menu, which is responsive, the only problem it has is with the sub-level, please check the example here
http://jsfiddle.net/6vp3U/409/
.sf-menu ul {
position:static !important;
display: none !important;
}
.xpopdrop ul {
display: block !important;
}
in above example, under "Item 2" there is another sub-menu under "item 2.1", that doesn't work according to the media query, I want this to work as other sub menus working, please drag the fiddle center area to see this in action.. I know it has something to do with the css "ul".. tried a lot, couldn't find a solution, I would appreciate if someone experienced with CSS can spend 5 minutes and help me fix this..
regards
I add two selectors:
.xpopdrop ul ul {
display: none!important;
}
.xpopdrop .xpopdrop ul {
display: block!important;
}
It seems like worked...
Fiddle
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;
}
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/