Shop Categories

X

sticky menu on mobile

Home Forums Agama Pro(email:support@theme-vision.com) sticky menu on mobile

Topic Resolution: Resolved
Viewing 15 posts - 1 through 15 (of 22 total)
  • Author
    Posts
  • #12363
    Mark Roberts
    Participant

    Hi there,

    Is it possible to have the sticky menu for mobile devises.
    At the moment this is not the case.

    Thanks and kind regards,
    Mark

    #12364
    Zex
    Moderator

    Hello, Mark!

    Try to insert the next codes into Customizing->General->Additional CSS:

    
    @media screen and (max-width: 994px) {
    div.sticky-header.sticky-header-shrink {
     position: fixed !important;
    }
    nav.mobile-menu {
    position: fixed!important;
    width: 100%;
    z-index: 4;
    }
    }

    Best Regards

    • This reply was modified 2 years, 9 months ago by Zex.
    #12367
    Mark Roberts
    Participant

    Hi Zex,

    thanks for the code, but doesn’t work as it should do. The menu folds out under the layer slider header image.
    Tried changing the z-index layer order, but then the layer slider header image isn’t visible at all, with a white background where the menu will fold out as result.

    Regards,
    Mark

    #12368
    Zex
    Moderator

    Hi, Mark!

    Can you give me an address to your website?

    Thanks.

    #12369
    Mark Roberts
    Participant

    Hi Zex,

    Here is the website address: https://www.equisource.eu.
    Your code is not active at the moment as the website is live and code was making the site un-navigable.
    I cad add the code again for a short period for you to check, if you would like.

    Regards,
    Mark

    #12370
    Zex
    Moderator

    Hello Mark!

    Please, insert the next code instead the one I gave you in the previous post:

    @media screen and (max-width: 994px) {
    div.sticky-header.sticky-header-shrink {
     position: fixed !important;
    }
    nav.mobile-menu {
    position: fixed!important;
    top:86px;
    width: 100%;
    z-index:99;
    }
    }

    Regards

    #12371
    Mark Roberts
    Participant

    Hi Zex, this already works better, but the dropdown symbol (4 horizontal bars) is not visible after the menu opens, so no way to close menu after its open.

    Regards,
    Mark

    #12372
    Zex
    Moderator

    Please substitute the code with the next one:

    @media screen and (max-width: 994px) {
    div.sticky-header.sticky-header-shrink {
     position: fixed !important;
    }
    nav.mobile-menu {
    position: fixed!important;
    top:86px!important;
    width: 100%;
    z-index:99;
    height: 300px;
    overflow: auto;
    }
    }
    @media screen and (max-width: 480px) {
    nav.mobile-menu {
    top:150px!important;
    }
    }
    • This reply was modified 2 years, 9 months ago by Zex.
    • This reply was modified 2 years, 9 months ago by Zex.
    #12374
    Mark Roberts
    Participant

    Hi again Zex,

    Tried the new code with !important, but at 155px instead of 86px, otherwise menu was still over the menu bars.
    Only problem now, is that you can’t scroll the menu dropdown list, because it won’t move over the logo or menu bars and you can’t scroll down beyond the screen size. i don’t know if what I’m saying makes any sense, but you can try the menu dropdown list and try and select the bottom item in the list.

    Regards,
    Mark

    #12375
    Zex
    Moderator

    Please Check the code again… I edited the post in the meantime.

    Change the “height” value per your needs.

    • This reply was modified 2 years, 9 months ago by Zex.
    #12378
    Mark Roberts
    Participant

    Hi Zex,

    Still doesn’t work. i can’t scroll through menu list, but can see the background (page content) scrolling.

    regards,
    mark

    #12379
    Zex
    Moderator

    Use the next one:

    @media screen and (max-width: 994px) {
    div.sticky-header.sticky-header-shrink {
     position: fixed !important;
    }
    nav.mobile-menu {
    position: fixed!important;
    top:86px!important;
    width: 100%;
    z-index:99;
    height: 300px;
    overflow: auto;
    }
    }
    @media screen and (max-width: 480px) {
    nav.mobile-menu {
    top:150px!important;
    }
    }

    Change the “height” value per your needs.

    #12380
    Mark Roberts
    Participant

    Hi Zex,

    Doesn’t solve the problem as the open menu doesn’t scroll.
    Maybe has to do with the fact that the menu is sticky (fixed), so when the dropdown opens (especially last menu item “meer info”) it can’t be scrolled to bottom as it is fixed at the top.
    I either have to have smaller text, less menu items in the menu drop down list or remove the sticky menu.

    Is it not possible to have the logo and menu bars fixed and the menu dropdown scroll together with the rest of the page under the logo and menu bars.
    Here is an example website page that has this kind of menu on mobile: http://www.sallyscottages.co.uk

    Sorry for all the trouble, but I have removed the code for the moment as it is not what I need.

    Kind regards,
    Mark

    #12381
    Zex
    Moderator

    Hi Mark!

    I apologize to you, obviously, I didn’t understand the problem well. I think now I understand what you wanted. Try the following code instead of the codes I gave you earlier:

    @media screen and (max-width: 994px) {
    div.sticky-header.sticky-header-shrink {
     position: fixed !important;
    }
    nav.mobile-menu {
    top:86px!important;
    }
    }
    @media screen and (max-width: 480px) {
    nav.mobile-menu {
    top:150px!important;
    }
    }

    Best Regards

    • This reply was modified 2 years, 9 months ago by Zex.
    #12383
    Mark Roberts
    Participant

    Hi Zex,

    Nearly does it. But still have a problem when you open the nav menu hen you are half way down the page.
    When you open menu half way down a page, it doesn’t jump to the top where the menu is, so you can’t see the dropdown.

    regards,
    Mark

Viewing 15 posts - 1 through 15 (of 22 total)
  • You must be logged in to reply to this topic.
50% OFF, Black friday & cyber monday offer. Use coupon code at checkoutthemevision50