• 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

Lifestyle Pro – Eliminate whitespace between header and primary navigation

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 › Lifestyle Pro – Eliminate whitespace between header and primary navigation

This topic is: resolved

Tagged: header, lifestyle_pro, navigation, whitespace

  • This topic has 9 replies, 3 voices, and was last updated 10 years, 11 months ago by Abland.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • August 4, 2014 at 6:37 pm #117070
    gadfly1974
    Member

    First, thanks to David Browne @davidbrowne_ for fantastic advice on my wife's header image. It looks beautiful on a variety of desktop and mobile devices!

    I'd like to complete two last small adjustments to the navigation bar. I'd like to make it full-width, and I'd like to eliminate the whitespace between the header and the navigation.

    Any suggestions?

    http://amleibowitz.com/
    August 4, 2014 at 6:51 pm #117076
    Abland
    Member

    Hi, gadfly1974,

    Try this:

    .site-container {
        padding-top: 0px;
        padding-left: 0px;
        padding-right: 0px;
    }
    .site-inner {
        padding-left: 3.6em;
        padding-right: 3.6em;
    }

    If needed use !important;

    August 4, 2014 at 6:58 pm #117079
    ᴅᴀᴠɪᴅ
    Member

    No problem 🙂

    OK there are two ways to do this.

    If you are planning on only using the one menu on your site, then the easiest way (assuming you copied my code exactly) is to just the menu to the Primary location instead of the Secondary. You can just do this in the menu option. This is because we already moved the Primary menu outside of the site-container with the last code i gave you. The only thing you would need to change in that code is the priority number of the menu to make sure it comes after the header.

    So with this line..

    add_action( 'genesis_before', 'genesis_do_nav', 2 );

    Change the number 2 to 18

    If, you wanted to have two menus, or it is important that you leave this menu as the secondary, then there is another way. You can move the secondary menu outside of the site-container also.

    So for this you would need to add..

    //* Reposition the secondary navigation menu
    remove_action( 'genesis_after_header', 'genesis_do_subnav' );
    add_action( 'genesis_before', 'genesis_do_subnav', 20 );

    It automatically solves the white space problem.

    For future reference check out this visual guide to the genesis hooks

    You can see the names of the hooks and where they are. All we have done is unhook them from where they were, and added them onto new hooks.


    I love helping creative entrepreneurs build epic things with WP & Genesis.

    Follow on Twitter

    August 4, 2014 at 7:10 pm #117085
    gadfly1974
    Member

    Thanks Abland! This code eliminated the whitespace between the header image and the navigation bar.

    August 4, 2014 at 7:15 pm #117086
    gadfly1974
    Member

    David, I'm working through your code right now to get the nav bar full-width. Thanks for the quick reply

    August 4, 2014 at 7:16 pm #117087
    Abland
    Member

    You're welcome - you may need to reduce the padding-left and padding-right on .site-inner - in IE I just noticed the sidebar drops below the content area ... maybe 3.2em or a bit less

    August 4, 2014 at 7:20 pm #117090
    gadfly1974
    Member

    So one last question. How do I get the navigation menu full-width instead of cutting off at the edge of the background tile image? Is this possible?

    My bad for asking two different style questions in the same thread. Sorry.

    August 4, 2014 at 7:26 pm #117092
    gadfly1974
    Member

    Thank you for checking that, Abland. I've made that adjustment.

    Now I'm struggling on my iPhone, though. It's rendering much too narrowly. I'll keep playing around with the settings.

    August 4, 2014 at 7:42 pm #117098
    gadfly1974
    Member

    David, I added your code to reposition the secondary menu. Because of the way my designer created her code, this was the most elegant solution.

    Abland, thank you for your help as well. I have a better understanding of how to work with margins in CSS now.

    Thank you both!

    August 4, 2014 at 7:47 pm #117100
    Abland
    Member

    Glad you got it - I wasn't thinking screen width at first - David was 🙂

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Lifestyle Pro – Eliminate whitespace between header and primary navigation’ 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

© 2025 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