Okay
  Public Ticket #886598
Responsive menu width - avoid wrapping
Closed

Comments

  •  2
    Andreas started the conversation
    September 9, 2016 at 4:36pm

    Having a wider custom logo (eg 200px) and/or some more menu entries (5 or 6) than in the demo (with standard menu) lets the menu line wrap at some screen size point. When using WPML language switcher that issue happens even sooner (with less menu entries).

    Is there a way to get more control when to switch to the mobile menu to avoid line wrapping in the main menu?

    Thanks,

    Andreas

  •  1,558
    Laborator replied
    September 13, 2016 at 3:58pm

    Hi Andreas,

    What we can do is make the gaps between menu items smaller, so it should fit the menu well.

    Can you please send us your site URL first, so we can investigate your site and then get back to you with possible solution.

    P.S. make sure you've disabled the Maintenance/Coming Soon mode

    Best regards,
    Laborator Team

      Documentation         Join Kalium Users Group

  •  2
    Andreas replied
    September 13, 2016 at 4:16pm

    I'm afraid making the gaps smaller wouldn't solve the problem entirely ...

    We'd simply like to switch to the Hamburger menu before the wrap happens.

    See here: http://mr.ic-gruppe.com/

  •  1,558
    Laborator replied
    September 13, 2016 at 5:36pm

    Hi Andreas,

    Go to Custom CSS > Responsive > Medium and paste this:

    .main-header.menu-type-standard-menu .standard-menu-container .menu-bar {
    display: block;
}

.main-header.menu-type-standard-menu .standard-menu-container nav {
    display: none;
}

    This should activate the hamburger menu before getting into the new line.

    Best regards,
    Laborator Team

      Documentation         Join Kalium Users Group

  •  2
    Andreas replied
    September 13, 2016 at 5:44pm

    That's not it ...

    Now menu is gone completely and when sizing the window down a wrapped menu appears before switching to Hamburger ...  

  •  1,558
    Laborator replied
    September 13, 2016 at 5:59pm

    Hi Andreas,

    Can you please send us your WordPress username and password? We need to investigate your site and then get back to you if we have a possible solution.

    Make sure to choose Private Reply when you send us sensitive informations!

    Best regards,
    Laborator Team

      Documentation         Join Kalium Users Group

  •   Andreas replied privately
  • [deleted] replied
    September 21, 2016 at 10:35am

    Hi Andreas,

    I've added the following JS to Theme Options: 

    jQuery( document ).ready( function( $ ) {
      $( '.main-header.menu-type-standard-menu .standard-menu-container .menu-bar' ).on( 'click', function( ev ) {
        $( 'body' ).toggleClass( 'mobile-menu-open' );
      } );
    } );

    And this Custom CSS:

    @media screen and (max-width:1299px) {
        .main-header.menu-type-standard-menu .standard-menu-container .menu-bar {
            display: block !important;
        }

        .main-header.menu-type-standard-menu .standard-menu-container nav {
            display: none;
        }
    	
    	.mobile-menu-wrapper,
    	.mobile-menu-wrapper+.mobile-menu-overlay {
        	display: block !important;
    	}
    }

    So now the menu opens when user reaches viewport width of 1300 pixels.

    I hope you like it.