Tagged: 

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • May 20, 2017 at 4:01 pm #797031
    SamEnzoo

    Hi,

    I’m using the Accordion slider as content navigation on the following pages (Gordijnen, Zonwering,Verf&Behang, Accessoires) , but that doesn’t work well on mobile. So i thought of using the Fullwidth Sub Menu on mobile.

    I am having trouble with:

    • Hiding the Accordion on a certain width and showing the Sub Menu instead
    • The ‘Zonwering’ page should have the Sub Menu at all times, since it will have too much content for the Accordion
    • I need the label of the mobile Sub Menu to be different on each page

    Kind regards,

    Sam

    URL: Website

    • This topic was modified 7 years, 7 months ago by SamEnzoo. Reason: Added URL
    May 20, 2017 at 5:24 pm #797057
    Mike

    Hey SamEnzoo,
    For hiding the menu on mobile for certain pages you could try a code like this one, which is aimed at phones:

    @media only screen and (max-width: 767px) { 
.page-id-9,.page-id-12,.page-id-14,.page-id-16 #advanced_menu_toggle {display:none !important; }
}

    The issue I see is your sub-menu has no links to other pages. I don’t have a solution for changing the label of the mobile Sub Menu to be different on each page.

    Best regards,
    Mike

    May 20, 2017 at 5:43 pm #797063
    SamEnzoo

    Hi Mike,

    For some reason that media query hides all the content on specified pages.

    May 20, 2017 at 9:46 pm #797109
    Mike

    Hi,
    Sorry, I must have made a mistake :) Go ahead and replace it with this:

    @media only screen and (max-width: 767px) { 
.page-id-9 #advanced_menu_toggle {display:none !important; }
.page-id-12 #advanced_menu_toggle {display:none !important; }
.page-id-14 #advanced_menu_toggle {display:none !important; }
.page-id-16 #advanced_menu_toggle {display:none !important; }
}

    Best regards,
    Mike

    May 22, 2017 at 1:22 pm #797624
    SamEnzoo

    Hi,

    It seems that you misunderstood.

    I want to use the sub menu to navigate through sections on the page, so the Mobile menu button can stay.
    On desktop sizes i use the Accordion for that navigation.
    On mobile sizes i need the Accordion to be hidden when the Mobile Sub menu button appears, and the Sub menu should be hidden when the Accordion is visible on desktop sizes.

    I hope i explained it a bit better this time?

    Kind regards,

    Sam

    May 25, 2017 at 1:15 am #799288
    Ismael

    Hi,

    Thank you for the info.

    The following short documentation should help you with that.

    // http://kriesi.at/documentation/enfold/hide-menu-itemselements-on-mobile/

    Best regards,
    Ismael

    May 25, 2017 at 1:56 pm #799555
    SamEnzoo

    Hi,

    That worked great!
    One last thing, what media query controls when the fullwidth sub menu Toggle button appears.
    I need it to appear earlier on a certain page.

    Thanks,

    Sam

    May 25, 2017 at 1:59 pm #799559
    Yigit

    Hi,
    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

    @media only screen and (max-width: 1024px) {
#top .av-subnav-menu {
    display: none;
}

#top .mobile_menu_toggle {
    display: block;
    text-align: center;
}

#top .av-menu-mobile-active .av-open-submenu.av-subnav-menu {
    display: block;
}
}

    Best regards,
    Yigit

    May 25, 2017 at 2:04 pm #799562
    SamEnzoo

    Hi,
    The query works great, but the button isn’t clickable anymore and also not centered.

    Link to page

    Thanks,
    Sam

    • This reply was modified 7 years, 6 months ago by SamEnzoo. Reason: added link
    May 28, 2017 at 5:25 am #800704
    Ismael

    Hi,

    We modified the code a bit. Please try it again.

    Best regards,
    Ismael

    May 28, 2017 at 1:30 pm #800800
    SamEnzoo

    765 990
    Hi,

    What code has been changed exactly? Because the same issue still occurs.
    From 990px and 765px width the sub menu button is aligned to the left side of the window, smaller than 765 it jumps to the center. It should always be centered.

    Page

    May 30, 2017 at 4:39 am #801336
    Ismael

    Hi,

    Did you remove the browser cache after adding the code? We changed the viewport from 768px to 1024px and added another css declaration. Please check it carefully.

    Best regards,
    Ismael

    May 30, 2017 at 11:52 am #801453
    SamEnzoo

    Hi Ismael,

    I did remove browser cache, and also tried on 2 different computers.
    At 990px the mobile version appears aligned left, it doesn’t align center until 767px.
    This isn’t a huge problem, but it doesn’t look consistent.

    May 31, 2017 at 6:27 am #801821
    Ismael

    Hi,

    We modified the code in the Quick CSS field. Please follow our suggestions carefully.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.