Solved

control when hamburger icon kicks in

Posted on 2016-10-27
7
45 Views
Last Modified: 2016-10-28
How do I use css to tell media queries when the hamburger icon should kick in?  I am using Metro Pro from Studio Press which has a Genesis framework.

I have padding in place so in desktop view the navigation buttons extend the full navigation bar.  I know I can add media queries but don't know 1)the standard sizes to use and also 2) how to tell it to use the hamburger icon.

  .genesis-nav-menu a {
    padding: 12px 40px 12px;
}

Open in new window


http://36a.ed7.myftpupload.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
  • 4
  • 3
7 Comments
 
LVL 53

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 500 total points
ID: 41862791
You do this in your media query https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

It could be something like below

/* default */
  .hamburger {
    display: none;
  }
@media (max-width: 600px) {
  .hamburger {
    display: block;
  }
}

Open in new window


Looking at your site and using browser dev tools, it is set at 767px
@media only screen and (max-width: 767px)
.genesis-nav-menu.responsive-menu .menu-item, .responsive-menu-icon {
    display: block;
}

Open in new window


Add a new custom css and put it under the other css files and make your adjustments in your custom css. This way, if you update the theme later, you will not over write.
0
 

Author Comment

by:nsitedesigns
ID: 41862844
OK.  Here is the code I added.  I am trying to display the hamburger on tablet in portrait but the full menu on tablet in landscape. I reduced padding between buttons but that didn't seem to make a difference.  Not sure what I did wrong.  Plus, why does the hamburger nav default to the fully open position?  Seems odd.  I would like the nav bar with the hamburger to be closed at first and require someone to click on it to expand it.


@media only screen and (max-width: 1024px) {
  .genesis-nav-menu.responsive-menu .menu-item, .responsive-menu-icon 
    {padding: 12px 5px 12px 5px;}
}


@media only screen and (max-width: 768px){
.genesis-nav-menu.responsive-menu .menu-item, .responsive-menu-icon {display: block;}
.site-header h1 {text-align: center;}
}

Open in new window

0
 
LVL 53

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 41862894
0
Report: Liquid Web beats Amazon, Rackspace & More

A study by performance analyst firm Cloud Spectator finds that Liquid Web beats rivals Amazon, Rackspace and DigitalOcean when it comes to website and cloud application performance.

 
LVL 53

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 500 total points
ID: 41862901
and you can mix queries

@media only screen and (max-width: xxxpx) and (orientation: xxxx) {

}
0
 

Author Comment

by:nsitedesigns
ID: 41862915
But doesn't the width identify if it is portrait or landscape?
http://viewportsizes.com/?filter=ipad
0
 

Author Comment

by:nsitedesigns
ID: 41862922
I just don't get media queries!  I am beyond frustrated and have spent pretty much all day on trying to get this to work!  I think I am just intimidated by them.

On ipad tablet landscape, I am trying to get full menu bar to display (not hamburger).  I modified padding drastically just to see if it I could get it to display and it still only shows the hamburger navigation which initially displays and fully OPEN (not just the 3 lines).

@media only screen and (max-width: 1024px) and (orientation: landscape)  {
  	.genesis-nav-menu.responsive-menu .menu-item, .responsive-menu-icon {padding:5px;}
}

Open in new window

0
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 41864519
There are probably multiple items targeting the same thing.  

As you load each style, whatever is loaded last takes precedent.

  <style>
         .box {
    color:red;

}
.box {
    color:white;

}
.box {
    color:blue;

} 
</style>

<div class="box">I should be blue and not red or white</div>

Open in new window

http://jsbin.com/sawosimepi/edit?html,output

The best thing to do is simplify your page as you experiment with what is working. Then start adding back css files. But if you create your custom css file and place it last, it will over rule anything you have done.

Make sure to use your browser dev tools as well.

You will also want to understand what you are targeting. Take a look at the resolutions below. Depending on the version of ipad, targeting a max width of 1024 may not fall into your media query if the current width is over 1024.

http://iosres.com/
http://www.iosres.com/index-legacy.html

Try and take it slow and not get frustrated because it just makes it harder :)  Play with experimenting to learn more how things work.
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

Suggested Solutions

Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
The viewer will learn how to dynamically set the form action using jQuery.
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

738 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