Site logo

[Resolved] Adjust position of the dropdown menu

Home Forums Support [Resolved] Adjust position of the dropdown menu

Home Forums Support Adjust position of the dropdown menu

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #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?

    #1748932
    Elvin
    Staff
    Customer Support

    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;

    #1749173
    crosby87

    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.

    #1749334
    David
    Staff
    Customer Support

    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;
        }
    }
    #1750284
    crosby87

    Many thanks David! Works perfectly.

    #1750434
    David
    Staff
    Customer Support

    Glad to hear that

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.