Reducing header wrap size on Sydney theme

  • I’m trying to reduce the size of the black area at the top of the page – the bit which appears after you scroll down (that I can’t see any reason for it being that big!)

    I’ve managed to reduce it with the following:

    #masthead {
    height: 40px;
}

    But there is a problem – when it shrinks to mobile size, I’ve got the hamburger positioned OK, but the menu that appears when you click on it appears half way down the page. I’ve tried to alter it by altering the height of header-wrap, but that doesn’t alter where the menu starts. Can anyone help?

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

  • Would you mind sharing your site URL?

    You’ll probably have to use a media query to make another adjustment for mobile widths.

    Hello there,

    To maintain the height of header on mobile, try to apply the following CSS code. 

    @media only screen and (min-width:1025px){

  #masthead {
     height: 40px;
  }  

}

    Regards,
    Kharis

    Thread Starter djaychela

    (@djaychela)

    Hi. I’ve tried that code (in fact, I’d actually altered the masthead height by using the same code but without the media query), and it’s not made any difference – the menu entries (on mobile or narrow width window on desktop) appear after a gap below the hamburger.

    The site is for someone I work with, I’ve just been helping him out with it:

    https://www.paulcolman.net

    Thanks

    Please remove the unwrapped code. 

    #masthead {
    height: 40px;
}
    Thread Starter djaychela

    (@djaychela)

    Hi

    I’ve done that, but the problem is then that when the width is 1024 or less, you get the big black banner there that I don’t want – it’s taking up space needlessly; what I want to do is move the menu entries to the top of the screen (as they are when the width is under 1024, but before it gets to the final width, which looks to be about the 750px width or so)

    Hello there,

    I noticed that there is custom CSS code padding-bottom: 109px; applied for h2 tag. It shares to the site description, h2.site-description and it makes the header bar gets expanded that height. To prevent it, please apply the following CSS code: 

    h2.site-description{
  padding-bottom: 0;
}

    Regards,
    Kharis

    Thread Starter djaychela

    (@djaychela)

    Brilliant. works a treat, he’s very happy – thanks!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Reducing header wrap size on Sydney theme’ is closed to new replies.

Tags