Change size of Logo image without affecting Header image

• 

  markyork67 · Member · Jul 18, 2017 at 7:20 pm

  • Copy link
  • Add topic to favorites

  I’m trying change the size of the Logo image but setting any height on the image changes the height of the entire header. I want the logo to match the height of the Header image.

  I’ve tried various values for max-height:

  .header .logo img {
  	max-height: 300px; }

  but as I said above, any change I make to that CSS rule affects the size of the entire header.

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Jul 19, 2017 at 2:45 am

  • Copy link

  Hi there, the .header div has a top and bottom padding on it. What you will want to do is to take half the height increase you make in your logo image and subtract that to the 70px top/bottom padding. Given you are going from 80px max-height to 300px, you will probably want to change the top/bottom 70px padding to 0.

  .header {
      padding: 70px 0;
  }

  You can then play with the logo image max height as desired.

  You know though, I like a bit of the header image showing above and below the logo better than having the logo breaking the header image into two pieces left and right of the logo.