Avada Forums Community Forum Position of drop down menu – header 2 & 3

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • KimG
    Participant
    Post count: 7

    Does anyone know how to decrease the space between the menu and drop down menu? I want to keep the menu centered but want the drop-down menu to display directly under it rather than down at the page title bar as it does currently:

    https://www.griffinot.com/sensory-processing-disorder-training/

    I can get it to move up if I move the entire menu up in menu height but I want the menu to be where it currently is and the drop-down menus to move up. Just can’t seem to solve it. Any help appreciated!

    Thanks Kim

    Michael
    Keymaster
    Post count: 715

    Hi KimG

    The position of the main menu drop down will always start/match the height of the main menu items set in -> Avada >> Menu >> Main Menu >> Main Menu Height, there is no negative margin setting for the drop position (this is intentional).

    You can change this though with a snippet of CSS, add the following to the Avada >> Custom CSS section:

    .fusion-main-menu .sub-menu {
    margin-top: -70px !important;
    }

    The -70px is for your site, the amount of negative top margin will depend on a sites main menu height value (in px)

    Thank you kindly

    KimG
    Participant
    Post count: 7

    Thank you 🙂 That has worked perfectly. Is there also a piece of css that will then stop that reposition when the sticky header resizes to smaller? Thank you in advance.

    MarcoWirtl
    Participant
    Post count: 2

    @KimG found a solution for the sticky header? Facing the same issue.

    eCronik
    Participant
    Post count: 2

    Same – how to tweak the dropdown-position for the resized sticky header/menu separately?

    thomsenogco
    Participant
    Post count: 2

    When the header is sticky, it gets a new class .fusion-is-sticky

    So you should have both of these in your css.

    .fusion-main-menu .sub-menu {
    margin-top: -70px !important;
    }

    .fusion-is-sticky .fusion-main-menu .sub-menu {
    margin-top: 0px !important;
    }

    fizzgig314
    Participant
    Post count: 1

    This was really helpful. Wondering how this can be applied to the left/right dropdown positions. Since some are left justified and some are right justified, is there a way to do this?

    https://amguarddev.wpengine.com/

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