Carlos –
I don’t know if you could do it with “zero,” but I can walk you through what I did. 🙂 It’s not a plugin. It’s done with CSS. There may be a plugin (seems there is for everything), but I tend to do most things with CSS on my sites. Some of this could probably be handled inside the regular options for GeneratePress but when I was working it out, there were fewer options.
If you don’t know what CSS is yet, it’s worth finding out. For now, let’s just say it’s the code you put in a style sheet for your site. You do need a plugin to do that with GeneratePress. I use Simple Custom CSS as recommended by Tom and it works great. Install that first. Then go to Appearance/Custom CSS and you’ll see where you’ll be adding the lines below. You can just paste it in and customize the colors and position, if you want to.
What you are doing here is setting up a style area for what happens when the screen size is smaller and then styling 3 things: the hotdog button, the menu that drops down out of the hotdog, the word Menu that labels the hotdog.
This is only for one main navigation menu. I’ve hidden secondary menus on these sites because I don’t think 2 menus looks good on the phone. In my sites, there is also code to change the header and various other parts, but below is just the menu part that you mentioned. This one is from http://altavistarecording.com/
Instead of explaining each step, I’ve commented on the code below with comment marks /* */
/*media view for mobiles less than 768*/
@media screen and ( max-width: 768px ) {
/*styling the hotdog*/
.menu-toggle {
font-size: 16px !important;
padding-left: 12px;
padding-right: 6px;
box-shadow: 1px 1px 4px #111;
text-align: left !important;
z-index: 99999;
position:fixed;
left:0;
/*change position of hotdog here*/
top: 12% !important;
/*change color of hotdog background here first 3 numbers are color last number is transparency */
background: rgba(103,13,4,1);
}
/*what happens when you hover over hotdog mine changes the shadow and moves slightly*/
.menu-toggle:hover {left:2px;box-shadow: 2px 2px 6px #111;}
/*drop down out of hotdog*/
.main-nav {
background: rgba(12,9,4,1); /*change color of background here */
display: block!important;
position:fixed;
left:0; top: 12% !important; /*change position here*/
padding-left: -11px !important;
padding-right: 18px !important;
padding-top: 35px !important;
box-shadow: 1px 1px 3px #000;
}
/*words on dropdown*/
.main-navigation a {
font-size: 14px !important;
padding-left: 12px !important;
}
/*if site has a secondary menu that should not be displayed in mobile view*/
.secondary-navigation {display:none !important;}
.secondary-navigation .menu-toggle {display:none !important;}
} /*end small media----*/If you want to hide the menu label as it is on http://austinbabyguru.com/, add this
.menu-toggle .mobile-menu {
display: none;
}