Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] Mega Menu Highlight

Home Forums Support Mega Menu Highlight

  • This topic has 15 replies, 3 voices, and was last updated 3 years ago by Tom.
Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #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

    GeneratePress 1.4
    GP Premium 1.4.3
    #417835
    Leo
    Staff
    Customer Support
    #418262
    scott doel

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

    #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!

    #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

    #418712
    Leo
    Staff
    Customer Support
    #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

    #419202
    Tom
    Lead Developer
    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%;
        }
    }
    #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%;
        }
    }
    
    
    #421292
    Tom
    Lead Developer
    Lead Developer

    Try adding this inside the media query:

    .main-navigation .menu .sub-menu .menu-item > a::after {
        bottom: 0;
        left: 25%;
    }
    #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%;
        }
    }
    
    #421790
    Tom
    Lead Developer
    Lead Developer

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

    #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?

    #423288
    Tom
    Lead Developer
    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.

    #423347
    scott doel

    OK thanks Tom

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.