Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
If you’re not using a Child Theme, and if the theme doesn’t have a designated section of the dashboard for CSS modifications then install this Custom CSS Manager plugin http://wordpress.org/plugins/custom-css-manager-plugin
Then use its “CSS Code” section of the dashboard to hold your CSS modifications:
Alternatively use your Child Theme style.css file to hold your CSS modifications:
#primary-menu li:hover ul,
#primary-menu li.sfHover ul,
#page-nav li:hover ul,
#page-nav li.sfHover ul {
top: 18px;
}
I use Chrome’s developer tools to find this stuff out.
Here’s a useful tutorial for Chrome’s dev tools to help find CSS: https://dailypost.wordpress.com/2013/07/25/css-selectors/
Additional Chrome dev info:
* http://developers.google.com/chrome-developer-tools/
* https://developers.google.com/chrome-developer-tools/docs/dom-and-styles
Hi, thanks yes I am using a child theme and have access through the editor to modify the css coding. Can I just add in top:18px somewhere here? dont seem to have the sfHover and not sure what this relates to. Thanks.
This is the section (I think) where the submenu styles are, but not sure which bit effects the hover on submenu.
`* Primary Menu
************************************************/
/* Wrapper for entire menu area */
div#primary-menu {
margin-top: -66px;
width: 740px;
height: 17px;
margin-left: 0px;
font-size: 10px;
}
#primary-menu, #navigation{ }
/* Wrapper for unordered list of menu items */
#primary-menu div.menu {
margin-left: 93px;
height: 17px;
text-align:left;
}
#primary-menu div.menu ul{ line-height: 17px;}
ul#menu-my-custom-menu{
}
/* Menu list. */
#primary-menu ul {
}
#primary-menu li {
border-left: solid 1px #FFFFFF;
margin-right: 0px;
font-size: 12px;
text-transform: lowercase;
}
#primary-menu li#menu-item-9{
border-left: 0px;
}
#primary-menu li a {
background: none;
padding: 0px;
border: none;
width: 90px;
color: #FFFFFF;
text-align:center;
}
#primary-menu ul.sub-menu{
top: 1em;
margin-left: -5px;
background-color: #bab6b6;
color:#FFFFFF;
}
#primary-menu ul.sub-menu li
{border:none;
}
#primary-menu ul.sub-menu li a{
height:15px; text-align:left;
padding-left: 15px;
padding-right: 5px;
margin-top:5px;
}
#primary-menu ul.sub-menu li a:hover{ color: #000000;}
#primary-menu li.current-menu-item a { color: #000000;}
#primary-menu li.current-menu-item li a{ color: #000000; }
#primary-menu ul li a:hover{ text-decoration:underline; }
span.sf-sub-indicator{ display:none; }
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Have you tried adding this:
#primary-menu li:hover ul,
#primary-menu li.sfHover ul,
#page-nav li:hover ul,
#page-nav li.sfHover ul {
top: 18px;
}
?
Alternatively use your Child Theme style.css file to hold your CSS modifications:
Yes tried adding to the bottom of the css styling for this section but still the submenu disappears too quickly for you to click on it.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Make sure you add it right at the bottom (line 583)
My editor doesn’t have line numbers, so I have added it at the very bottom of the whole stylesheet. Once I have this resolved I will try using a better module for this. Quite new to this, have just taken over managing this and too afraid to update wordpress version, and all the modules in case the whole site crashes.
It works if I hover and move cursor down at the right speed but otherwise still disappears too quickly and would be frustrating to use.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Looks like the gap still needs reducing, try changing the value from “18px” to “12px”
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
If you still want the gap visually try adding this instead:
#primary-menu li:hover ul:before,
#primary-menu li.sfHover ul:before,
#page-nav li:hover ul:before,
#page-nav li.sfHover ul:before {
content: "";
padding-top: 50px;
width: 100%;
position: absolute;
top: -100%;
left: 0;
}
Thank you. That works! yay.
I’m not especially wanting the white gap, I think the content wrapper is creating the gap with a margin, so not sure how to get rid of it while keeping the submenu working well.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
The submenu is positioned absolute, it’s not affected by positioning or padding of other elements.
