Tagged: ,

Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • May 27, 2016 at 1:53 am #639035
    scotthco

    Hi Guys!

    I’m using a full width submenu as my primary menu, which is fine for the most part. However due to the number of items on the menu, I’d like to force it to go mobile at screen widths at or below 830px. I now this is before it normally would for smart phones, but I don’t want it to go mobile for anything under 990px. Is there a way to do this just with CSS, or would I need to adjust Enfold’s javascript as well?

    Scott

    • This topic was modified 8 years, 6 months ago by scotthco.
    May 27, 2016 at 8:29 am #639157
    Rikard

    Hi Scott,

    Could you provide us with a link to the site in question so that we can take a closer look please?

    Regards,
    Rikard

    June 20, 2016 at 12:01 am #650533
    scotthco

    Sorry it took so long for me to respond. Actually I need the full width submenu to go mobile at anything less than 980px screen width. Anything over that, and it should be the normal menu. Just so you know, in Theme Options, Header, Mobile Menu tab, I do have it set to go mobile for both tablets and smartphones, but that obviously applies only to the main header menu, not to full width submenus (but it probably should).

    The URL is on my development box, so I’ll post it in the private content area below.

    June 21, 2016 at 3:52 am #651203
    Ismael

    Hi,

    Thank you for the info. Please add this in the Quick CSS field:

    @media only screen and (max-width: 989px) {
.responsive #top .av-menu-mobile-active .mobile_menu_toggle {
    display: inline-block;
}

.responsive #top .av-menu-mobile-active .av-subnav-menu {
    display: none;
}

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

.responsive #top .av-menu-mobile-active .av-subnav-menu li {
    display: block;
    border-top-style: solid;
    border-top-width: 1px;
    padding: 0;
}

.responsive #top .av-subnav-menu > li:first-child {
    margin-top: -1px;
}
}

    Best regards,
    Ismael

    August 19, 2018 at 9:03 pm #999084
    Levante Golf
    This reply has been marked as private.
    August 20, 2018 at 9:12 am #999232
    Victoria

    Hi, ProTravelGolf

    Could you please attach a mockup of what you’re trying to achieve?

    The password to the area does not work, the page just reloads.

    Best regards,
    Victoria

    August 20, 2018 at 11:41 am #999308
    Levante Golf
    This reply has been marked as private.
    August 20, 2018 at 11:51 am #999314
    Levante Golf
    This reply has been marked as private.
    August 20, 2018 at 12:08 pm #999321
    Levante Golf
    This reply has been marked as private.
    August 21, 2018 at 10:13 am #999719
    Victoria

    Hi ProTravelGolf,

    I see that you’re hiding the submenu for the screen sizes below 767px and it is there for the screens above, it is not a burger and sticks to the top.

    Which part is not working for you?

    Best regards,
    Victoria

    August 21, 2018 at 11:03 am #999751
    Levante Golf
    This reply has been marked as private.
    August 22, 2018 at 12:46 pm #1000276
    Victoria

    Hi ProTravelGolf,

    Best regards,
    Victoria

    August 22, 2018 at 1:08 pm #1000289
    Levante Golf

    Victoria,

    Do you have the code for my question above re: the padding around the words on full width submenu?

    Many thanks

    August 23, 2018 at 12:23 pm #1000703
    Victoria

    Hi ProTravelGolf,

    I still do not understand the which space and how you need to adjust and so I cannot give you the code.

    Can you please make a mockup?

    Best regards,
    Victoria

    August 23, 2018 at 1:05 pm #1000714
    Levante Golf
    This reply has been marked as private.
    August 23, 2018 at 4:12 pm #1000807
    Victoria

    Hi ProTravelGolf,

    Ok, thank you.

    If just the horizontal

    
@media only screen and (max-width: 990px) 
   #top #av-custom-submenu-1 .av-menu-button > a .avia-menu-text {
    padding: 9px 4px;
  }
}

    if padding in general

    

@media only screen and (max-width: 990px) 
   #top #av-custom-submenu-1 .av-menu-button > a .avia-menu-text {
    padding: 4px;
  }
}

    If you need further assistance please let us know.
    Best regards,
    Victoria

    • This reply was modified 6 years, 3 months ago by Victoria.
    August 23, 2018 at 6:53 pm #1000881
    Levante Golf

    Victoria,

    Brilliant that has worked great. Thank you so much for your support and patience!!

    Best regards

    August 23, 2018 at 7:05 pm #1000893
    Jordan Shannon

    Hi,

    I’m glad you were able to get this resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 18 posts - 1 through 18 (of 18 total)
  • The topic ‘Full Width Submenu Force Mobile at Specific Width’ is closed to new replies.