Reducing the height of the website header

  • Resolved aplusr

    (@aplusr)


    9 years, 9 months ago

    Hi All,

    I purchased a Genesis child theme (https://tailor-made.yoastdemo.com/) which is great except that there is too much white-space vertically (height-wise) in the header since my logo isn’t as tall as the child theme demo logo (“Tailor Made” at the top and to the left).

    What code do I add to style.css of the child them in order to reduce the height of the header?

    The inspect element feature of my web browser tells me that header.site-header is currently 1920 pixels by 184 pixels. The 1920 looks like it’s relative to the screen resolution but the 184 appears to be the height that I would like to reduce.

    Cheers,

    Andy

Viewing 5 replies - 1 through 5 (of 5 total)

  • Do You have .site-header class with height set in Your stylesheet.css ?

    Thread Starter aplusr

    (@aplusr)

    no, I tried adding that after the comments but I think I may have gotten the code wrong to be honest

    Thread Starter aplusr

    (@aplusr)

    I’ve tried:

    .site-header {
    height: 150px;
    }

    and

    header.site-header {
    height: 150px;
    }

    – for example but those don’t seem to work

    Thread Starter aplusr

    (@aplusr)

    Actually, never-mind me. Both

    .site-header {
    height: 150px;
    }

    and

    header.site-header {
    height: 150px;
    }

    work using the Simple Custom CSS plugin rather than the editing the style.css file from the Editor for some reason

    Thread Starter aplusr

    (@aplusr)

    The code:

    .site-header .site-title a {min-height:105px;}

    actually worked the best as other elements like nav.nav-primary remain the same size

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Reducing the height of the website header’ is closed to new replies.