- This topic has 17 replies, 3 voices, and was last updated 7 years, 3 months ago by
.
Can there be an option for stick header/nav on mobile viewport?
Hi @spfskyline,
I hope you are well today and thank you for your question.
It is disabled on mobile view because it makes the menu items in accessible when the menu contains too many menu items.
But if you want to enable it then you can try changing it 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
.sh-body-header-sticky .sh-header-mobile { position: fixed!important; top: 0; left: 0; right: 0; width: 100%; z-index: 5000; }Best regards,
Shufflehound teamThanks. Appears to work, but needs to shift from light version header to regular header as on scroll like desktop does. With sticky header logo and 100% opacity background.
We have to develop custom javascript code to make it happen on scroll which will take time but you can always display it light black by also using the below CSS code so that it will match with the mobile dropdown nav.
.sh-body-header-sticky #header-mobile { background-color: #232323 !important; }Thanks. That will work for now. If it can be coded and become an option, that would be preferred.
You are most welcome here 🙂
Sure we will add it in our to do list as a feature request to implement in the future version of theme.
Looking forward to it.
We created beta version, where you can enable sticky mobile header under Theme Settings > Header.
Let us know how it works.
Beta uploaded and found the toggle in Theme Settings > Header. Cleared browser cache and removed previous custom CSS, but does not appear to be working. You can view site if you need to debug.
Disregard. I had to clear all caches in W3 Total Cache plugin. Works, but is not flush to top of browser window. Appears to load slightly larger too.
Thank you for letting us know this.
Tomorrow we will create a new version, which should to fix this issue.
I was able to fix this by adding the following CSS
#page-container .sh-sticky-mobile-header { margin-top: 0px !important; }Awesome great to see you got that fixed.
Please advise if you have more questions.
Have a fantastic day!
Is it possible to have mobile nav collapse on click? It stays open after selection and has to be manually closed. Not the best user experience.
We will consider to add this feature in future versions.
In mean we updated Jevelin theme version in Themeforest, there we fixed top position issue and officially added sticky mobile header option.
Thanks! Assuming it requires custom JS to do.
Updated to 2.2.0 and noticed some odd page loader behavior. If I remove the custom CSS I had added for mobile sticky nav, page loader gets stuck on mobile (appears intermittent on desktop). Doesn’t happen if custom CSS is in place. Doesn’t make much sense. Could be a cache issue. I’ll try again after clearing browser cache or using a new device.
Please let us know if you managed to fix it by clearing cache.
It appears to be working fine.
Thanks!
