Sticky Hamburger Button Like NYTimes

[bumblebee]

Hi,

I'm using the magazine pro theme and am trying to figure out how to make the hamburger button remain on the page no matter what screen size a user has (much like the New York Times). I would like the hamburger to include a dropdown menu with links to my category pages. Next to the hamburger I would like to include the word "sections" and a site logo that's hyperlinked to my homepage. This is the style that many news sites like NYT, Washington Post, etc. are now using on their story pages.

I've been able to get the hamburger to remain on all screen sizes by moving the following code out of the media queries:

.nav-primary .responsive-menu {
display: none;
}

.nav-primary #responsive-menu-icon {
display: block;
text-align: left;
}

However, I'm having trouble figuring out how to position other items (i.e. the word "sections" and my logo) next to the hamburger within the primary navigation menu. Any insight on how to do this would be great! Thank you!!

[michaelbeil]

I'd recommend using Ozzy Rodriguez's Genesis Responsive Menu to customize things to your liking: http://ozzyrodriguez.com/tutorials/genesis/genesis-responsive-menu-2-0/

[bumblebee]

Thanks for your reply. Unfortunately, this is not what I'm looking for at all. The navigation bar that come with magazine pro already accomplishes what the Ozzy Rodriguez’s Genesis Responsive Menu outlines. What I'm trying to make happen is to include the hamburger menu on all devices (including desktop) and allow other items to be listed next to the hamburger icon. Make sense?

[bandj]

around line 1938 of your style find this

.nav-primary .responsive-menu {
display: none;
}

.nav-primary #responsive-menu-icon {
display: block;
text-align: center;
}

try moving that above the media queries. If that works then it's just a matter of eliminating them elsewhere.

[bumblebee]

Yes, as indicated above, I already did that. It does keep the hamburger out on all screens, which is great. Now, I'm trying to figure out how I can add other elements to the nav bar outside the hamburger (i.e. I want to include the word "sections" and a logo, etc.).

[bandj]

Here's some stuff that might help

Adding Content to Genesis Navigation

http://amethystwebsitedesign.com/add-logo-on-top-of-navigation-menu-in-a-genesis-child-theme/ I used this one on this site http://dogloverzdaily.com/ which also uses the magazine theme

[michaelbeil]

any progress made @bumblebee?

[Author]

Posts