Breaking Primary Menu in two lines

  • Resolved Parwaiz Khan

    (@parwaiz-khan)


    5 years, 4 months ago

    Hello ASTRA Team,

    The Menu on my website is long. On smaller screens (laptops/tablets) it causes the entire header to fall down along with it, covering the content below.

    Is there a way to stack the menu in two lines (like insert <br /> in menu and adding some CSS )?

    Thank you.

    • This topic was modified 5 years, 4 months ago by Parwaiz Khan. Reason: typo correction

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi @parwaiz-khanm,

    Unfortunately, that is not possible. but Astra does have option to change the header breakpoint width to be used in such cases.

    basically with this option, turn the menu to a mobile menu at the width where the menu starts dropping to a new line.

    Best,

    Nikhil

    Thread Starter Parwaiz Khan

    (@parwaiz-khan)

    Hello Nikhil,

    Thank you for looking into it. I have achieved it via ‘menu line break’ and some CSS. But, There is another menu issue that I am trying to resolve:

    Upon menu break, when the menu icon is clicked, the main-navigation [.ast-header-break-point .main-navigation ul .button-custom-menu-item a, .ast-header-break-point .main-navigation ul li a] spreads down over the content section (hero image) instead of pushing it down.

    How can I make the menu to push down the content and not spread over it?
    I am converting this site from the ‘Neve/SiteOrigin pagebuilder’ to your ‘Astra and Elementor’ and I using one of the themes on ‘Astra Starter Sites’. That starter theme has this behavior (pushing down the content below).

    Somehow, that desired menu drop down behavior got lost. I will appreciate it if you can guide me how to fix it. (You can check this menu dropdown behavior on my site.)

    Thank you.

    Hi @parwaiz-khan,

    At the moment, When you have a sticky header selected for your site or have a transparent header enabled on the page the menu overlaps the page content. This is because how the CSS changed for these two header layouts.
    For the default header layout it displays the content as you are expecting.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Breaking Primary Menu in two lines’ is closed to new replies.