Header size

Permalink Browser Info Environment
Hi James, where can I change the header size (height) of the home page template?

Thanks!

Type: Discussion
Status: In Progress
ZillionProductions
View Replies:
c5box replied on at Permalink Reply
c5box
Hello,

Changing the header height would require some CSS. I've added a few features to the header so it might be kinda tricky to edit it without affecting other elements.

What are you planning to do?

Regards,
James
ZillionProductions replied on at Permalink Reply 1 Attachment
ZillionProductions
Hi James, would it be possible to add these options to the CUSTOM DESIGN options:

Background header HEIGHT
Top menu full HEIGHT (height of the menu when fully expanded)
Top menu small HEIGHT (height of the menu when it gets thinner when scrolling)

See attachment.

Would be really helpful!!
c5box replied on at Permalink Reply
c5box
Hi,

Thanks for the review. I'll consider the options you need for the next update but it is not that simple to adjust as a lot of elements all depend on one another. Editing one would mean editing a lot others. For now, might be best to use CSS and add it to the custom CSS area in the customization panel. Let me know if you need help with some CSS coding. I am kinda swamped at the moment with other projects but I'll be sure to set side time to help.

Regards,
James
ZillionProductions replied on at Permalink Reply
ZillionProductions
Hi James, you're very welcome, the template is really nice!
I understand it might not be as simple as it seems, but I appreciate your time in thinking about this. Would you be able to write the CSS to add to custom code in order to change the header size?

Thanks in advance.
c5box replied on at Permalink Reply
c5box
Hello,

Sure, I'll try to help out as best I can as long as it won't take a huge chunk of my hours. Let me know how tall you want the header. Screenshot or mockup would be appreciated.

Thanks,
James
ZillionProductions replied on at Permalink Reply 1 Attachment
ZillionProductions
Hi James, thanks for the help and no I'm sure it won't take long. Let's say I want the header to he 'half the size it is now'. So I'm talking about the main header of the full page template as you can see form the screenshot.

That's it!

Thanks again ;)
pim75 replied on at Permalink Reply
pim75
Hello; are there any updates on this ?? I would also like to have the header about 3/4 of the size; so you will at entering the site always see there's some content underneat...

Greetings, Pim.
c5box replied on at Permalink Reply
c5box
Hi,

You can make the banner area auto resize it's height based on the content inside. To achieve this try adding this to your custom css in the customization block panel:

.page-template-home #banner {
    height: auto;
    padding: 100px 0 50px;
}


Adjust the padding to your preference.

Another thing to note is that the background video will still be running on full screen (in the background) even if the banner is resized. So please adjust your video accordingly.

Thanks and regards,
James
ZillionProductions replied on at Permalink Reply 2 Attachments
ZillionProductions
Hi James, i tried adding this to the custom css, but it doesn't do anything. My page design is set to 'Home' (see attachments. The banner is still huge in height, I would like it to be at least 1/3.

Thanks,
Luca
ZillionProductions replied on at Permalink Reply
ZillionProductions
Hi James, any chance you can help me with this soon? I need to finish the website but the height of the banner heading is too big...

Thanks!
c5box replied on at Permalink Reply
c5box
Hi,

Sorry I wasn't able to get back to this thread for a while.

Anyway, the following code should resize the home banner to 1/3 of the size unless the content occupies more space. Add this code to the custom css in the customization panel.

.page-template-home .master-container #banner {
    height: 33vh !important;
    padding: 30px 0 !important;
}


Another thing to note is that even with the banner resized to third of its size, the video will still try to occupy 100% of the height in the background.

Thanks and regards,
James
ZillionProductions replied on at Permalink Reply
ZillionProductions
Hi James, excellent, this worked ;)

Thanks very much,
Luca

concrete5 Environment Information

Not required

Browser User-Agent String

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/601.7.7 (KHTML, like Gecko) Version/9.1.2 Safari/601.7.7

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You may not request a refund that is not currently owned by you.