not a support question
nikicampbell
Member
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 :)
Devin
Moderator
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
nikicampbell
Member
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!
Devin
Moderator
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
});
Ismael
Moderator
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
You must log in to post.
Please start by registering an account for this forum here
Create a new thread and tell me what problems you are encountering and what you want to know.
There is no step 3 :)
We try to answer all questions within a day, monday-friday.
