Solved

control when hamburger icon kicks in

Posted on 2016-10-27
7
21 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
Comment Utility
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
Comment Utility
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
Comment Utility
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 52

Assisted Solution

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

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

}
0
 

Author Comment

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

Author Comment

by:nsitedesigns
Comment Utility
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
Comment Utility
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The purpose of this video is to demonstrate how to Import and export files in WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Click on Too…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

743 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now