[Resolved] Mega Menu Highlight

[scott doel]

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

[Leo]

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/

[scott doel]

ok the sub-menu class doesnt work, can you update the docs you mention and I can go from there please

[Leo]

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!

[scott doel]

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

[Leo]

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?

[scott doel]

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

[Tom]

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%;
    }
}

[scott doel]

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%;
    }
}

[Tom]

Try adding this inside the media query:

.main-navigation .menu .sub-menu .menu-item > a::after {
    bottom: 0;
    left: 25%;
}

[scott doel]

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%;
    }
}

[Tom]

Make sure you leave the original CSS and just paste the additional CSS I provided after the existing stuff.

[scott doel]

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?

[Tom]

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.

[scott doel]

OK thanks Tom

[Author]

Posts