Header size
Permalink Browser Info Environment
Hi James, where can I change the header size (height) of the home page template?
Thanks!
Thanks!
Type: | Discussion |
---|---|
Status: | In Progress |
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!!
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!!
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
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
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.
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.
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
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
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 ;)
That's it!
Thanks again ;)
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.
Greetings, Pim.
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:
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
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
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
Thanks,
Luca
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!
Thanks!
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.
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
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
Hi James, excellent, this worked ;)
Thanks very much,
Luca
Thanks very much,
Luca
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