WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Help in adjusting the header's height to a smaller size (12 posts)

  1. Mia1031
    Member
    Posted 2 years ago #

    Hi, I wanted to know how to adjust the header to a smaller size? I've been going in the CSS section and changing the px and % size to a smaller size under headers. Please let me know if someone can help.

    Thank you!

  2. Arie Putranto
    Member
    Posted 2 years ago #

    Almost there.
    What theme do you use, and how exactly the CSS for it?

  3. Mia1031
    Member
    Posted 2 years ago #

    HI Arie,

    I use twenty eleven right now.
    This is what it says so far.
    Can you adjust the size to a smaller height?

    /* =Header
    ----------------------------------------------- */

    #branding {
    border-top: 2px solid #bbb;
    padding-bottom: 10px;
    position: relative;
    z-index: 9999;
    }
    #site-title {
    margin-right: 270px;
    padding: 3.65625em 0 0;
    }
    #site-title a {
    color: #111;
    font-size: 30px;
    font-weight: bold;
    line-height: 10px;
    text-decoration: none;
    }
    #site-title a:hover,
    #site-title a:focus,
    #site-title a:active {
    color: #1982d1;
    }
    #site-description {
    color: #7a7a7a;
    font-size: 14px;
    margin: 0 270px 3.65625em 0;
    }
    #branding img {
    height: 100px
    margin-bottom: -7px;
    width: 100%;
    }

    Let me know!

  4. Arie Putranto
    Member
    Posted 2 years ago #

    #site-description {
    	color: #7a7a7a;
    	font-size: 14px;
    	margin: 0 270px 3.65625em 0;
    }

    to:`

    #site-description {
    	color: #7a7a7a;
    	font-size: 14px;
    	margin: 0 270px 10px 0;
    }

    that will reduce the height below the site description to 10 pixel.

    and

    #site-title {
    margin-right: 270px;
    padding: 3.65625em 0 0;
    }

    to

    #site-title {
    margin-right: 270px;
    padding: 10px 0 0;
    }

    which will reduce the padding above the site title to 10px

    Also you need to adjust the top value search form which is affected by the changes.

    #branding #searchform {
        position: absolute;
        right: 7.6%;
        text-align: right;
        top: 25px;
    }

    Hope it helps

  5. Mia1031
    Member
    Posted 2 years ago #

    Hi Arie,

    Sorry but it doesn't seem to work?
    It didn't do anything actually.

    /* =Header
    ----------------------------------------------- */

    #site-description {
    color: #7a7a7a;
    font-size: 14px;
    margin: 0 270px 10px 0;
    }

    #site-title {
    margin-right: 270px;
    padding: 10px 0 0;
    }

    #branding #searchform {
    position: absolute;
    right: 7.6%;
    text-align: right;
    top: 25px;
    }

    Followed your suggestion but it didn't do anything
    Do you have to change the margin of headings or any other changes I need to make?
    Let me know

  6. Arie Putranto
    Member
    Posted 2 years ago #

    Well I've tried that myself and it works fine.
    Could you give me a link to your site so I could inspect further?

  7. Mia1031
    Member
    Posted 2 years ago #

  8. Arie Putranto
    Member
    Posted 2 years ago #

    I have check your site and it turns out that the Header Image is hard coded to 1000px width and 500px height. That's why the CSS adjustment not working.

    Maybe this will works. Try:

    #branding a img {
       height: 100px;
    }

    Or maybe you can change the image with another image which has less height. Say it 1000px x 200px. That would be fit right.

  9. Mia1031
    Member
    Posted 2 years ago #

    Thank you so much Arie, you're the best.
    You were right, it worked.

    Now, the search did adjust with the changes.
    Do you think you can teach me how to put it in the right spot where all the headings are located?
    I've tried to adjust it like you suggested previously, but it didn't work either
    Please let me know!

  10. govpatel
    Member
    Posted 2 years ago #

    Default for Twenty eleven theme is 1000px by 288px and you have 1000px by 549px you must have uploaded the custom image that size if upload image that smaller then you will have that size as custom header.

  11. Arie Putranto
    Member
    Posted 2 years ago #

    Mia,

    For the Searchform, here's what you need to adjust.

    Find below code on the style.css

    #branding .with-image #searchform {
        top: auto;
        bottom: -27px;
        max-width: 195px;
    }

    Adjust the top value to fit your site and set the bottom value to 0;
    You may as well add right: (some value) to it for better adjustment.

  12. Mia1031
    Member
    Posted 2 years ago #

    Sorry Arie,
    It doesn't seem to work.
    Can you please give me the CSS code with the exact px?

    Sorry!!

Topic Closed

This topic has been closed to new replies.

About this Topic