Solved

control when hamburger icon kicks in

Posted on 2016-10-27
7
43 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
  • 4
  • 3
7 Comments
 
LVL 52

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 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 41862894
0
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
LVL 52

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 52

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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

An enjoyable and seamless user experience can go a long way on an eCommerce site. While a cohesive layout and engaging copy play roles in creating a positive user experience, some sites neglect aspects that seem marginal but in actuality prove very …
Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…
The purpose of this video is to demonstrate how to set up basic WordPress SEO. This will be demonstrated using a Windows 8 PC. The plugin used will be WordPress SEO by Yoast. Go to your WordPress login page. This will look like the following: myw…

828 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