• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Hamburger Menu Inline With Logo

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Hamburger Menu Inline With Logo

This topic is: resolved

Tagged: css, navigation menu

  • This topic has 5 replies, 2 voices, and was last updated 7 years, 1 month ago by chrismaxwell.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • May 15, 2015 at 12:57 pm #152335
    chrismaxwell
    Member

    I'd like to get my hamburger menu icon inline with my logo (logo to left, hamburger to right) when the browser window gets smaller but it's currently appearing below.

    Thanks in advance for your help.

    Chris

    http://chrismaxwell.co
    May 15, 2015 at 1:42 pm #152345
    CleanPageDom
    Participant

    You need to change a couple of lines in your media queries in style.css.

    Look for @media only screen and (max-width: 1023px)

    The reason the hamburger is jumping below the site title is because at 1023px and below, the right header widget resizes to 100%, so look for:

    .content, .footer-widgets-1,
    .footer-widgets-2,
    .footer-widgets-3,
    .minimum-landing .site-inner,
    .sidebar,
    .site-header .widget-area,
    .site-tagline-left,
    .site-tagline-right,
    .title-area {
    width: 100%;
    }

    Below that, add:

    .site-header .widget-area {
    width: 20%
    }

    If you want to keep your code a little neater, remove .site-header .widget-area from the first list.

    Then you need to add some padding to the widget-area, otherwise it will sit right at the top of the screen. So find

    .site-header .widget-area {
    padding: 0 5%;
    }

    Change this to:

    .site-header .widget-area {
    padding: 17px 5% 0;
    }

    You can experiment with the 17px.

    Hope that helps.

    Thanks
    Dom


    Let’s build a website together…

    May 16, 2015 at 3:39 am #152383
    chrismaxwell
    Member

    You're a legend Dom, thank you... hamburger fixed!

    Another problem has cropped up now. When you click the hamburger the menu items are all squished over to the right but I'd like them to float to the left, full width of the black header area if possible.

    Any thoughts?

    Thanks
    Chris

    May 19, 2015 at 3:05 am #152716
    CleanPageDom
    Participant

    Sorry for the delay. Just looking into it now. It's because I told you to reduce the width of the widget area. May have to take a different approach.

    Dom


    Let’s build a website together…

    May 19, 2015 at 3:34 am #152723
    CleanPageDom
    Participant

    OK, try this.

    Go bakc to the media only screen and (max-width: 1023px) in style.css

    Where I told you to:

    .site-header .widget-area {
    width: 20%
    }

    Change to:

    .site-header .widget-area {
    float: none;
    width: 100%;
    }

    Leave the padding as is. It's working for me in the Chrome emulator. See how it goes on the live site. If it doesn't quite work, then we can play with position: relative and go at it from that way.

    Sorry for the mix-up.

    Thanks
    Dom


    Let’s build a website together…

    May 19, 2015 at 7:09 am #152744
    chrismaxwell
    Member

    Excellent Dom, that's it sorted now.

    No need to apologise, you've helped me a great deal.

    Thank you,
    Chris

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Hamburger Menu Inline With Logo’ is closed to new replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2022 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble