Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
I can help you if you show the website.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
In the “Additional CSS” section of the dashboard add this:
@media screen and (min-width: 768px) {
/* Containers */
.main-navigation li,
#masthead .wrap {
position: static;
}
/* Top-level links */
.main-navigation ul > li a {
position: relative;
}
/* Top-level items spacer to help predictable hover space */
.main-navigation ul > li a::after {
bottom: -100%;
content: '';
height: 100%;
left: 0;
position: absolute;
width: 100%;
}
/* Submenu pseudo element */
.main-navigation ul li.menu-item-has-children.focus:before,
.main-navigation ul li.menu-item-has-children:hover:before,
.main-navigation ul li.menu-item-has-children.focus:after,
.main-navigation ul li.menu-item-has-children:hover:after,
.main-navigation ul li.page_item_has_children.focus:before,
.main-navigation ul li.page_item_has_children:hover:before,
.main-navigation ul li.page_item_has_children.focus:after,
.main-navigation ul li.page_item_has_children:hover:after {
display: none;
}
/* Submenu position */
.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
left: 0;
width: 100%;
}
/* Dropdown items */
.main-navigation ul li {
float: left;
}
/* 2nd level Submenu position */
.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
left: 0;
top: 100%;
}
/* Dropdown icons */
.main-navigation ul ul .menu-item-has-children > a > .icon,
.main-navigation ul ul .page_item_has_children > a > .icon {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
}
https://codex.ww.wp.xz.cn/CSS#Custom_CSS_in_WordPress
Thanks a lot, Andrew!
I hate to ask again, but is there a way to have the sub menu items placed directly under the main menu items (when hover)? Been trying out different combinations all day but to no avail :S
Richard
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
I don’t understand what you want, can you illustrate it in an image?
As it is now, the submenu items goes all the way to the left, while the main menu items are centered – which makes an awkward jump between the two. I would like the submenu items to be positioned directly under, or at least centered on the bar.
This is what I’m aiming for.
Thanks beforehand
R
Hellow Andrew i have same problem, can you help me to??
im using template from http://rt19-demo10.rtthemes.com/
and i want to have full width dropdown like https://www.intercompcompany.com/
thank you
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
@wersaq91, If you have the 2017 theme then we can help you achieve that. Otherwise you have to use the support for your theme.
This is close. The menu dropdown items are now displaying horizontally with the code shared above, but the sub-menus within those categories show up at the bottom left and go away when I try and move the mouse to them. Is there a way to make them appear under the dropdown menu items?
