Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #184989

    Hello,
    As I scale down the browser window my menu items start to overlap the logo in the header. I would like to be able to set it to go into mobile/responsive mode sooner. I have tried some of the suggestions that I’ve found in the forum but they haven’t worked for me.

    Thank You

    #185219

    Hi D5WDesignGroup!

    Please refer to this post if you have not already http://www.kriesi.at/support/topic/collapsable-menu/#post-165144

    Regards,
    Yigit

    #185287

    I had tried changing the settings on the avia.js page multiple times and it does not fix the problem. I have tried it again and still there is no change.

    #185296

    Hey!

    Can you post the link to your website?

    Regards,
    Yigit

    #185310

    You will find the site here:

    http://startwishing.com/

    #185421

    Hi!

    Please edit js > avia.js, find this code:

    var menu 			  = header.find('.main_menu ul:eq(0)'),
    	    	first_level_items = menu.find('>li').length,
    	    	bottom_menu 	  = $('html').is('.bottom_nav_header'),
    	    	switchWidth 	  = 767;
    
        	if(first_level_items > 7 + header.find('#menu-item-search').length && !bottom_menu)
        	{
        		switchWidth = 989;
        		header.addClass('mobile_menu_tablet');
        	}

    Replace it with:

    var menu 			  = header.find('.main_menu ul:eq(0)'),
    	    	first_level_items = menu.find('>li').length,
    	    	bottom_menu 	  = $('html').is('.bottom_nav_header'),
    	    	switchWidth 	  = 1024;
    
        	if(first_level_items > 7 + header.find('#menu-item-search').length && !bottom_menu)
        	{
        		switchWidth = 1024;
        		header.addClass('mobile_menu_tablet');
        	}

    Make sure that you remove the browser cache then reload the page a few times.

    Cheers!
    Ismael

    #185734

    I tried that as I had tried changing those values previously and it had no effect.

    #185776

    Hi!

    Try the last steps here: http://www.kriesi.at/support/topic/top-menu-with-the-social-icons-bigger/#post-134332

    The above works for the regular dropdown switch but the alternate style needs the css changes too.

    Best regards,
    Devin

    #185793

    Thank you, that has resolved the point at which the menu becomes responsive. However it has created an issue. I have this added to the Quick CSS to remove the search icon from the header:

    #top #menu-item-search.menu-item-search-dropdown>a {display:none;}

    After adding the code you suggested to fix the responsive issue the search icon is back even though the above code is still there.

    #185808

    Actually I just realized that the code that fixes the responsive issue is overriding all of the rest of the code in Quick CSS.
    This is the current Quick CSS including the code to fix the responsive issue(none of the other code is working anymore):

    @media only screen and (max-width: 989px) {
    .responsive #header .main_menu ul {
    display: none;
    }

    @media only screen and (max-width: 989px){
    .mobile_active #advanced_menu_toggle {
    display: block;
    }

    #top #menu-item-search.menu-item-search-dropdown>a {display:none;}

    .overlay-type-extern{
    display: none !important;
    }

    #header {
    background-color: #FFF;
    }

    input[type="submit"],
    #form-1-1339700500 .submit {
    padding: 0 3%;
    text-align: left;
    width: 103px;
    height: 32px;
    background-image: url(“http://startwishing.com/wp-content/uploads/2013/10/Submit-3-39.png”);
    background-position: 0 0;
    border-style: solid;
    border-width: .25px;
    display: inline-block;
    font-size: 12px;
    line-height: 28px;
    margin: 3px 0;
    position: relative;
    text-decoration: none;
    }

    body p, body {
    font-family: “Open Sans”;
    font-size: 11pt;
    }
    /*
    Mobile Styles
    ================================================== */
    /* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */

    @media only screen and (max-width: 640px) {
    /* Add your Mobile Styles here */
    .template-page .entry-content h2, .av-special-heading h3 {
    white-space: normal !important;
    }

    #185945

    Hey!

    You forgot to close it:

    @media only screen and (max-width: 989px) {
    .responsive #header .main_menu ul {
    display: none;
    }
    }
    
    @media only screen and (max-width: 989px){
    .mobile_active #advanced_menu_toggle {
    display: block;
    }
    }

    Best regards,
    Ismael

    #185955

    Either way it still does not work. It is cancelling out the rest of the code.

    #186024

    Double check that every media query has a closing bracket even after the css inside of it. I don’t know of any quick validation tools you could run it through unfortunately but that is what it sounds like from your description.

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.