Solved

wordpress - hamburger navigation not on phone

Posted on 2016-07-19
3
77 Views
Last Modified: 2016-08-05
Hamburger navigation icon appears ONLY on my tablet PORTRAIT view  but not on my tablet in landscape?  It does not appear at all on phone.

 I would like to it work on BOTH mobile devices on all views.
https://www.nsitedesigns.com
0
Comment
Question by:nsitedesigns
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 9

Assisted Solution

by:lisfolks
lisfolks earned 250 total points
ID: 41723564
What do your @media queries look like? For example:
@media screen and (min-width: 100px) {
    /* settings for screens larger than 100px */
}

Open in new window

It sounds like you've got something set up for a portrait-view tablet, but not anything smaller or larger?

See these resources:
Using media queries - CSS | MDN
Responsive Web Design Media Queries - W3Schools
CSS3 @media Rule - W3Schools
CSS3 Media Queries - Examples - W3Schools
0
 
LVL 29

Accepted Solution

by:
chilternPC earned 250 total points
ID: 41724571
If you look at your style sheet located here:

https://www.nsitedesigns.com/wp-content/themes/parallax-pro/style.css

you will find media queries sections :
@media only screen and (max-width: 1140px)   {  .....css styles...}
@media only screen and (max-width: 960px)     {  .....css styles...}
@media only screen and (max-width: 768px)    {  .....css styles...}
@media only screen and (max-width: 480px)    {  .....css styles...}


these are the "breakpoints when your menu changes depending on the size of the screen, so if you want the hamburger menu on tablet landscape mode, you will need to probably  remove
all menu related  styles  between the media 960 and replace it with the menu related styles from the media 768 area. Leave the 768 as is, just copy the genesis menu stuff and out it in the 960 section.

- make a back up of all files before making changes ;-)

and test your changes with screenfly here:
http://quirktools.com/screenfly/

BTW the menu appears on all my smartphones and tablets ok.
0
 

Author Comment

by:nsitedesigns
ID: 41728384
chiltern, I will try your suggestions.  Just been really busy lately....
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

691 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question