Trouble Changing header.site-header CSS

Homepage Community Forums Epik Theme Support Trouble Changing header.site-header CSS

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #7746
    jbellison
    Customer

      I’m having trouble changing my site-header’s height. I’ve opened it in the elements inspector in Chrome and I can verify where the element is located in CSS (I believe its header.site-header). It’s the very top-most portion of the page with the site title and the navigation bar. I want to shrink its height by about 20 px.

      I’ve tried changing just about every conceivable CSS selector and nothing seems to work. I’m thinking it must be overridden somewhere, maybe its size is being set in a php file somewhere, I don’t know.

      Any advice as to how to change the height of the site header would be hugely appreciated.

      #7757
      Wes
      Moderator

        If you’re uploading an image and want to change the size you can upload, then that can be found in your functions.php file. Do you have a link to your site so I can see what all you’ve done so far? I can tell you were the css is that controls the height as well.

        #7771
        jbellison
        Customer

          wwww.johnwebsites.com is the link. You can see that having uploaded my header image, the entire header wrap section is bloated. I’ve tried using different height settings and changing the navbar header-right widget clear properties but nothing seems to work. I thought i’d have you take a look at it before I spend too much on trial and error.

          Thank you very much for your time Wes, I greatly appreciate it.

          #7791
          Wes
          Moderator

            There are a couple ways you can handle this.

            The easiest way (probably) is to recreate your image, and add space at the top of it so it doesn’t appear at the very top of the site.

            The other way is to add padding to the top of the “.head-wrap” since that’s what the header is inside of, and the “.head-wrap” is what shows the background you see. In order to do this, I would adjust the padding of the “header right” widget area so everything lines up. Here is the exact code to edit –

            1. Add padding to the .head-wrap on line 1916 in your css –

            .head-wrap {
                background: #303236;
                margin: 0px 0 40px;
                padding: 20px 0 0;
            }

            2. Adjust the padding on the header right widget area code on line 2017 –

            .header-image .site-header .widget-area {
                padding: 10px 0 20px;
                padding: 0.625rem 0 1.25rem;
            }

            Doing the above should give you this result – http://i.imgur.com/IK8Ricm.png

            Let me know if that works.

            BTW Your site is looking pretty good so far! Definitely let me know when its done so I can add it to the Showcase thats coming soon.

            #7819
            jbellison
            Customer

              That’s perfect Wes. Thank you very much. I implemented the above CSS in 30 seconds and got all the positioning right. Now my only tweak would be to shrink the size of the container, the blue background area by about 10px on top and bottom of the header image / header right.

              Given the visual appearance of the header comes from several different elements, how do I know which one to modify to get my desired change?

              Thank you again for your time.

              #7823
              jbellison
              Customer

                Changed:

                .head-wrap { padding: 5px 0 0; }

                and

                .site-header { margin: 0 auto -10px; }

                now it’s looking nice and slim. Solved.

                #7843
                Wes
                Moderator

                  You’re Welcome! Just let me know if you need anything else.

                Viewing 7 posts - 1 through 7 (of 7 total)
                • The topic ‘Trouble Changing header.site-header CSS’ is closed to new replies.