Tagged: ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • December 6, 2021 at 10:02 pm #1331761
    EL

    I had centered my logo in the menu, 3 menu items on the right of the logo, and 3 on the left.

    Once I did this, it seems the menu items are now further apart including the mega menu items . Also, I would like the menu items closer together in general. When I try this own my own, it ends up overlapping the logo. Please help.

    • This topic was modified 3 years ago by EL. Reason: updates
    December 7, 2021 at 5:55 am #1331796
    Ismael

    Hey EL,

    Thank you for the inquiry.

    You have to adjust this css code before decreasing the space between the third and fourth menu items. This will also center align the main menu container.

    #header .main_menu {
    width: 100%;
    left: 53%;
    transform: translateX(-50%);
}

    The left position or property should be set from 53% to 50%.

    Best regards,
    Ismael

    March 29, 2022 at 6:20 pm #1346461
    EL

    Thank you for the response! I’m still having issues with the right half of the menu jumping below the top portion of the menu when the screen is smaller.

    March 29, 2022 at 6:27 pm #1346462
    EL
    This reply has been marked as private.
    March 30, 2022 at 9:22 am #1346524
    Ismael

    Hi,

    We could hide the default menu and set the mobile menu to display when the screen width is less than 1024px. 

    
@media only screen and (max-width: 1024px) {
    .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item-avia-special {
        display: block;
    }

    .responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item {
        display: none;
    }
}

    You can adjust the max-width value in the css media query above if you want the mobile menu to switch earlier.

    Best regards,
    Ismael

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