- This topic has 13 replies, 2 voices, and was last updated 3 years, 11 months ago by Tom.
-
AuthorPosts
-
May 13, 2020 at 9:01 am #1282768Matt
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.
May 13, 2020 at 4:51 pm #1283373TomLead DeveloperLead DeveloperHi 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 🙂
May 13, 2020 at 8:10 pm #1283511MattThat 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?
May 14, 2020 at 9:22 am #1284473TomLead DeveloperLead DeveloperYou could try this:
.dropdown-hover .main-navigation:not(.toggled) ul li:hover>ul { z-index: 1000000; }
May 14, 2020 at 9:52 am #1284538MattHaha 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*May 14, 2020 at 8:13 pm #1285067TomLead DeveloperLead DeveloperI 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.
May 15, 2020 at 6:06 am #1285537MattCan I add a picture in like this? https://imgur.com/a/C6D39In
May 15, 2020 at 7:42 am #1285657Matt*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?
May 15, 2020 at 10:56 am #1286118MattThis 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?
May 15, 2020 at 4:36 pm #1286508TomLead DeveloperLead DeveloperI 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.
May 15, 2020 at 7:26 pm #1286640MattThat’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.
May 16, 2020 at 10:52 am #1287572TomLead DeveloperLead DeveloperI’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?
May 16, 2020 at 5:42 pm #1287922MattAlright i’ll try to figure it out. Thanks anyways!
May 17, 2020 at 9:42 am #1288859TomLead DeveloperLead DeveloperNo problem!
-
AuthorPosts
- You must be logged in to reply to this topic.