Tagged: mobile header, sticky
-
AuthorPosts
-
September 5, 2018 at 4:25 pm #1006197
Hi There,
I have to come back to a earlier request I was posting
https://kriesi.at/support/topic/sticky-mobile-menu-non-sticky/In this post I asked how I can have on mobile only a sticky menu but a non sticky top level menu (for desktop both – the menu and the toplvl menu should be sticky).
The solution for this problem was this:
@media only screen and (max-width: 767px) {
.header-scrolled {
position: fixed;
}.header-scrolled #header_meta {
display: none;
}
}Now I found out that this works fine on mobile preview tools like on firefox webdev. tool but on actual mobiles it does no work :-/
any thoughts?Best
September 5, 2018 at 6:50 pm #1006269Hey Raphael,
Which device are you using for test?
Best regards,
VictoriaSeptember 6, 2018 at 9:18 am #1006512Hi Victoria,
Yes, that is the problem, the whole menu is sticky on mobile.
But, I want to have the regular menu sticky while the toplevel menu (the blue one) is NOT Sticky.
(Only on mobile)I tested it on android and IOS (Samsung & Iphone)
Thanks for your help :)
Best regards
September 6, 2018 at 12:54 pm #1006567Hi eKMUch,
Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?
Best regards,
VictoriaSeptember 6, 2018 at 1:57 pm #1006597here you go
September 6, 2018 at 3:57 pm #1006673Hi eKMUch,
You need to remove the styles tags from your Quick css and the code will work. Please also validate all the css you have there.
Best regards,
VictoriaSeptember 10, 2018 at 12:01 pm #1007857Hi Victoria,
Deleted the styles tags (thanks) but still does not work.
I either got the solution that the whole menu is not sticky – or the whole menu is sticky.- This reply was modified 6 years, 1 month ago by eKMUch.
September 11, 2018 at 7:27 pm #1008539Hi eKMUch,
I put this code on top of your Quick css in the German version of the theme option and it works:
@media only screen and (max-width: 767px) { .html_header_top.html_header_sticky #top #wrap_all #header { position: fixed; } #header_meta { display: none; } }
Please check.
Best regards,
VictoriaSeptember 12, 2018 at 10:16 am #1008818Hi Victoria,
With this code the toplevel menu is not visible all the time, but I need it there on top before I start scrolling. Well I solved it now with that code@media only screen and (max-width: 767px) {
.responsive #top .av-main-nav .av-burger-menu-main {
position: fixed;
top: 50px;
right: 20%;
}}However I am only partly happy with that solution, since it just does not look that nice. But if the other thing does not work this might be it. Is it maybe possible to give the burger menu in this case somehting like a background color with opacity, idealy in a circle shape in the background?
September 12, 2018 at 2:05 pm #1008920Hi eKMUch,
Unfortunately, it would require quite some time and customization of the theme to achieve this, so I am sorry to tell you that this is not covered by our support. However, if it’s really important for you to get this done, you can always hire a freelancer to do the job for you :)
Best regards,
VictoriaMarch 1, 2020 at 6:51 pm #1189241Hi there,
I’d like to:
– that the header (logo and burger) is sticky on the desktop and pad version
– that the header (logo and burger) on mobile (smartphone) is non-sticky
Is that possible?
Looking forward for Feedback.
Thank you !
Best
March 2, 2020 at 6:01 am #1189339 -
AuthorPosts
- You must be logged in to reply to this topic.