• 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

Full Width Header – White Background – News Theme

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 › Full Width Header – White Background – News Theme

This topic is: not resolved

Tagged: full width header

  • This topic has 12 replies, 3 voices, and was last updated 11 years, 4 months ago by John.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • December 10, 2012 at 5:33 am #4136
    tpaulwhite
    Member

    I am trying to set my site up to have white space going across the top of the header section - I am using the News Theme.  I have been trying to adjust the #header section of the style.css file but am having no luck.  Any help would be appreciated

    My site is - xohawaii.com

    I am trying to get the header to look like the one at geekwire.com

    Thank you for your help!

     

    http://www.xohawaii.com

    December 10, 2012 at 8:47 am #4163
    John
    Participant

    Try this at the end of your style.css:

    #subnav {
    background-color: #fff;
    padding: 0 0 8px;
    width: 100%;
    }
    #subnav ul {
    float: none;
    margin: 0 auto;
    width: 960px;
    }

    You might want to play with the padding size in #subnav to get that lined up correctly.


    John Sundberg | blackhillswebworks.com
    A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

    December 10, 2012 at 8:55 am #4165
    John
    Participant

    And personally, I'd add this to make the space around those social icons more proportional:

    #subnav li.social-facebook a,
    #subnav li.social-facebook a:hover,
    #subnav li.social-rss a,
    #subnav li.social-rss a:hover,
    #subnav li.social-twitter a,
    #subnav li.social-twitter a:hover {
    margin: 5px 10px 0 0;
    }

    and then change the padding in #subnav to

    padding: 0 0 4px;

     


    John Sundberg | blackhillswebworks.com
    A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

    December 10, 2012 at 11:37 am #4198
    tpaulwhite
    Member

    Thank you John - I made the changes and that made the top nav bar go all the way across, which is definitely one of the things I wanted.  Now I just need to get white space to the left of the header logo and to the right of the Hawaiian airlines ad widget, as well as turning the background around the hawaiian airlines widget white.  Can you please advise how to do that?  Just like the header logo section on Geekwire.com

     

    I really appreciate it!

    December 10, 2012 at 12:04 pm #4210
    John
    Participant

    If I understand correctly what you're asking, I think this is what you want to do:

    #header {
    background:  none repeat scroll 0 0 #fff;
    border: none;
    width: 100%;
    }
    #header .wrap {
    margin: 0 auto;
    width: 960px;
    }
    #header #title-area {
    background: url(http://xohawaii.com/wp-content/uploads/2012/12/xoHAWAi’i-Logo-465x110.jpg) no-repeat scroll 0 0 transparent;
    }

    And I'd keep a border under the subnav by adding this:

    #subnav {
    border-bottom: 1px solid #D5D5D5;
    }


    John Sundberg | blackhillswebworks.com
    A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

    December 10, 2012 at 12:48 pm #4225
    tpaulwhite
    Member

    Thanks John -

    I took the code you provided above and replaced the following section:

    #header {
    background-color: #000;
    border-left: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
    border-top: 1px solid #ffffff;
    min-height: 110px;
    margin: 0 auto;
    overflow: hidden;
    width: 960px;

    The result was essentially the same look, but the logo was not gone.  I did not get the white background going across the full length of the screen that I was looking for.  Did I follow your instructions right?

    Thank you

    December 10, 2012 at 12:52 pm #4229
    John
    Participant

    I think you'd be better off pasting my code at the end/bottom of your style.css file because of how the CSS cascade works, at least for now, rather than replacing the default code.


    John Sundberg | blackhillswebworks.com
    A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

    December 10, 2012 at 1:25 pm #4246
    tpaulwhite
    Member

    Thanks John - I added it to the bottom of the style.css file and uploaded it so you can see the results.  I think something is still missing.  Please check it out.  http://www.xoHawaii.com

    As you will see - it moved my logo over to the left and left the gray background.  I was hoping to keep the logo where is was, just add the white background across the full screen.

     

    I really appreciate it!

    December 10, 2012 at 1:44 pm #4251
    John
    Participant

    We're getting there...

    Add !important to #header, so it looks like this:

    #header {
    background:  none repeat scroll 0 0 #fff !important;
    border: none;
    width: 100%;
    }

    Then, the logo isn't showing up because of a strange character in the image URL. I'd recommend renaming that image file name without any special characters, and then using that in the following code. For example, a better file name would be xohawaii-logo.jpg

    #header #title-area {
    background: url(http://xohawaii.com/wp-content/uploads/2012/12/xohawaii-logo.jpg) no-repeat scroll 0 0 transparent;
    }


    John Sundberg | blackhillswebworks.com
    A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

    December 10, 2012 at 2:21 pm #4253
    tpaulwhite
    Member

    That did it!  Thank you for such fast and helpful response!

    December 10, 2012 at 2:48 pm #4258
    John
    Participant

    You're welcome!


    John Sundberg | blackhillswebworks.com
    A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

    January 23, 2014 at 12:35 pm #86668
    wadams92101
    Member

    I want to do something similar but instead of a white background in the header I want to have full width header image. would I simply the white background below with the URL image?

    #header {
    background: url(http://mydomain.com/header-background.jpg) no-repeat scroll 0 0 transparent;
    border: none;
    width: 100%;
    }

    Would this work in News Pro 3.0?

    January 25, 2014 at 11:28 am #86977
    John
    Participant

    wadams92101,

    Possibly, but we'd need more information to help you with this, starting with the URL of the website you're working on.


    John Sundberg | blackhillswebworks.com
    A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and 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