Center Header in Mocha Theme

Community Forums Forums General Discussion Center Header in Mocha Theme

This topic is: resolved

Tagged: ,

This topic contains 10 replies, has 2 voices, and was last updated by  liannef 10 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #70202

    liannef
    Member
    Post count: 39

    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
    #70262

    nutsandbolts
    Moderator
    Post count: 3128

    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, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #70316

    liannef
    Member
    Post count: 39

    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%;
    }
    • This reply was modified 10 months ago by  liannef.
    • This reply was modified 10 months ago by  liannef.
    #70317

    nutsandbolts
    Moderator
    Post count: 3128

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


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

    #70319

    liannef
    Member
    Post count: 39

    Done – code back in

    #70320

    nutsandbolts
    Moderator
    Post count: 3128

    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, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #70325

    liannef
    Member
    Post count: 39

    Genesis simple headers is the plugin I used….

    #70328

    nutsandbolts
    Moderator
    Post count: 3128

    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, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #70329

    liannef
    Member
    Post count: 39

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

    -Lianne

    #70330

    nutsandbolts
    Moderator
    Post count: 3128

    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, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #70335

    liannef
    Member
    Post count: 39

    DONE….thank you again!

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.