Archived topic
Adjust position of the dropdown menu
5 replies · Started by crosby87 on April 25, 2021
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: 5pxBecause 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?
Hi 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. Try margin-top: 5px;
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.
Hi 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;
}
}Many thanks David! Works perfectly.
Glad to hear that
