• 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

Center Header in Mocha 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 › General Discussion › Center Header in Mocha Theme

This topic is: resolved

Tagged: header, Mocha

  • This topic has 10 replies, 2 voices, and was last updated 9 years, 3 months ago by liannef.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • October 31, 2013 at 3:30 pm #70202
    liannef
    Member

    Hi There!

    I installed the plugin for a custom header - now I am having a hard time getting it to center on the page. Any help would be greatly appreciated

    http://www.themakeupgirl.net

    Thanks!

    http://www.themakeupgirl.net
    November 1, 2013 at 1:07 am #70262
    nutsandbolts
    Member

    Try adding this to your stylesheet:

    .custom-header #header {
            background-position: center !important;
    }

    That works for me in Firebug but it may not work on the actual site - if it doesn't, post back here and let me know and we'll try something else.


    Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
    I provide development and training services for designers • Find me on Twitter and Google+

    November 1, 2013 at 10:27 am #70316
    liannef
    Member

    Hi Andrea!

    Thanks for the help! That didn't work for me... 🙁

    Here is the current header script and the header is aligning left....

    #header {
    	background: #322620 url; 	
    	margin: 0 auto; 	
    	min-height: 155px; 	
    	overflow: hidden; 
    	width: 100%;
    }
    November 1, 2013 at 10:28 am #70317
    nutsandbolts
    Member

    Can you put the rule back in place and save so I can see what's happening when it's there?


    Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
    I provide development and training services for designers • Find me on Twitter and Google+

    November 1, 2013 at 10:30 am #70319
    liannef
    Member

    Done - code back in

    November 1, 2013 at 10:36 am #70320
    nutsandbolts
    Member

    Okay, looks like your rule is nested inside another rule, which is why the site goes wonky when it's in place.

    Right now you have this:

    #header {
    	background: #322620 url; 	
    	margin: 0 auto; 	
    	min-height: 155px; 	
    	overflow: hidden; 
    	width: 100%;
       	.custom-header #header {
            background-position: center !important;
    }

    Take all that out and paste this in:

    #header {
    	background: #322620; 	
    	margin: 0 auto; 	
    	min-height: 155px; 	
    	overflow: hidden; 
    	width: 100%;
    }
    
    .custom-header #header {
            background-position: center !important;
    }

    I still don't know if it will work - which plugin did you use for the header?


    Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
    I provide development and training services for designers • Find me on Twitter and Google+

    November 1, 2013 at 10:42 am #70325
    liannef
    Member

    Genesis simple headers is the plugin I used....

    November 1, 2013 at 10:48 am #70328
    nutsandbolts
    Member

    It actually might be easier to do this without the plugin. Try deactivating it, remove the custom header rule I had you put in before, and try this instead for the #header part of your stylesheet:

    #header {
    	background: url(http://themakeupgirl.net/wp-content/uploads/2013/10/TMG_Header1.jpg) center no-repeat !important; 	
    	margin: 0 auto; 	
    	min-height: 155px; 	
    	overflow: hidden; 
    	width: 100%;
    }

    (Be sure to grab all of that - it scrolls to the right a bit)


    Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
    I provide development and training services for designers • Find me on Twitter and Google+

    November 1, 2013 at 11:17 am #70329
    liannef
    Member

    THAT DID IT!! Thank you SO SO SO SO much Andrea!!

    -Lianne

    November 1, 2013 at 11:18 am #70330
    nutsandbolts
    Member

    Woohoo! So glad it worked!

    If you don't mind, please mark this topic as resolved so we'll know you've been helped. 🙂


    Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
    I provide development and training services for designers • Find me on Twitter and Google+

    November 1, 2013 at 12:29 pm #70335
    liannef
    Member

    DONE....thank you again!

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The forum ‘General Discussion’ 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

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