Header height increases when I add a small header logo

Homepage Community Forums Epik Theme Support Header height increases when I add a small header logo

Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #16108
    2chihuahua
    Customer

      I added a header image in place of the site title, and the header got a lot taller. It’s even worse when I reduce the browser size to enable the mobile view.

      Why is this and how can I change it? I seem to be able to make it bigger by increasing the min-height, but it won’t get smaller…

      And why doesn’t the image center when in mobile view like the default site title does?

      Thank you!!

      notyourdadscpa.com

      #16109
      Wes
      Moderator

        First you can change the height to 65px since that is the same height as your logo. This can be found around line 2044 and it looks like this –

        .header-image .site-title a {
        	float: left;
        	min-height: 65px;
        	width: 100%;
        }

        Next I would reduce the padding on line 2064 from 40px to 10px –

        .header-image .site-header .widget-area {
        	padding: 10px 0;
        }

        Now you’ll need to add some space on top and bottom of the logo and menu. You can do that by adding padding: 20px 0; to line 1975 like this –

        .site-header {
        	margin: 0 auto;
        	max-width: 1140px;
        	padding: 20px 0;
        }

        To have your logo center on Mobile devices just add the following code to the Responsive section of your CSS file. It should be after line 4077 and added inside the section labeled –

        /* iPads (portrait)
        --------------------------------------------- */
        
        @media only screen and (max-width: 1023px) {

        You can add this code in the section above

        .site-header .site-title a {
        	background-position: center top !important;
        	float: none;
        }

        I know that seems like a lot, but this is the way it has to be done in all Genesis themes since everyone has a different logo size. Some want their logo large, small, centered, floating to the left, etc. So that’s why we have to customize the CSS to get it working the way users want it.

        Here is how everything should look once you make these customizations – http://i.imgur.com/N5iusoy.png

        Here is how it will look on mobile devices –

        http://i.imgur.com/weUGbGT.png

        Let me know if you get everything working. If you need me to login and quickly add these in for you just let me know.

        #16113
        2chihuahua
        Customer

          That worked perfectly thank you!

          Although I’m a little confused why I reduced the site-header padding on line 2064 to 10px and then increased the site-header padding to 20px on line 1975 like you said. Do those commands not conflict?

          #16114
          Wes
          Moderator

            Those are actually 2 different sections. The first section covers a “div” inside the header section that adds padding by default. The .site-header is the div above that. If you look at the Source Code of your site you can see the order of how all the div sections appear.

            I just Reloaded your site and everything looks great on my end. Great job!

            If you have any other questions/issues feel free to post!

          Viewing 4 posts - 1 through 4 (of 4 total)
          • You must be logged in to reply to this topic.