Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

control when hamburger icon kicks in

Posted on 2016-10-27
7
Medium Priority
?
64 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 54

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 2000 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 54

Accepted Solution

by:
Scott Fell,  EE MVE earned 2000 total points
ID: 41862894
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 54

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 2000 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 54

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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

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

This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
Originally, this post was published on Monitis Blog, you can check it here . It goes without saying that technology has transformed society and the very nature of how we live, work, and communicate in ways that would’ve been incomprehensible 5 ye…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
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…

610 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