Tagged: 

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • April 5, 2019 at 10:30 pm #1087594
    goldengate415

    My menu bar wraps on narrower versions of desktop, like some laptops for example.
    Would it be possible to put an if-then statement somewhere in css or functions.php or ?? that would tell the theme to switch to the mobile menu if the menu bar is wrapping?

    Thanks,
    Rob

    April 6, 2019 at 3:56 am #1087666
    Jordan Shannon

    Hey goldengate415,

    Can you provide a link to the site so we can look into further, or provide an estimate of around what size the wrap begins to occur?

    Best regards,
    Jordan Shannon

    April 12, 2019 at 7:10 am #1089903
    goldengate415

    Hi there,

    Sorry for delay in responding – we had a death in the family.

    You can check it out here:

    Marin County Open Houses

    and it looks like it starts wrapping under 1350 pixels when I look at it on developer tools on Chrome.

    Thanks!
    Rob

    April 15, 2019 at 7:06 pm #1091046
    Victoria

    Hi Rob,

    Sorry to hear that.

    Image 2019-04-15 at 20.04.49.png

    I could not check the website, but you can try the code like this:

    
@media only screen and (max-width: 1024px) {
  nav.main_menu, #menu-item-search {
    display: block !important;
  }
  .menu-item {
    display: none;
  }
  .av-burger-menu-main.menu-item-avia-special {
    display: block;
  }
}

    Best regards,
    Victoria

    April 16, 2019 at 12:51 am #1091164
    goldengate415

    Thanks for the response! Geoblocking is turned off. I input the code on staging site and it looks like there are two burger menus? See link in private content.

    April 16, 2019 at 5:21 pm #1091601
    Günter

    Hi,

    You can try to replace in enfold\css\layout.css:

    line 2198:

    
	@media only screen and (max-width: 989px) {

    with

    
	@media only screen and (max-width: 1400px) {

    line 2240:

    
	@media only screen and (min-width: 768px) and (max-width: 989px) {

    with

    
	@media only screen and (min-width: 768px) and (max-width: 1400px) {

    Replace 1400px with your size and select Menu Items for mobile: Activate for Smartphones and Tablets (browser width below 990px).

    You might also need to change the values in enfold\css\dynamic-css.php:

    line 278:

    
@media only screen and (max-width: 989px) {

    and line 818:

    
			$output .= " @media only screen and (max-width: 989px) {

    But you will need to test if this does not break any other stylings.

    Best regards,
    Günter

    April 16, 2019 at 5:23 pm #1091602
    goldengate415

    Thanks, Günter!

    April 17, 2019 at 6:30 am #1091804
    Rikard

    Hi Rob,

    Thanks for the update, please let us know if you should need any further help on the topic.

    Best regards,
    Rikard

    May 14, 2019 at 5:27 pm #1100697
    goldengate415

    Now that this function has been added to the latest Enfold 4.5.7, is it possible to set a custom screen size to break? I would like to switch to Burger at 1300 px, not at 990 px, which is the option in the new dropdown menu.

    Thanks,
    Rob

    2019 May 10th – Version 4.5.7
    – added: option to switch to burger menu on different screen sizes in Fullwidth Submenu element

    May 17, 2019 at 4:28 am #1101628
    Ismael

    Hi,

    Thank you for using Enfold.

    That is for the “Fullwidth Submenu” element and it works the same as the “Menu Items for mobile” settings. You can use this css modification to adjust the breakpoint.

    @media only screen and (max-width: 1400px) and (min-width: 768px) {
.responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item-avia-special {
    display: block;
}

.responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item {
    display: none;
}
}

    Best regards,
    Ismael

    May 18, 2019 at 9:38 pm #1102102
    goldengate415

    Thanks, that works perfectly!

    May 18, 2019 at 10:12 pm #1102114
    Jordan Shannon

    Hi,

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

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Move to mobile menu if the menu bar begins to wrap on desktop?’ is closed to new replies.