Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #20094

    I’m wondering where I can changed responsive code for the mobile navigation. When I make my browser narrow – the mobile menu appears too soon (at approximately 767px)

    I would rather it appear at the same moment that the wrap_all shifts from 774px to 478px

    thanks :)

    #106277

    Hi nikicampbell ,

    The cut off for mobile queries is 767px. So when making a site responsive the content adjustments for mobile is when the browser window hits 767px wide.

    So what you want to happen is already set to happen. You can see it in the grid.css file starting at line 201. The container shifts to 478 once the window has a max width of 767 (but is above 480px).

    Regards,

    Devin

    #106278

    Thanks – So the detail that I would like to change is:

    when I narrow my browser window – the navigation goes mobile for a few pixels before the window wrap_all shrinks. Can I change the pixel width – where the nav turns mobile – to respond just a few pixels narrower?

    here is what happens:

    http://www.peacerev.ca/nikitemp/graphic.png

    here is the functional site:

    http://www.peacerev.ca/cardshop/

    Cheers!

    #106279

    I’m not getting the same behavior when I view your site and it really shouldn’t be happening at all. The grid is designed to wrap both at the same time and in fact is already set to do so.

    If it is not happening in a browser/OS combination I’d like to address it as a bug fix so it doesn’t happen for anyone.

    From your screenshot, which browser and OS is it with? Can you also tell me the version?

    Right now the function is in the js>avia,js file:

    // improves menu for mobile devices
    jQuery('.responsive .main_menu ul:eq(0)').mobileMenu({
    switchWidth: 768, //width (in px to switch at)
    topOptionText: jQuery('.main_menu').data('selectname'), //first option text
    indentString: '   ' //string for indenting nested items
    });

    #106280

    yes – here are the details:

    Mac OS 10.8.2

    Browser: firefox: 18.0.2

    Thanks – I absolutely love the theme :)

    #106281

    Hi,

    You can adjust switchWidth, edit js>avia,js file then find the code

    // improves menu for mobile devices
    jQuery('.responsive .main_menu ul:eq(0)').mobileMenu({
    switchWidth: 768, //width (in px to switch at)
    topOptionText: jQuery('.main_menu').data('selectname'), //first option text
    indentString: '   ' //string for indenting nested items
    });

    Adjust the value of switchWidth. Right now the mobile menu will appear on 768px.

    Regards,

    Ismael

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

The topic ‘mobile menu views a few pixels too soon’ is closed to new replies.