Making Header Logo Larger in Education Theme

Community Forums Forums General Discussion Making Header Logo Larger in Education Theme

This topic is: not resolved

This topic contains 7 replies, has 3 voices, and was last updated by  lgeraty 2 months, 2 weeks ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #62981

    lgeraty
    Participant
    Post count: 7

    How would I go about changing the logo size in my header in the Education Theme?

    http://harrisfamilychiropractic.com/site/
    #62988

    braddalton
    Participant
    Post count: 7473

    Whats the exact size of your new logo?


    WordPress Developer & Consultant
    Brad Dalton400+ StudioPress Tutorials & 1200+ Code snippets

    #62995

    lgeraty
    Participant
    Post count: 7

    286 width by 150 height
    :)

    #62998

    braddalton
    Participant
    Post count: 7473

    332 x 83 is the default size for theEducation themes logo.

    Simply upload your new logo or image to your child themes images folder and remove the default.

    Your new image needs to be named logo.png.

    If your logo height is larger, you will need to increase several values for the height in your child themes style.css file:

    Line 183

    #header {
    	background-color: #fff !important;
    	background-position: center top !important;
    	border-top: 4px solid #eee;
    	margin: 0 auto;
    	min-height: 120px;
    	width: 100%;
    }
    

    Line 246

    .header-image #title-area,
    .header-image #title,
    .header-image #title a {
    	display: block;
    	float: left;
    	height: 120px;
    	overflow: hidden;
    	padding: 0;
    	text-indent: -9999px;
    	width: 400px;
    }
    

    Max width for the logo is 400px otherwise you will need to change the width in your style sheet if its wider.

    Line 196

    #title-area {
    	float: left;
    	overflow: hidden;
    	padding: 27px 0 0;
    	overflow: hidden;
    	width: 400px;
    }
    

    Line 250

    .header-image #title-area,
    .header-image #title,
    .header-image #title a {
    	display: block;
    	float: left;
    	height: 120px;
    	overflow: hidden;
    	padding: 0;
    	text-indent: -9999px;
    	width: 400px;
    }
    

    Then reduce the width for the header right widget by the same amount you increased it above 400px for the width of your logo:

    Line 230

    #header .widget-area {
    	float: right;
    	min-height: 95px;
    	padding: 25px 0 0 0;
    	position: relative;
    	width: 740px;
    }
    

    If you new logo is 500px width, you would change the value for the header right widget to 640px in the code immediately above.


    WordPress Developer & Consultant
    Brad Dalton400+ StudioPress Tutorials & 1200+ Code snippets

    #63012

    braddalton
    Participant
    Post count: 7473

    You’ll also need to go to Appearance > Header > Header Text and make sure Show header text with your image is unchecked.


    WordPress Developer & Consultant
    Brad Dalton400+ StudioPress Tutorials & 1200+ Code snippets

    #82064

    SueCrawford
    Member
    Post count: 8

    I’m following along here since this is what I want to do also. It works great, but now how do I get the navigation in the Header Right widget to drop down to meet the top of the color block?

    Thanks!!

    #82095

    braddalton
    Participant
    Post count: 7473

    I would start a new topic for this question because it will get more exposure and anwsered faster,


    WordPress Developer & Consultant
    Brad Dalton400+ StudioPress Tutorials & 1200+ Code snippets

    #89087

    lgeraty
    Participant
    Post count: 7

    Brad,

    Okay, I think I am close to figuring this out but I seem to be off on my width settings a bit. I decided to make the logo 380 X 110 and I’m still having issues.

    It keeps cutting my logo off and forcing me to crop it.

    Any ideas?

    Thanks!

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

You must be logged in to reply to this topic.