Introducing my latest course: Freelancing Foundations

Join my tribe!

Sign up to learn how to keep your skills up to date on the tech that matters most and confidently sell your skills to a growing customer base.
I will never spam you. You can unsubscribe at any time.

Reader Interactions

Comments

  1. Great Article, and great tip on priorities. I think it’s one of those things that’s constantly over looked.

    I usually use css to get the same effects, and add the structural class wraps. I like your way though, probably less coding and less thinking involved =)

    Great article!

    • I like the CSS route, too. Sometimes a theme needs both, depending on whether the width is set as part of the body or the #wrap. Thanks, Jonathan!

  2. Thank you for this! I and brand new to wordpress/Genesis and have NO coding knowledge whatsoever (which is why I went with Prose!) . I managed to follow your tutorial just fine – however now I am wondering what I do to get the header and footer to be full width now that it is outside the wrap area? Does this need to be accomplished in the Coding Editor section? Thanks 🙂

    • Hey Angela,
      Yep, you can add your custom CSS to Genesis > Custom Code. With Prose, the site width is specified in the body tag, so you’ll need to make your body 100% and then go back and and make the inner elements a fixed width.

      Try this:


      body {
      width: 100%;
      }
      #header .wrap,
      #footer .wrap,
      #footer-widgets .wrap {
      margin: 0 auto;
      max-width: 970px; //This is the default Prose width, but you can change it if you want.
      }

      If you wanted to change the background color for your header & footer, you could do something like this:


      #header, #footer {
      background-color: #666;
      }

      See if that helps. Feel free to come back and post a link to show off your progress. 🙂

      Cheers,
      Carrie

      • Hi Carrie,

        How do I make the header image full-width and keep the menu aligned with the content? The code above made my menu longer (I might end up keeping that way) but keeps my header image aligned with my content.

        Thanks. I appreciate your help.

        • Hi Jonsky,
          Typically you’ll make your outer wrap (maybe .header or #header in your CSS) 100% and then have your inner menu wrap (maybe .wrap) be set to a fixed width and the margin set to “0 auto” to center.

          If that doesn’t work, post the URL in question and I’ll take a look.

          Cheers,
          Carrie

          • Hi there,
            Try confining your #nav .wrap to a width of 960px and setting your margin to center. So it would look like this:

            #nav .wrap {
            margin: 0 auto;
            width: 960px;
            }

            Same principle will apply to your second menu.
            Carrie

      • Carrie,

        Thank you for this quality tutorial. I am running prose on my website. What I want to achieve is to have the footer run the entire length of the page but not the header. Is this possible? I used your code you gave Angela and it did both. Help?

        Thanks!
        Michelle

  3. Yay!

    It worked! Thanks so much! IThat made it so much more clear – I thought I had to go to Appearance – Editor to make changes and it was overwhelming to figure out what was what – but just cutting and pasting into the Custom section is a piece of cake! That makes sense to me.

    My site is so new – I havent even made a post yet, but I am trying to get a basic design down first! The site is http://hereiamnowwhat.com/

    Thanks again so much!

    🙂

  4. I just discovered your blog and it is a lifesaver!

    Can you offer a suggestion on here or via email?

    I’m using Prose, and have added all the above code as written. However, my site looks wonky. (Official, technical term.) Here’s the site: http://www.tobystevens.net

    The order appears as such:

    Header Image – within body frame?
    Nav Menu – full-width
    Blog content – within body
    Footer Widgets – full-width
    Footer – within body frame?

    What am I missing?

    • Hi Ellen,
      You just need a few CSS tweaks. You’ve got your #header at max-width: 940px. Remove that so that it can be full width and then specify your max-width for your #header .wrap.

      Remove this line from your #footer-widgets .wrap – border: 1px solid #FFFFFF; and that’ll get rid of the odd border.

      Do you use Firebug for Firefox or Chrome? It makes trouble-shooting CSS 100x easier. 🙂

      Carrie

        • If you can avoid being grossed out by the bug icon, check out: https://getfirebug.com/. You can install it as browser add-on for Firefox or Chrome. Then, you can right-click any element on your browser page and select “inspect element” – it shows you the CSS behind a specific element on the screen. Even lets you live edit the CSS to figure out what changes you need to make to your stylesheet.

          It’s awesome.

  5. Hi,

    How would I reposition a custom widget area outside the wrap? I’m on the metro theme and the footer is already outside the wrap. I see in the functions it was done with exact code you listed here. I’ve created the widget to hook before the footer but it shows up in the wrap.

    Thank you,

    Doug

  6. I just figured it out. I had this: add_action( ‘genesis_before_footer’, ‘metro_home_contact’ ) and I changed it to this: add_action( ‘genesis_after’, ‘metro_home_contact’, 2 ). I pieced it together on a whim after reading your post. Thank you.

  7. Hello and thank you for your post!

    Unfortunately, this didn’t work for me and I a little puzzle by what is happening.
    I am creating a brand new child theme, from the latest GENESIS 1.9.1 and I simply wanted to move header and footer out of the wrap.
    I’ve created a new functions.php file in my own theme directory and added your lines of code to reposition header and footer.
    It did add a header and footer out the wrap but it didn’t remove the original header and footer.
    So now I have 2 headers and 2 footers, one inside the wrap and one outside.

    For a test, I installed the prose theme, and it works as supposed, with the footer out of wrap. I checked its functions.php file and it matches the the lines for the footer on your post.
    So I was wondering if you could help me understand why the same lines of code would work on the Prose theme but not on my own brand new theme…

    Thank you for you help

  8. Carrie, thanks for your info. I have moved the header above the wrap but I would also like to center the header to the browser window and have it follow the wrap rather than having it flush left to the browser. Any advice.
    thanks
    Bud

    • Hey Bud,
      You’ll want to make sure there’s a width set on the parent element containing the logo (probably ‘header’). Once that’s done, make sure that float isn’t specified (float: none) and that your margin is set for centering (margin: 0 auto).
      Carrie

  9. I guess the natural question to follow is how to move the menu nav as well above the wrap (full width menu with the menu items aligning with wrap) so that it stays with the header and looks normal. Thanks

    • Never mind! I found the answer using this … 🙂

      // Relocate footer widgets
      remove_action( ‘genesis_before_footer’, ‘genesis_footer_widget_areas’ );
      add_action( ‘genesis_after’, ‘genesis_footer_widget_areas’, 1 );

  10. Hey, I stumbled on to your site searching for ways to make container width wider in Genesis Prose Theme. Would you know how to do that? I can’t seem to find this information anywhere on google and have made few CSS code attempts without any success. Thanks.

    • Hi Peter,
      In a Genesis theme, the parent width is typically set by the main body tag or the wrap tag. You can use Firebug to figure out which it is and then change your CSS accordingly. Here’s a Firebug demo if you’re not familiar with it. 🙂

      Carrie

  11. Thanks for the tutorial. I’m trying to move the header and the nav outside the wrap. It works but the nav gets put inside the header wrap. How do you move the nav under the header with it’s own structural wrap?

  12. Great tutorial. I’ve been developing with Genesis for a while, and although my initial problem wasn’t solved after reading this, I did learn about the hook priorities for the first time. Thanks for sharing!

  13. Hi Carrie,
    thanks for this article!

    I’m trying to move the page-title widget-area in my eleven40 theme outside the wrap.
    So basically what I did is copying and pasting the code you give in your article but swapping “header” with “page-title widget-area” and it did not work 🙂

    Actually my site ended up pretty messed up with all this errors 🙂
    Thanks God I always test stuff on a test site 😉

    So, how do I move the page-title widget-area outside the wrap in Eleven 40?

    Thank you!!!

    • Hi John,
      Yeah, this code wasn’t meant to translate to the page title. That’s another ball of wax. And yes, thank God for backups and test sites! 🙂

      I’d suggest posting your question on moving the page title over in the StudioPress forums along with a link to your site (if available) and a description of what you’re trying to achieve.

      Cheers,
      Carrie

      • Thanks Carrie,
        well really I’ve posted my question there about a week ago, but got no replies 🙁

        Thanks anyways!

        BTW I tick the Notify me of follow-up via email below but I wasn’t notified of your reply…. (just to let you know)

  14. Carrie –

    Thank you for this post. It is actually what I want to do on my blog – however I’m using the Mindstream theme and can’t get it to work. There isn’t a custom box. Can you help a newb at all here?

    THANK YOU!

  15. Hi Carrie!
    Quick question related to the header being moved outside the wrap. I did get that, but noticed that on mobile devices, it does not auto size the header image anymore. Do you know if there is a tweak I can make in the code to still allow the header image to resize in mobile devices? I totally changed my initial blog that I started months ago, so i am starting over from scratch.

  16. Hi Carrie,

    I got the tutorial to work for my header, but I’ve posted an example of my navigation menu. I’ve tried some of the things in the comments but nothing seemed to work. What I would like is the top menu to display full width under the header and the second menu in the wrap removed. I just started my site so it has no content. I’m really hoping you can help, as I’ve been at this for HOURS.

    http://www.inframeexpression.com

  17. Hi Carrie,

    Thanks for the tutorial, I found it very helpful.

    I’m curious about how to add additional divs outside the wrap. How is that done?

    Take your homepage for example, you have intro, services and portfolio sections that all span the full browser width.

    Thanks,
    – Michael

    • Hi Michael,
      The sections you mention on my site aren’t outside the wrap. In my case, I’ve got the outermost divs set at full width and use the .wrap to confine the inside elements to a max width. 🙂

      Carrie

  18. Hi Carrie. Great instructional post – i used it with success when trying to get a CTA bar to display 100% wide and it worked great!

    I decided to try something else though – wondered if you might be able to help… I’m running Prose and i moved the Nav bar above the wrap with:

    remove_action( ‘genesis_before_header’, ‘genesis_do_nav’ );
    add_action( ‘genesis_before’, ‘genesis_do_nav’ );

    http://www.livingaha.com

    I’m trying to get the nav menu so that it’s flush right with the right-margin of the side bar, but I’m a CSS noob…. I want it all the way right, to the right of all the sidebar text….not at the right of the screen…any chance you could help?

    I also need to figure out how to have it flush with the blue bar at the top of the page. some browsers display it like that already, though some have a white space between the nav and the top.

    Thanks for your helpful posts and for taking the time to read this 🙂

      • Yes i did! Thanks so much. …. only now the nav doesn’t show up on mobile devices. Any idea how i could bring that nave menu farther left when displaying on a mobile device? Here’s what I’m using in my custom code:

        #nav {
        width: 150px;
        height: 40px;
        position:relative;
        left:370px;
        -webkit-border-radius: 0px 0px 45px 5px;
        border-radius: 0px 0px 45px 5px;

        }
        body {
        width: 100%;
        border-top:10px solid #6799CE;
        }

        Thanks so much for checking out my site, and for your positive comments 🙂

  19. Hi Carrie,
    Thanks for this tutorial, it is really going to help in the future!
    Unfortunately, I have tried all the CSS coding you mentioned, and I have been unable to put a background color behind the header image.
    Any help would be appreciated!

      • Shoot, I thought I put the site link. It’s http://thelearnedfangirl.com/.
        I did use Firebug, and I’m still having a hard time tracking it down. No matter what I do it seems like it’s one or the other. This is what I have for the CSS now:
        #header {
        height: 160px;
        margin: 0 auto;
        width:100%;
        background-color:#edb008;

        }
        #header .wrap{
        background-image:url(‘/images/the-learned-fangirl-header-2.png’);
        background-position:center;
        background-repeat:no-repeat;
        position:relative;
        z-index:1;
        width:1120px;
        }
        I’m so frustrated, I feel like I’m going crazy! Thank you!

  20. Nice tutorial here. Can you please tell me how to increase the total width of prose theme so that the blog will have lesser blank area on both sides just like this site? I want to use content/sidebar/sidebar layout. Since the prose theme has more empty space on both sides, content area width is lesser. I want to decrease the empty space on both right and left sides so that I can increase the width of content area and sidebars.

    • Hi Rajan,
      If you would, post your question over in the StudioPress forum. You might also search the forum as there are several threads related to the Prose layout.

      Cheers,
      Carrie

  21. Hi Carrie! Thanks for the tutorial. I’ve almooost got it.

    I got the header above the wrap but can’t get it to span the whole screen. I’ve read through all of the comments and set the body to 100%. I want the header to be taller too – changed the height to 195. Changed the #header width to 100%. The header is still off to the left. (?)

    In the stylesheet there’s a ****header*** section, but also a **** Image header – partial width ***** and ****Image header – full width**** should I be editing one of those?

    My test site is here: http://demo.onefunmom.com/ofmtest/ (and yes, the header looks very busy right now – will be changing it somehow) 🙂

    Also, I see a custom css folder in my ftp, but I don’t see anything like that on my dashboard.

    • Hey Christy,
      Using Firebug, I see this code for your header background image:


      #header {
      background: url("http://demo.onefunmom.com/ofmtest/wp-content/uploads/2013/07/cropped-header5.png") no-repeat;
      }

      Add background-position: center; and that should fix the centering issue. The width of that image is only 950px, so you’d either need to create a background image that could repeat and tile across the header OR make a single non-tiling image (like you have now) at a super wide width.

      Cheers,
      Carrie

      • Christy, your header image was created with the logo off-center. if you want your logo in the horizontal center of the header, you’ll need to create a new image.

        If you want the header to be full width, an alternative would be to create two files: (1) create a transparent (.png) file for the logo image by itself, and (2) create a repeatable image of the stripes in a separate file to use as the header background.

        Carrie, thank you for posting such great tutorials!

        Andrea

      • Carrie (and Andrea),

        When I use firebug I see those measurements (940×150) but can’t find them anywhere in the CSS stylesheet. In firebug if I look at the “layout” section it shows the measurements as 1349×200, which are the measurements of the actual header. When I upload the header to Prose it automatically crops it – which is why it doesn’t look centered.

        My question is: where do I find those measurements to change? My dashboard does not show a Genesis<Custom Code<Custom Functions box, so I placed the original code in the functions.php and am trying to add the measurements in the CSS Editor.

        I'm happy to go to the StudioPress forums, but wanted to see if you can help me first.

  22. Thank you so much for this tutorial Carrie! I used this code snippet on Metro. It moved the header above the wrap but left the nav stuck inside the wrap. What needs to be added to the code to move the nav along with the header? Thanks again for dropping knowledge bombs on us. Much appreciated.

  23. Hello Carrie,
    It took me about one hour as well a tea break to reach the bottom of this page to comment on, as i had given all the try which was mention in the post and in comment.

    was having a lot of thing in mind for customization, but only this works
    body {
    width: 100%;
    }
    #header .wrap,
    #footer .wrap,
    #footer-widgets .wrap {
    margin: 0 auto;
    max-width: 970px; //This is the default Prose width, but you can change it if you want.
    }( you can see on my site, )

    Carrie when i use this deadly combination with the code you had posted in the post above, my whole content area shift to right, and say only 2 cm of content area i can see. ( header and footer are in place only content area and sidebar)

    So i removed the code what i put in my function.php, and the CSS i kept.

    am almost done but i think some where i am doing buggy mistake,

    I just need the header and the content area to get align with the nav bar, and if possible nav bar to look like full width but its not an priority.

    Still am searching for the solution, and will appreciate your reply on this, any time you can take the reference my site is live and the link is in my profile,

    Thanks.

    • Hi,

      The CSS in this tut isn’t applicable without the corresponding PHP to move your header outside of the wrap.

      As for your header not lining up with your nav as it now stands, it’s because your body is set to 80% and your wrap inside it set to 100%, but your header is confined to 940px.

      Do you use Firebug? Check out this demo if you don’t – it’ll make life much easier. 🙂

      Carrie

      • Hi Carrie,
        First of all thanks for so fast reply,

        Yes its time to use Firebug, i was learning that only, as i saw you recommending it to everyone in above comment,

        In the mean time, i had done the exact copy and past of the css i mention earlier, by changing body from 80 to 100%,

        SO now the confusion still their,
        How to Increase the width of content area, and aline Header Nav and content area, by keeping full nav menu.

        Hope now you exactly what am trying to do.

  24. This is great Carrie.

    The issue I’m having now is that I already have my primary Nav repositioned above my header.
    When I apply the code then the header goes and sits above the site.container but the primary Nav doesn’t go with it……

  25. Hey Carie,
    Hi from the UK. I’ve just purchased both Genesis and Dynamik. I build sites to supplement our income. I did about one a month up till now. I also pastor a church in Manchester, England. Been doing both for a year, pastoring the church for 15. I only mention this as I noticed you mini bio comments. 😉

    This post on hooks is still a bit beyond me but I know that if I use both Genesis and Dynamik, I will get it in time. Nothing like doing to learn hey. Anyway just wanted to say hi and thanks for the wealth of experience you share in this blog. I am sure we will speak/ share again.

    • Hi David,
      Thanks for stopping by! Glad you’ve found the blog helpful – be sure to read through the comments on posts that don’t quite make sense, as there are some great discussions and additional info there. If you have any questions, just leave another comment!

      Cheers,
      Carrie

  26. Thanks so much for setting this out – I got here via the studiopress fourms. I have successfully moved the header out of the wrap thanks to your code (the footer I think was already outside the wrap). But now I can’t find the CSS to make the header and the nav stretch full width. http://sanjuandelsur.org is the site. Any help would be much appreciated.

  27. A follow up. Actually it seems that my header is working – I just had to change the width of the image. (If you look now I’ve adjusted it back because I dont have the right sized images).

    But I’m now stuck on the navigation – The entire code for both header and nav I tried was this and it didn’t work. But nav did not stretch across.

    remove_action( ‘genesis_header’, ‘genesis_header_markup_open’, 5 );
    remove_action( ‘genesis_header’, ‘genesis_do_header’ );
    remove_action( ‘genesis_header’, ‘genesis_header_markup_close’, 15 ) ;

    add_action( ‘genesis_before’, ‘genesis_header_markup_open’, 5 );
    add_action( ‘genesis_before’, ‘genesis_do_header’ );
    add_action( ‘genesis_before’, ‘genesis_header_markup_close’, 15 );

    remove_action( ‘genesis_before_header’, ‘genesis_do_nav’ );
    add_action( ‘genesis_before’, ‘genesis_do_nav’, 20 );

    And tips on making the nav stretch across the entire page?

    • Open up the Prose init.php file and look to see where it’s hooked the nav. The latest version of Prose 1.5.2 (released a few weeks ago), has the nav here:

      remove_action( 'genesis_after_header', 'genesis_do_nav' );
      add_action( 'genesis_before_header', 'genesis_do_nav' );

      So, it looks like you’re on the right track with your remove action as:
      remove_action( 'genesis_before_header', 'genesis_do_nav' );

      But try your add action in the same spot, but with higher priority and see if it moves it:

      add_action( 'genesis_before_header', 'genesis_do_nav', 5 );

      If so, it’s just a matter of CSS at that point to get your nav wrapper at 100% (it won’t be constrained by the header).

      Cheers,
      Carrie

  28. Carrie, do you know how one would remove the div site-inner and the content-sidebar-wrap?

    I’ve gutted the header, footer, removed the sidebar (via full-width), and removed the loop. I now want to remove the above divs. Then I will have a “blank” template in which I can just use a hook to write on. A blank canvas for landing pages.

    Thanks!

  29. Hello! Great blog you have here. I’d like to make my article title show as full-width while the default sidebars still load directly below the title – I want this done on single article page only. Would this be hard. Here is an example of the implementation: http://www.theverge.com/2013/12/15/5208626/step-initiative-global-ewaste-map

    btw… My prose customization is coming along nicely: http://www.themobilefanatics.com/surface-2-tablet-experience-using-it-without-a-keyboard/

    I’m hoping that I can make this a custom page template so I have the option of using either the standard layout or full-width title layout.

    Hopefully this is possible. Thanks ahead of time!

    • Hey Mike,
      I think you could accomplish it via custom template or your functions.php file. The basic idea would be to unhook the post title (genesis_do_post_title)and rehook it above the the content (maybe genesis_before_content)- not sure about that location off the top of my head.

      If you’re wanting to make it a layout option, that’s a little different approach. I think the above would be easier.

      Carrie

  30. Hi, Carrie,

    I tried your “header above” on another theme and had to do the following:

    remove_action( ‘genesis_header’, ‘genesis_header_markup_open’, 5 );
    remove_action( ‘genesis_header’, ‘genesis_do_header’, 10 );
    remove_action( ‘genesis_header’, ‘genesis_header_markup_close’, 15 );
    add_action( ‘genesis_before’, ‘genesis_header_markup_open’, 5 );
    add_action( ‘genesis_before’, ‘genesis_do_header’, 10 );
    add_action( ‘genesis_before’, ‘genesis_header_markup_close’, 15 );

    I guess I will have to dig into the Genesis code further but I don’t see how you got around replacing the ‘open’ and ‘close’ actions, which drop in the and HTML.

    • Hey Larry,
      It looks like a couple of your code blurbs were lost in that last sentence. The code you pasted is the code from the tutorial, so I’m not sure what the issue is you’re having?

      Cheers,
      Carrie

          • NOW I figured out my confusion. I was using your tutorial “How to Move the Header and Footer” and didn’t follow the “Update” since it implied that it was optional. You might want to consider either (1) removing the “Move” tutorial or put a stronger disclaimer at the top that says “This doesn’t work!”

  31. Hi Carrie,

    I tried this using the Foodie Pro theme and it didn’t work. No matter what I do, it’s still listing the wrap.

    For example:

    I tried adding a CSS element of:

    .footer-widgets .wrap {
    width: 1200px;
    }

    Or changing the width higher than the number above, or to 100%, but oddly it seems as though it’s still being included in the main wrap.

    My aim is to have the footer area at a nice 100% across the page, but still have the widgets themselves where they are in the center along with the main wrap.

    I hope you can help. I’m finishing up a new blog design offline and stuck on this part. Thanks in advance.

  32. Hello Carrie

    Thanks for the code, it works perfectly.
    Although I have a few questions, how do I get the primary-nav in the header wrap.
    I try to get a design with a 100% width header, with a 900px menu in it.
    See template: http://ahvenema.nl/wp-content/uploads/2015/03/av3.0-design.jpg

    Second, with the header and nav outside the wrap, does it still work properly on ipads and other devices?

    Much regards

    Albert

  33. Hi Carrie,

    Thanks for your awesome tutorials and guides. You have been a life saver for me.

    This question may be a little bit outside of the loop of this post, but I thought I’d ask since it is somewhat relevant.

    How would you go about moving the widget-title out of the widget wrap (so it can be styled independently)?

    Thanks very much in advance.

    • Heya,
      Not sure that you’d need to move it out of the wrap to do that — can you just use a higher level of specificity when targeting that widget title?

      For example:

      .some-container .widgettitle

      vs just

      .widgettitle

  34. Thanks for taking time to help Carrie,

    Sadly, that doesn’t work.

    Let me explain the issue, so you can get a better picture:

    The theme I am using has this padding:
    .sidebar .widget {
    padding: 1.4rem 2rem;
    }

    So, when I try to add background color to the widget title, the padding applies there as well. But I need the background color to be full width (of the widget container).

    For now, the only way I can achieve this is by setting negative margins to the widget title, like so:
    .sidebar .widget-title {
    margin: -1.4rem -2rem 1.4rem;
    }

    It works for most devices, but with some (mobile mostly) it looks bad.

    That’s why I am trying to figure out if moving the title out of the widget wrap would solve the issue and allow me to style the widget title independently.

    Thanks in advance.

  35. Hey Carrie,
    Great tutorial! I think I finally had a breakthrough after watching the Lynda tutorial for the third time!

    I have two questions:

    1. How do you know when you need to add the markup_open and close parts to the code? And where do you find them if they’re not for Genesis standard parts of the theme? I need them for a widget area that’s above my header.

    2. Priorities! I’m just baffled by how you know what priority to put on which lines. I can clearly see how it makes a difference, but other than trial and error, and a lot of it, I can’t figure it out!

    Thanks so much for putting these tutorials out there, this one still rocks after all these years! 😉

  36. Thanks, Carrie.

    I appreciate your blogs on Genesis hooks. Had to reposition header outside of site container – a conflict with slidebars jquery. As I learn more and more, I see there’s SO MUCH STUFF you can do within this framework. I’m loving it :).

Trackbacks

  1. […] How to Create a Blog Page with a Single Category Genesis Framework — Using Query Args How to Rename a Genesis Child Theme How to Set Your Own Logo in a Genesis Child Theme How to Add a Logo to the Header Changing Header Image With Custom Header Unwrapping Genesis: How to Move the Header and Footer Customize Genesis: Move Header Above the Wrap with Structural Action Hooks […]

Leave a Reply