Reduce Unused Header Space in the Seranade Theme

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

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