Nav Not working in Tablet Portrait mode
Permalink Browser Info Environment
Hi Michael,
Came across another small problem with the theme. The Navigation button doesn't work when the site is changed to a tablet portrait size.
This seems ot be the case when the screen size is between 770px wide & 990 px wide.
When it's smaller the grey bar appears to the right and you can select from the Nav. When it's bigger the Nav is along the top.
Tested it on an iPad & Galaxy Note 10.1 both of which will not allow the Nav to work when in portrait.
Came across another small problem with the theme. The Navigation button doesn't work when the site is changed to a tablet portrait size.
This seems ot be the case when the screen size is between 770px wide & 990 px wide.
When it's smaller the grey bar appears to the right and you can select from the Nav. When it's bigger the Nav is along the top.
Tested it on an iPad & Galaxy Note 10.1 both of which will not allow the Nav to work when in portrait.
| Type: | Pre-Sale |
|---|---|
| Status: | In Progress |
+1 for this issue. Same problem here.
I found the error causing the problem:
In iGotStyle.less around line 57 you'll find the styles for #mobileNav. They have max-size instead of min-size set in the media query
Change this line:
to this:
For me this solved the menu-problem.
In iGotStyle.less around line 57 you'll find the styles for #mobileNav. They have max-size instead of min-size set in the media query
Change this line:
@media only screen and (max-width:767px){
to this:
@media only screen and (min-width:767px){
For me this solved the menu-problem.
Awesome. That seems to have done the trick. Michael, you may want to update the file for future downloaders.
One closely related question:
The text size on the right side mobile navigation is quite huge. How to make it smaller in iGotStyle.less?
The text size on the right side mobile navigation is quite huge. How to make it smaller in iGotStyle.less?
Here's the line 71 in iGotStyle.less, where you can set the text size of right side mobile nav:
Original:
.
With font size adjustment:
.
Original:
#mobileNav ul li a {color: #fff; }With font size adjustment:
#mobileNav ul li a {font-size: 16px; color: #fff; }
If you did this, you may want to make some changes. Changing it from max-width to min-width actually breaks it on anything LESS than 768.
That said around line 58, it should be max-width: 991px.
and then on 66, it should be min-width: 992px.
Version 1.2.1 fixes this.
That said around line 58, it should be max-width: 991px.
and then on 66, it should be min-width: 992px.
Version 1.2.1 fixes this.
Still doesn't work for me. Tried reducing line 57 to 750px, and I-Pad Air 2 won't activate the menu in portrait mode.
I updated Fruitful today to version 1.2 and now mobile nav seems to work properly at least on iPhone and iPad on vertical and horizontal views. Thank you for nice update!
It always worked on mobile and tablets (in portrait) there were some issues between 768 and ~990px.
As of version 1.2.1, they've been fixed.
Also the main point of 1.2 was that we added styles for the new ecommerce add-on (see the demo site)
As of version 1.2.1, they've been fixed.
Also the main point of 1.2 was that we added styles for the new ecommerce add-on (see the demo site)