Removing sticky header on tablet and mobile

Options
Brooke
Brooke Member Posts: 3

I have a site with a fixed, non-shrinking header on desktop. On tablet and mobile it is functioning as sticky (not shrinking). I want to make the header on tablet and mobile also fixed, as on the desktop, but am unable to find a way to do that. I am going to header > edit design on tablet and mobile and there is no option to either select fixed or to deselect sticky. I have it all set up correctly on desktop but do not get the same header editing options on the tablet and mobile editing pages.

Answers

  • Thomas_Connery
    Thomas_Connery Member Posts: 248 MVP
    Options

    Hi Brooke, I might know one way to do this for you. You'll need to make sure your tablet and mobile header "Overlap first row on this page". Then, apply the below CSS to your Site Head. (SEO & Settings, HEAD HTML - Head HTML)

    <style>

    .hamburger-header-container { position: static !important; }

    .layout-drawer-hamburger { position: absolute; margin-top: 0px !important;}

    </style>

    Here's a quick demo: https://www.loom.com/share/a0c08b835983466fa8b74ed2e65a35c0?sid=8ab21a07-9a54-4c4b-9998-01a6dd577438

    Hope that can help, good luck!

  • Brooke
    Brooke Member Posts: 3
    Options

    Thank you Thomas for taking the time to send me the code and to make a video. Unfortunately, when I follow the instructions in the video it removes the "overlap first row", but does make the header sticky. See video here: https://www.loom.com/share/7e66c4f9be654f3b9bbca0fb9cd10b73?sid=0eb40119-d520-40a0-9650-eed53e089ee7 Any thoughts?

  • Thomas_Connery
    Thomas_Connery Member Posts: 248 MVP
    Options

    That's too bad. I noticed you are using flex and I was not in my header example. This may be why my solution isn't working. You can try to recreate that section and header not using flex but I'm assuming you wanted to use flex for a specific reason. At this point, I'd open a support case and share this community thread with support as well. It's possible that there may be an issue with flex and allowing this specific customization.

  • Brooke
    Brooke Member Posts: 3
    Options

    Flex must be the issue then. Thank you for trying to help out though- much appreciated!

  • Thomas_Connery
    Thomas_Connery Member Posts: 248 MVP
    Options

    @ScottyStrehlow, can we get Duda support to take a peak at this? May be a flex issue.