[Resolved] Need help with mega menu on desktop

Home Forums Support Need help with mega menu on desktop

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1282768
    Matt

    Right now i’m working on a desktop version of the simple mega menu. I’ve done some editing and additions but I am no expert by any means. I copied the simple mega menu code from your website and pasted it into my additional CSS for live editing. I’m trying to do a gradient effect across the whole menu however I have 2 parent classes in one on my main Duck/Goose Calls drop down menu. The rest look ok except they need to be spaced out from underneath the site logo image. https://imgur.com/a/Vzsrvo5
    I got it to work somewhat but saw it was editing my main menu bar also. I love the overall look. The rounded highlighted buttons… the rounded current… the gradient menu and dropdown background. How can I get my gradient effect to flow smoothly across all menu drop down options. *edit* I also just noticed in desktop mode, tablet mode, and mobile that my page isn’t actually 100% wide i can scroll right. Errr I think I fix one thing and break another.

    
    /*simple mega menu*/
    /*desktop mega menu */
    @media (min-width: 769px) {
    nav .main-nav .mega-menu {
    position: static;
        }
    
    .cart-contents>span.number-of-items {
        display: inline-block;
        top: -20px;
    }
    
    .cart-contents>span:not(:empty) {
        margin-left: -5px;
    }	
    nav {
    box-shadow: 1px 1px 1px 1px #ffff00 !important;
    	}
    nav .main-nav .mega-menu > ul {
    position: absolute;
    width: 100%;
    left: 0 !important;
    box-shadow: 1px 0px 4px 1px #ffff00 !important;
        }
    
    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:hover > a,
        nav .main-nav .mega-menu > ul > li:focus > a,
        nav .main-nav .mega-menu > ul > li[class*="current-"] > a,
        nav .main-nav .mega-menu ul ul {
    background-color: transparent !important;
    color: inherit;
    }
    nav .main-nav .mega-menu ul .sub-menu {
    position: static;
    display: block;
    opacity: 1;
    visibility: visible;
    width: 100%;
    box-shadow: 0 0 0;
    left: 0;
    height: auto;
        }
    
    nav .main-nav .mega-menu ul.toggled-on .sub-menu {
    	pointer-events: auto;
        }
    
    nav .main-nav .mega-menu .sub-menu .menu-item-has-children .dropdown-menu-toggle {
    	        display: none;
        }
    	
    .main-navigation ul li:hover > a {
      background-image: linear-gradient(#00540f, black) !important;  
    	color: #ffff00 !important;
    }
    div.inside-navigation, ul.sub-menu {
    background-image: linear-gradient(#00540f, black) !important;
    }
    .main-navigation .site-logo {
    position: absolute !important;
    margin-left: 10px !important;  left: 0;
    top: 0;
    }
    .main-navigation .site-logo img {
        height: 175px !important;
    	margin-top: -15px !important;
    }
    
    /*adds spacing inside the menu drop down*/
    ul.sub-menu {
        padding-top: 15px !important;
    	padding-left: 70px !important;
        padding-bottom: 30px !important;
    }
    
    #menu-echo-1 > li:nth-child(1) {
        padding-left: 60px !important;
    }
    }
    /* end of desktop mega menu */

    Even though I’m not really a coder I feel embarrassed posting code i’ve edited cause I don’t know exactly what i’m doing and i’m sure you experts look at it like “Awww isn’t he cute trying like that!?” lol.

    #1283373
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Right now you have this:

    div.inside-navigation, ul.sub-menu {
        background-image: linear-gradient(#00540f, black) !important;
    }

    Try this:

    div.inside-navigation,
    .main-nav > ul > li > ul.sub-menu {
        background-image: linear-gradient(#00540f, black) !important;
    }

    It won’t be possible to move it down from your logo, or it won’t stay open when you move your mouse down to select a sub-menu item.

    Let me know 🙂

    #1283511
    Matt

    That change worked perfectly thank you. So you’re saying all those menu items laying under my logo can’t be moved out from underneath the logo so they can be clicked?

    #1284473
    Tom
    Lead Developer
    Lead Developer

    You could try this:

    .dropdown-hover .main-navigation:not(.toggled) ul li:hover>ul {
        z-index: 1000000;
    }
    #1284538
    Matt

    Haha I knew you were gonna suggest that. That’s not really what I wanted to do cause it looks much cooler when the logo lays on top of the menu. So there’s no other way to move the items over out from underneath the logo? Even if it’s a little tough?
    Just to be clear I edited a picture to show you what i’m talking about. https://imgur.com/a/OU46BAk
    I only do a picture of it because I feel you don’t understand what I was looking for. Maybe i’m wrong and you understand me completely and it just can’t be done. I was just thinking it could be done and it’s something that’s simple but our communication is bad maybe? *hopeful thinking*

    #1285067
    Tom
    Lead Developer
    Lead Developer

    I don’t think it’s possible, unfortunately. The logo element isn’t aware that the sub-menu is open, so we can tweak it under that condition.

    #1285537
    Matt

    Can I add a picture in like this? https://imgur.com/a/C6D39In

    #1285657
    Matt

    *Update: I think I can get it to work but it’s not a pretty way to do it. Which is using a negative margin on every corresponding item directly across from whatever item I have a positive margin on. I.E.

     li.menu-item.menu-item-type-taxonomy.menu-item-object-product_cat.menu-item-has-children.menu-item-1693 {
        margin-left: 160px !important;
    }
    li.menu-item.menu-item-type-taxonomy.menu-item-object-product_cat.menu-item-has-children.menu-item-1695 {
        margin-left: -190px !important;
    }	

    That would work wouldn’t it? Also still wondering about an image. I’m sure if I can get an image to appear some how in there (not even sure where to start) I could get it to align doing the same thing. *fingers crossed*

    Is there any drawbacks to spacing these items out from under the image the way i’m doing it?

    #1286118
    Matt

    This is my fix but it’s only for desktop atm. I think width can be adjusted for mobile and tablet if needed.

    li.menu-item.menu-item-type-taxonomy.menu-item-object-product_cat.menu-item-has-children.menu-item-1693,
    li.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-1756, li.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-1755, li.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-1758, li.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-1760, li.menu-item.menu-item-type-taxonomy.menu-item-object-product_cat.menu-item-1742, li.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-1765, li.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-1766, li.menu-item.menu-item-type-taxonomy.menu-item-object-product_cat.menu-item-1717, li.menu-item.menu-item-type-taxonomy.menu-item-object-product_cat.menu-item-1719, li.menu-item.menu-item-type-taxonomy.menu-item-object-product_cat.menu-item-1721, li.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-1705, li.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-1708, li.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-1697, li.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-1709, li.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-1700, li.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-privacy-policy.menu-item-1696,
    li.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-1698,
    li.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-1713,
    li.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-1716
    {
    padding-left: 160px !important;
    width: 450px !important;
    }
    li.menu-item.menu-item-type-taxonomy.menu-item-object-product_cat.menu-item-has-children.menu-item-1695,
    li.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-1759, li.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-1757, li.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-1761, li.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-1883, li.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-1764, li.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-1767, li.menu-item.menu-item-type-taxonomy.menu-item-object-product_cat.menu-item-1718, li.menu-item.menu-item-type-taxonomy.menu-item-object-product_cat.menu-item-1720, li.menu-item.menu-item-type-taxonomy.menu-item-object-product_cat.menu-item-1722, li.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-1707, li.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-2419, li.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-1772, li.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-1704, li.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-1701, li.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-1710, li.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-1712, li.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-1714, li.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-1715 {
    width: 450px !important;
    }
    

    Think it’ll work? Looks good right now which is why I ask. Maybe there will be an issue with something I am not thinking about?

    #1286508
    Tom
    Lead Developer
    Lead Developer

    I think you may benefit from looking into an actual mega menu plugin. The CSS method is meant for very simple mega menus. As soon as you start adding images etc.. it’s better to go with a plugin that is built specifically for that kind of thing.

    There are tons of mega menu plugins out there that should make it super simple to achieve that in a user-friendly/responsive way.

    #1286640
    Matt

    That’s the problem. I had Max Mega Menu but it didn’t allow for the miniature cart and drop down when you hover over the cart. I’m not falling for that again. I spent way too much time on max mega menu only for it to let me down on certain instances. I figured going straight code would be lighter weight on the website loading and more versatile being that your not stuck using a plugin that won’t do what you want. With a plugin i’m stuck doing what it offers not what I want. So I’ve learned a bunch of CSS to minipulate the website and menu to do what I want. It’s almost there so there’s no way i’m going back to Max Mega Menu. I’ve literally got almost the exact same menu going. The only thing i’m missing is the image in the drop down.

    #1287572
    Tom
    Lead Developer
    Lead Developer

    I’m not entirely sure what the best way to add an image to the menu would be. You could Google “wordpress image menu items”.

    Maybe a shortcode menu item plugin with the image being output by the shortcode?

    #1287922
    Matt

    Alright i’ll try to figure it out. Thanks anyways!

    #1288859
    Tom
    Lead Developer
    Lead Developer
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.