Removing sticky header on tablet and mobile
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
-
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:
Hope that can help, good luck!2 -
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: Any thoughts?
0 -
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.
0 -
Flex must be the issue then. Thank you for trying to help out though- much appreciated!
1 -
@ScottyStrehlow, can we get Duda support to take a peak at this? May be a flex issue.
0
