Make Static Header Banner Smaller

Developer Support CMS Development
1

Hi all,

I’m having some issues with the static black banner being way too wide when I scroll. It doesn’t appear like this on a larger computer screen but I can barely see the content this way.

Is anyone able to direct me to the code or help me make this smaller?

Link is: https://biild.co.uk/

Thanks.

Screenshot_20230201_151541.jpg
Screenshot_20230201_151541.jpg1920×903 146 KB

2

Hi @HBarden,

open the theme-override.css in your theme folder and search for header.header class which is inside the media-query (min-width:992px)

there’s a padding information - if you change the first number the header will be smaller.

Here’s the code how the browser displays it:

@media (min-width: 992px){
...
header.header {
 background-color: transparent;
 padding: 40px 20px;
}
...
}

If there’s a hubl like {{ theme.header.desktop.padding }} like this

@media (min-width: 992px){
...
header.header {
 background-color: transparent;
 {{ theme.header.desktop.padding.css}}
}
...
}

you can edit the height/padding directly from the theme settings here:

settings(cog icon in top right corner) → website → theme ->YOUR THEME NAME

best,

Anton

3

Thank you so much!