Mega Menu Highlight – GeneratePress

This topic has 15 replies, 3 voices, and was last updated 6 years, 5 months ago by Tom.

Viewing 15 posts - 1 through 15 (of 16 total)

Author

Posts

November 7, 2017 at 3:05 am #417661

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

November 7, 2017 at 7:57 am #417835

Leo

Staff

Customer Support

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/

November 8, 2017 at 1:40 am #418262

scott doel

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

November 8, 2017 at 8:22 am #418534

Leo

Staff

Customer Support

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!

November 8, 2017 at 10:22 am #418651

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

November 8, 2017 at 11:27 am #418712

Leo

Staff

Customer Support

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?

November 9, 2017 at 12:27 am #419186

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

November 9, 2017 at 12:40 am #419202

Tom

Lead Developer

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

November 10, 2017 at 12:06 am #420377

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

November 10, 2017 at 7:38 pm #421292

Tom

Lead Developer

Try adding this inside the media query:

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

November 11, 2017 at 12:57 am #421425

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

November 11, 2017 at 9:23 am #421790

Tom

Lead Developer

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

November 13, 2017 at 12:28 am #422813

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?

November 13, 2017 at 9:12 am #423288

Tom

Lead Developer

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.

November 13, 2017 at 10:39 am #423347

scott doel

OK thanks Tom

Author

Posts

Viewing 15 posts - 1 through 15 (of 16 total)

1 2 →

You must be logged in to reply to this topic.

[Resolved] Mega Menu Highlight

Popular Articles

Start building better websites today.