CMS Development

HBarden
Participant

Make Static Header Banner Smaller

SOLVE

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.png

0 Upvotes
1 Accepted solution
Anton
Solution
Thought Leader

Make Static Header Banner Smaller

SOLVE

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

 

 

Anton Bujanowski Signature

View solution in original post

0 Upvotes
2 Replies 2
HBarden
Participant

Make Static Header Banner Smaller

SOLVE

Thank you so much! 

Anton
Solution
Thought Leader

Make Static Header Banner Smaller

SOLVE

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

 

 

Anton Bujanowski Signature
0 Upvotes