- This topic has 5 replies, 2 voices, and was last updated 6 years, 7 months ago by
.
I’ve been playing around with the sticky header – which I’m presuming creates a menu/logo area that stays at the top of the screen on mobile devices? Mine doesn’t seem to stick at all to the top of the screen when you scroll down the page. Any idea why?
Also is it possible to move the drop down mobile menu hamburger to the right side rather than left? And is it possible to add in a background image to the drop down mobile menu? Thanks!
Hi Sarah,
Thank you for your question.
I’ve been playing around with the sticky header – which I’m presuming creates a menu/logo area that stays at the top of the screen on mobile devices? Mine doesn’t seem to stick at all to the top of the screen when you scroll down the page. Any idea why?
The sticky header is not sticky on mobile devices because of small screen sizes.
You can see the same on our demo site here https://gillion.shufflehound.com/
Also is it possible to move the drop down mobile menu hamburger to the right side rather than left? And is it possible to add in a background image to the drop down mobile menu? Thanks!
You have to develop custom code to achieve this.
Developing custom code for custom functionality is beyond the scope of support that we provide here.
If you are not a developer then you can consider hiring a developer to develop it for you. You can hire a developer from any freelance site. Shufflehound recommends the developer https://www.upwork.com/freelancers/~011652ffec8865c6d5
Best regards,
Shufflehound teamIs it easy to make the menu sticky though? My client has requested it. I tried to do this using a plugin & it didn’t seem to want to work.
Solution for this topic
You can make it sticky on mobile by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
@media (max-width: 1025px){ header.primary-mobile { position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; } #wrapper { margin-top: 120px; } }That works perfectly! Thank you so much!
You are always welcome here 🙂
