Shop Categories

X

Sticky mobile menu

Home Forums Agama Pro Sticky mobile menu

Topic Resolution: Resolved

Tagged: , , ,

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #9237
    clara.bergenfelz
    Participant

    Hi!

    Do you know if or how I can change the mobile menu to be sticky? (Stay on the top) 🙂

    Kind regards,
    Clara

    #9242
    Zex
    Moderator

    Hello, Klara!

    Next code should work for you:(insert it in Customising->General->Additional CSS)

    @media screen and (max-width: 992px){
    .sticky-header.sticky-header-shrink {
        position: fixed!important;
    	
    }
    }
    nav.mobile-menu >ul{
    	width: 100%;
    	margin-top: 200px;
    	height: 200px;
    	overflow: auto;
    }

    https://prnt.sc/jjxd7o

    Maybe you will need to correct a margin-top and height values, to suit your needs.

    If you give me your Website address I will give you the correct code.

    Regards

    • This reply was modified 5 years, 1 month ago by Zex.
    • This reply was modified 5 years, 1 month ago by Zex.
    #9251
    clara.bergenfelz
    Participant

    Hi!

    Thanks! With this code the menu gets sticky 🙂 But, I still need to scroll to the top to see the menu, do you have a fix about that? 🙂 The site lies on this address atm: http://webbred2.utb.hb.se/~s162584/wp/

    Thanks in advance!
    Regards, Clara

    #9256
    Zex
    Moderator

    Hello, Clara!

    Unfortunately, I can’t reach your site…The server at webbred2.utb.hb.se is taking too long to respond.
    I’ll try later, in case the site is temporarily unavailable or too busy.

    To solve your problem, try to increase a margin-top value from the above code.

    https://prnt.sc/jkieox

    Regards

    #9287
    clara.bergenfelz
    Participant
    This reply has been marked as private.
    #9293
    Zex
    Moderator

    Hello, Clara!

    I have slightly modified the code that I gave you earlier to fit your preferences on the theme.

    In case someone else it needs too, I’ll write him here.

    The code that I added in Customize -> General-> Additional CSS is:

    @media (max-width:900px) and (min-width:480px) {
    .sticky-header.sticky-header-shrink {
        position: fixed!important;
    	
    }
    	nav.mobile-menu {
    	position: fixed!important;
    	width: 100%;
    	top: 90px;
    	height: 250px;
    	overflow: auto;
    	z-index:9999;
    }
    }
    
    @media screen and (max-width: 479px){
    nav.mobile-menu {
    	position: fixed!important;
    	width: 100%;
    	top: 160px;
    	height: 250px;
    	overflow: auto;
    	z-index:9999;
    }
    }

    I hope it will satisfy your expectations.

    Regards

    • This reply was modified 5 years, 1 month ago by Zex.
    #9296
    clara.bergenfelz
    Participant

    Thank you so much Zex! Looks amazing! 😀

    #9297
    Zex
    Moderator
    This reply has been marked as private.
    #9407
    clara.bergenfelz
    Participant

    Hi Zex, Im sorry can you pls help me. I was going to change some px in this code when everything got deleted and now I can’t get in back as it was from the begining when you helped me… 🙁 The site is due today for a school project so I would be so freakingly happy if you could fix it one more time. Im so sorry for wasting your time to do things twice 🙁

    /Clara

    #9408
    clara.bergenfelz
    Participant

    Hi, sorry again, Ignore the above. My computer rebooted and kicked the old code back?! But anyhow, does it exist versions of this code somewhere? Seems to be a good thing to know for me…

    #9409
    Zex
    Moderator
    This reply has been marked as private.
    #9421
    clara.bergenfelz
    Participant
    This reply has been marked as private.
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.