Reduce Unused Header Space in the Seranade Theme

QuestionsCategory: CustomizationReduce Unused Header Space in the Seranade Theme
stephen szot asked 6 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 6 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 6 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 6 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!

“Would You Like To Get FREE Weebly Tips, Tricks and Tutorials on Making Your Weebly Website The Best It Can Be?”

Now you can! Simply sign-up for our blog newsletter  below and we’ll send you some of the most powerful tips  and information to your Inbox completely free!

You have Successfully Subscribed!

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