• 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

Making Header Logo Larger in Education 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 › 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 7 years ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • September 17, 2013 at 8:54 am #62981

    lgeraty
    Member

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

    http://harrisfamilychiropractic.com/site/
    September 17, 2013 at 9:56 am #62988

    braddalton
    Participant

    Whats the exact size of your new logo?


    2600 Genesis Tutorials

    September 17, 2013 at 10:14 am #62995

    lgeraty
    Member

    286 width by 150 height

    🙂

    September 17, 2013 at 10:18 am #62998

    braddalton
    Participant

    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.


    2600 Genesis Tutorials

    September 17, 2013 at 11:09 am #63012

    braddalton
    Participant

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


    2600 Genesis Tutorials

    December 30, 2013 at 10:00 am #82064

    SueCrawford
    Participant

    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!!

    December 30, 2013 at 11:11 am #82095

    braddalton
    Participant

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


    2600 Genesis Tutorials

    February 6, 2014 at 11:10 pm #89087

    lgeraty
    Member

    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!

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 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

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