Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #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

    #1006269

    Hey Raphael,

    Which device are you using for test?

    Best regards,
    Victoria

    #1006512

    Hi 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

    #1006567

    Hi 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,
    Victoria

    #1006597

    here you go

    #1006673

    Hi 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,
    Victoria

    #1007857

    Hi 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 1 year, 8 months ago by  eKMUch.
    #1008539

    Hi 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,
    Victoria

    #1008818

    Hi 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?

    #1008920

    Hi 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,
    Victoria

    #1189241

    Hi 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

    #1189339

    Hi IMaral,

    Could you post a link to your site so that we can have a closer look please?

    Best regards,
    Rikard

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.