Get ideas & inspirations delivered to your inbox. You won't want to miss a thing, so subscribe free to the Blog Feed or sign up for Free Email Updates on the latest projects, shop news, blog tutorials & more. Check out the Project Gallery, Garden, Recipes & Inspirations tabs above, to see what you have missed. Browse through the sidebar for this week's Popular Posts!
**Please note: Some links may be broken, if this happens, please let me know which post & search for the title of a post on the search tab on the right while I work on fixing the problem.---->

How to Lower Your Tabs on Blogger

This tutorial is for Blogger blogs and serves for decreasing the amount of space between your "header" and "tabs" or increasing the space between the header and tabs.

Lower tabs on blogger

*Please note that not all templates are the same and they may vary in HTML codes.  If you have a set template, that is one that you have purchased from a designer, it may not work for you and you may have to contact that designer for adjustments. 

First, sign into your blogger account.  

1. Click on the blog that you wish to make the changes to on your dashboard.
2. You will be taken to your blog "Overview" screen, look at the list on your left and click on "Template".



3. On your Template screen, click on the "Edit HTML" button.


4. This will take you to the HTML editing screen.  This is where you will make your HTML code changes.  Before doing anything, make sure that your current template is saved. 

5. Make sure that the numbers on the left of your codes are all visible, that way you know if a line is missing. All the numbers should be visible.  If you notice that the numbers skip, you may see a small arrow next to that number, click on it and all the numbers should pop up.

6. Now that all your numbers are visible, scroll down to the "Tabs" section of your template code.  Each section has the title of that section. 



7. Scroll below the "tabs" title and look for " margin-top" in the border section of the tabs.


It may look something like this:

.tabs-inner .section:first-child ul {
margin-top: -1px;
border-top: 0px solid #ffffff;
border-left: 0 solid #ffffff;
border-right: 0 solid #ffffff;

* Note: There may be more than one "margin-top" section.  Make sure it is under the "border section" of your tab code.  Remember, not all templates will have this.

8. The number displayed may be "0" or a negative number; to increase the amount of space between your tabs and header, increase the number on your margin- top.  

For example:

 .tabs-inner .section:first-child ul {
margin-top: -1px;
border-top: 0px solid #ffffff;
border-left: 0 solid #ffffff;
border-right: 0 solid #ffffff;

9. Change the -1px to perhaps 8px.

 .tabs-inner .section:first-child ul {
margin-top: 8px;
border-top: 0px solid #ffffff;
border-left: 0 solid #ffffff;
border-right: 0 solid #ffffff;

 10. Then view it on your blog by clicking on your "preview template" tab.  DO NOT save yet!



Do not save anything until you are certain of the amount of space you want.  If you need more space continue to increase the number.  

If you want less space, decrease the number.  Play with the numbers until you are satisfied with the look of your tabs.  When you reach your final decision, save your work by clicking the "Save template" tab.  You are now done.

If you have any questions, please contact me or leave a comment below.






Pin It button on image hover