Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • November 5, 2013 at 11:57 pm #184989
    D5WDesignGroup

    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

    November 6, 2013 at 4:33 pm #185219
    Yigit

    Hi D5WDesignGroup!

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

    Regards,
    Yigit

    November 6, 2013 at 6:43 pm #185287
    D5WDesignGroup

    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.

    November 6, 2013 at 7:29 pm #185296
    Yigit

    Hey!

    Can you post the link to your website?

    Regards,
    Yigit

    November 6, 2013 at 8:28 pm #185310
    D5WDesignGroup

    You will find the site here:

    http://startwishing.com/

    November 7, 2013 at 1:34 am #185421
    Ismael

    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

    November 7, 2013 at 6:23 pm #185734
    D5WDesignGroup

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

    November 7, 2013 at 7:41 pm #185776
    Devin

    Hi!

    Try the last steps here: https://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

    November 7, 2013 at 8:05 pm #185793
    D5WDesignGroup

    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.

    November 7, 2013 at 8:30 pm #185808
    D5WDesignGroup

    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;
    }

    November 8, 2013 at 2:02 am #185945
    Ismael

    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

    November 8, 2013 at 2:29 am #185955
    D5WDesignGroup

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

    November 8, 2013 at 5:37 am #186024
    Devin

    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.

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘How can I make the navigation menu go responsive sooner?’ is closed to new replies.