Header Fills Whole Page

Hey there trulymadlysalsa,

Hope you’re well! ??

I suggest you use a child theme https://codex.www.ads-software.com/Child_Themes or use css custom plugin like this: https://www.ads-software.com/plugins/simple-custom-css/ if you will customize your theme.

Add the code in your child theme’s style.css or using the plugin mentioned above.

#masthead {
  height: 300px!important;
}

Note: I use !important but this is not to be used all the time.

Hope it helps! ??

Take care,
Calvin

We’ve also added an option in the latest version to display the menu before the header image. See Customize > Menu.

Calvin – I added your custom CSS via the plugin you mentioned. It works great, however it also seems to override the setting in the Customize menu that says,
“Check this box if you want to disable the header image and text on all pages except the front page.”

Then all pages have a blank space of the defined header height. Is there a way to set the header only for the front page, and to retail the functionality of this check box in customize menu?

That way if the box was checked, there would be no header that loads on any of the other pages, and if the box was left unchecked, the header would be there…

This should do it:

#masthead {
  max-height: 300px !important;
}

Fantastic. That did the trick perfectly ??
Thank you!

Hello,

Thanks for this thread- I was having the same issue.
However I’d like to try the option that vladff mentioned which allows you to display the menu before the header image. I just can’t seem to find it under appearance>customize or appearance>menus. Or maybe I’m looking for an option that is only available in the pro version?

Thanks in advance!

Just realised I wasn’t using the updated version- sorry about that, and thanks for including this option!

Hi Guys,

I have been looking at this for a bit and changing the mast head values is good but it only adjusts the height of the area over the image itself (does not modify image). I have been using this to achieve scaling to different viewing area sizes but I would really like to be able to scale the actual image to the screen size.

‘
“@media (min-height: 300px) {
#masthead {
max-height: 200px
}
}
@media (min-height: 600px) {
#masthead {
max-height: 480px
}
}
@media (min-height: 800px) {
#masthead {
max-height: 680px
}
}
@media (min-height: 1000px) {
#masthead {
max-height: 880px
}
}
‘

Sorry I can’t include a link as it’s offline, but can adjustments to the actual dimensions of the image be made; as in to stretch it to the size of the viewing area?

Pfundty

The image is actually a background image on big screens and it’s set to cover the whole header. You can set it to contain if you’d like:

.has-banner:after {
      background-size: contain; /*or you can add percentages here 80% etc.*/
}

We’ll also add some options for this in the next version.

Hey Vladd,

Unfortunately that code appears to have no effect. I will have a better look tomorrow and confirm this. Great theme though ??

Pfundty

Sorry, add it like this:

.has-banner:after {
      background-size: contain !important; /*or you can add percentages here 80% etc.*/
}

First of all, this is a brilliant theme. Thank you for making it.

I found this thread because I also wanted to shrink the height of the header just enough to make the menu bar show at the bottom of the screen. Since I don’t know how people will have their browsers sized, I’d prefer to use percent, but if I plug a percentage into #masthead height, it’s always sized to 100% of the browser height. Is there anything to do about this?

That would be better discussed in a new thread: https://www.ads-software.com/support/theme/moesia#postform

Hi there,

I tried to do exactly what Vlad laid out in the steps above, but it didn’t work. The header image just disappeared. Can you please help!

Thanks!
Janell