How to Create Extra Space Between Header Navigation and The Main Body In Blogger

If you are a regular follower of this blog, you would have noticed that the template was changed recently. This was done in order to maintain its design simplicity, uniqueness and easy navigation both on mobile and the desktop view. The template is a default blogger template with a lot of tweaking. Should you need the look-alike template for your blogger blog, do hesitate to use the contact us page.

When customizing the template, creating an extra space between the header section and the main body of the blog was one of the challenges I faced. How was it solved? I had to play with my css skills and voila, I got it solved. It's so cool trying things out, Isn't it?

Creating Extra Space Between Header Navigation and Main Body In Blogger

  • Login to your blogger dashboard
  • Select the blog you want to work on (optional: If you got more than one blog)
  • Backup your blogger template before editing
  • Navigate to "Layout"
  • Click on "Template Designer" (Located at the top of the Layout Page)
  • Navigate to "Advance"
  • Scroll down and locate "Add CSS"
  • Add these line of CSS codes

.main-inner {
margin-top: 14px;

  • You can change the digits in red to suit what you need
  • Done.
This is all about creating extra space(s) between the header-navigation section and the main body of a blogger blog. Should you clarification on the discussed topic, do not hesitate to the comment section.

Read More »