Reduce Unused Header Space in the Seranade Theme

QuestionsCategory: CustomizationReduce Unused Header Space in the Seranade Theme
stephen szot asked 8 months ago

Hello,
I’d like a way to reduce the unused vertical header space in the Seranade theme to only cover my logo & menu.  I attempted to edit the main_style.css file #header area but it unfortunately negatively impacts the placement of the mobile menu bars.
Thank you in advance for any suggestions!

stephen szot replied 8 months ago

Forgot to mention that I’m using Seranade version 2.0. Site is http://stpetersschoololney.weebly.com/ where you can see the default height of the Seranade header uses more space that we’d like. Attempting to reduce the #header height from 100 px to 1px results in a slightly narrower header area however when viewed from mobile the menu bars are misplaced and unusable. Thanks again for any thoughts n ideas!

2 Answers
Best Answer
Baamboo Studio Staff answered 8 months ago

Hi Stephen,

To reduce the unused vertical header space in the Seranade theme, you need to edit the main_style.css file, #block-header area.

Your #block-header has default property: “padding: 80px 80px;” .

I reduced the space by replacing “padding: 80px 80px;” with “padding: 0 !important;“.

You could see the changes I made in main_style.css file, #block-header.

I hope that helps.

stephen szot answered 8 months ago

Quang you rock!  Thank you very much for the top notch service in providing a thin header update!  Baamboo Studio is my #1 template site for Weebly development!

Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match