- This topic has 5 replies, 3 voices, and was last updated 4 years, 5 months ago by
David.
-
AuthorPosts
-
April 25, 2021 at 11:00 pm #1748867
crosby87
Hi there,
I installed the MegaMenu using the code that you provided here: https://docs.generatepress.com/article/building-simple-mega-menu/
I also added the following code into Additional CSS to create a button in the menu:
.main-navigation .main-nav li.highlight a { background-color: #012269; color: #ffffff; border-radius: 40px; padding-left: 20px; padding-right: 20px; padding-top: 0px; padding-bottom: 0px; margin-top: 5px; margin-bottom: 5px; line-height: 35px; } .main-navigation .main-nav li.highlight:hover a { background-color: #d6a21b; color: #ffffff }
You can see the blue button in the menu: https://imgur.com/c2pkhzx
I also gave some padding to the menu so that the button fits nicely, using the following code:
nav .main-nav { padding-top: 5px; padding-bottom: 5px
Because of this, however, the dropdown menu does not align anymore with the bottom of the menu (see in the previous screenshot). It even covers the button a bit.
Could you please help to move the dropdown menu a bit down so it aligns with the bottom of the menu again?
April 25, 2021 at 11:58 pm #1748932Elvin
StaffCustomer SupportHi there,
You have this CSS within your simple CSS plugin where you can control the distance of the dropdown menu.
@media (min-width: 769px) {
nav .main-nav .mega-menu > ul {
position: absolute;
width: 100%;
left: 0 !important;
display: flex;
flex-wrap: wrap;
margin-top: 0px;
}
}You can play around with
margin-top
value. Trymargin-top: 5px;
April 26, 2021 at 3:08 am #1749173crosby87
Hi Elvin,
Thanks for the above, works perfectly. Because of that change, however, there is another problem.
When the I try to move my mouse from the main menu to an item in the dropdown menu, by the time I move it there the dropdown menu disappears. Sometimes if I am very quick, the dropdown menu stays, but obviously this is not convenient.
I think it’s because I increased the margin, so when I move my mouse down to the dropdown it detects as I clicked away.
Could you please help with this? You can also see it yourself if your click put your mouse on KERESS TOBBET on my website.
April 26, 2021 at 5:56 am #1749334David
StaffCustomer SupportHi there,
try:
1. remove the change that Elvin provided.
2. remove this CSS:nav .main-nav { padding-top: 5px; padding-bottom: 5px }
3. Now add some padding to the top and bottom of the menu items to increase the height of the nav:
@media(min-width: 768px) { .main-navigation .main-nav ul li a { padding-top: 10px; padding-bottom: 10px; } }
April 26, 2021 at 10:03 pm #1750284crosby87
Many thanks David! Works perfectly.
April 27, 2021 at 1:46 am #1750434David
StaffCustomer SupportGlad to hear that
-
AuthorPosts
- You must be logged in to reply to this topic.