How do I move the mobile menu above the header?

  • I moved #mobile-dropdown to the top and made it push the content down when it opens, but I don’t know how to make it appear above #site-header-inner. Moving #mobile-dropdown above #site-header-inner in the DOM works great, but I don’t know how to do this with CSS.

    This website shows the mobile menu behaviour I’m trying to imitate:

    https://www.christianrexvanminnen.com/

    That is the “Wells” theme from Squarespace and I’ve managed to imitate it pixel-perfectly with OceanWP, with the exception of this one problem.

    Thank you, Nicolas, for this great theme.

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

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

  • Hello,

    I checked your site but didn’t see the oceanwp theme? Is it correct link?

    Thread Starter jimmyalfoa

    (@timmyalfoa)

    The “page I need help with” link is only a screenshot, the other link is a non-WP site with the mobile menu behaviour I’m trying to imitate. My site is still on localhost for development.

    I accidentally made the dropdown appear above the header by making #site-header display:table and #site-header-inner display:table-footer-group, now I’m working on making the dropdown slide in smoothly. I almost had it but #site-header-inner dropped down instantly while #mobile-dropdown slid in smoothly after.

    You can probably tell I’m a CSS novice. Know anything about making the dropdown, header, and content slide down smoothly when the menu opens?

    Thread Starter jimmyalfoa

    (@timmyalfoa)

    Here’s a gif showing my mobile menu dropping down on oceanwp, do you know how to make this slide down smoothly?

    Mobile menu opening

    Thread Starter jimmyalfoa

    (@timmyalfoa)

    Amit, can you please take at look at it live and tell me how to smooth out the menu animation:

    https://pigonahorse.xyz/

    I checked your site and it is working fine.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How do I move the mobile menu above the header?’ is closed to new replies.