Archived topic
Need help with mega menu on desktop
13 replies · Started by Matt on May 13, 2020
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.
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 :)
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?
You could try this:
.dropdown-hover .main-navigation:not(.toggled) ul li:hover>ul {
z-index: 1000000;
}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*
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.
Can I add a picture in like this? https://imgur.com/a/C6D39In
*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?
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?
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.
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.
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?
Alright i'll try to figure it out. Thanks anyways!
No problem!
