Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 74
  • Last Modified:

control when hamburger icon kicks in

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
nsitedesigns
Asked:
nsitedesigns
  • 4
  • 3
3 Solutions
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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
 
nsitedesignsAuthor Commented:
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
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
and you can mix queries

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

}
0
 
nsitedesignsAuthor Commented:
But doesn't the width identify if it is portrait or landscape?
http://viewportsizes.com/?filter=ipad
0
 
nsitedesignsAuthor Commented:
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
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now