Archived topic
Mega Menu Highlight
15 replies · Started by scott doel on November 7, 2017
Ok so I'm trying all the options (mega-menu, float logo and centre logo). I like the mega menu from your tutorial here and the floated logo tutorial here. I also wanted a hover effect so have used the code provided in this post.
All is good but I cant get the hover effects to work on the sub-menu class
Hi there,
This should help: https://generatepress.com/forums/topic/dropdown-menu-mouseover-styling/
I'll be adding it to the Doc page as well: https://docs.generatepress.com/article/adding-menu-hover-animation/
ok the sub-menu class doesnt work, can you update the docs you mention and I can go from there please
Tom's method in the thread I linked didn't work?
If so can you leave the code in so we can see why it isn't working?
Thanks!
Tom doesn't list another method, he mentions the class to use. It's the same class I mentioned in my first post saying that it doesn't work.
When you have updated the docs can you let me know so I can make the changes
So when you do this: https://generatepress.com/forums/topic/dropdown-menu-mouseover-styling/#post-396722
for the menu hover code it doesn't work?
Yes as explained in my first, second and third post the .sub-menu class does not correct the issue.
When you have corrected the docs please can you let me know
The class I mentioned in that topic has a very subtle change to it.
Here's the code that will work on your sub-menu as well:
@media (min-width: 769px) {
.main-navigation .menu .menu-item > a::after {
content: "";
position: absolute;
right: 0;
left: 50%;
bottom: 15px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
display: block;
width: 0;
height: 2px;
background-color: currentColor;
transition: 0.3s width ease;
}
.main-navigation .menu .menu-item.current-menu-item > a::after,
.main-navigation .menu .menu-item > a:hover::after {
width: 50%;
}
}Thanks, Tom, getting closer but the line is not under the menu item, it is through it and off to the side. Can you have a look at my site please
Below is all the CSS I have for the mega-menu, float logo, and the highlight:
/*Mega menu*/
.site-header {
display: none;
}
.main-navigation .site-logo.navigation-logo {
position: absolute;
left: 0;
top: 0;
}
.main-navigation .site-logo.navigation-logo img {
height: auto;
}
nav .main-nav .mega-menu {
position: static;
}
nav .main-nav .mega-menu > ul {
position: absolute;
width: 100%;
}
nav .main-nav .mega-menu > ul > li > a {
font-weight: bold;
}
nav .main-nav .mega-menu>ul>li {
display: inline-block;
width: 25%;
vertical-align: top;
}
nav .main-nav .mega-menu.mega-menu-col-2>ul>li {
width: 50%;
}
nav .main-nav .mega-menu.mega-menu-col-3>ul>li {
width: 33.3333%;
}
nav .main-nav .mega-menu.mega-menu-col-5>ul>li {
width: 20%;
}
nav .main-nav .mega-menu > ul > li > a:hover,
nav .main-nav .mega-menu > ul > li > a:focus,
nav .main-nav .mega-menu > ul > li[class*="current-"] > a,
nav .main-nav .mega-menu ul ul {
background-color: transparent !important;
}
nav .main-nav .mega-menu ul .sub-menu {
position: static;
display: block !important;
opacity: 1 !important;
width: 100%;
box-shadow: 0 0 0;
}
nav .main-nav .mega-menu .sub-menu .menu-item-has-children .dropdown-menu-toggle {
display: none;
}
@media (max-width: 768px) {
nav .mega-menu>ul>li {
display: block;
width: 100% !important;
}
nav .main-nav .mega-menu > ul {
position: relative;
}
}
@media (min-width: 769px) {
.main-navigation .menu .menu-item > a::after {
content: "";
position: absolute;
right: 0;
left: 50%;
bottom: 15px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
display: block;
width: 0;
height: 2px;
background-color: currentColor;
transition: 0.3s width ease;
}
.main-navigation .menu .menu-item.current-menu-item > a::after,
.main-navigation .menu .menu-item > a:hover::after {
width: 50%;
}
}
Try adding this inside the media query:
.main-navigation .menu .sub-menu .menu-item > a::after {
bottom: 0;
left: 25%;
}Closer Tom, but now the top level is out of line with the section and the lower element highlights what I think is the entire column. Maybe my multiple 'hacked' css so I have added it again below. I understand were getting outside the relms of free support here so how do I pay you?
/*Mega menu*/
.site-header {
display: none;
}
.main-navigation .site-logo.navigation-logo {
position: absolute;
left: 0;
top: 0;
}
.main-navigation .site-logo.navigation-logo img {
height: auto;
}
nav .main-nav .mega-menu {
position: static;
}
nav .main-nav .mega-menu > ul {
position: absolute;
width: 100%;
}
nav .main-nav .mega-menu > ul > li > a {
font-weight: bold;
}
nav .main-nav .mega-menu>ul>li {
display: inline-block;
width: 25%;
vertical-align: top;
}
nav .main-nav .mega-menu.mega-menu-col-2>ul>li {
width: 50%;
}
nav .main-nav .mega-menu.mega-menu-col-3>ul>li {
width: 33.3333%;
}
nav .main-nav .mega-menu.mega-menu-col-5>ul>li {
width: 20%;
}
nav .main-nav .mega-menu > ul > li > a:hover,
nav .main-nav .mega-menu > ul > li > a:focus,
nav .main-nav .mega-menu > ul > li[class*="current-"] > a,
nav .main-nav .mega-menu ul ul {
background-color: transparent !important;
}
nav .main-nav .mega-menu ul .sub-menu {
position: static;
display: block !important;
opacity: 1 !important;
width: 100%;
box-shadow: 0 0 0;
}
nav .main-nav .mega-menu .sub-menu .menu-item-has-children .dropdown-menu-toggle {
display: none;
}
@media (max-width: 768px) {
nav .mega-menu>ul>li {
display: block;
width: 100% !important;
}
nav .main-nav .mega-menu > ul {
position: relative;
}
}
@media (min-width: 769px) {
.main-navigation .menu .menu-item > a::after {
content: "";
position: absolute;
right: 0;
left: 50%;
bottom: 0;
left: 25%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
display: block;
width: 0;
height: 2px;
background-color: currentColor;
transition: 0.3s width ease;
}
.main-navigation .menu .menu-item.current-menu-item > a::after,
.main-navigation .menu .menu-item > a:hover::after {
width: 50%;
}
}
Make sure you leave the original CSS and just paste the additional CSS I provided after the existing stuff.
Thanks, Tom, nearly there and is there a way to control the width of the underline so it matches the behaviour of the main menu?
You can add width: 100%; - but you might need to adjust it to fit, as the pseudo element isn't fully aware of the item width.
OK thanks Tom
