How to Shift Blogger Navigation Tabs to the Top of Page

Are you looking for a way to move navigation Page Bar above the header of your blog? You've come to the right place! Today many bloggers aspire to give their blog an exceptional look and that is why they are always in a try to break a new ground. Isn't it! Normally in a blogspot blog the navigation page tabs appear below header but you want to place them above header to mark a more professional look. Out with the old and in with new. Also in other professional and social media sites, we can see menu bars at the top. So we decided to teach you a simplest trick to make your blogger tabs bar the top-most part of page. Have a look!

This post includes two parts; first part explains, how to move tabs up above header and second part explains, how to make them sticky.

Part A: Moving your Tabs above Header

1. Head to the TEMPLATE section.
2. Click EDIT HTML.
3. Search for the code </header>
4. Copy and remove the following code just below it.

<div class='tabs-outer'>

<div class='tabs-cap-top cap-top'>

<div class='cap-left'/>

<div class='cap-right'/>

</div>

<div class='fauxborder-left tabs-fauxborder-left'>

<div class='fauxborder-right tabs-fauxborder-right'>

<div class='region-inner tabs-inner'>

<b:section class='tabs' id='crosscol' maxwidgets='1' name='Cross-Column' showaddelement='yes'

<b:widget id='PageList1' locked='false' title='Pages' Type='PageList' visible='true'>...</b:widget>

</b:section>

<b:section class='tabs' id='crosscol-overflow' name='Cross-Column 2' showaddelement='no'/>

</div>

</div>

<div class='tabs-cap-bottom cap-bottom'>

<div class='cap-left'/>

<div class='cap-right'/>

</div>

</div>

 N.B: Remove the above code after copying it. If you paste it to the other section without removing from here you will receive an error message which won't allow you to save the template.

More than one section was found with id: crosscol. Section IDs should be unique 

5. Now search for the code  <header>

6. Paste the copied code right above it.

7. Save the Template and view your blog.

If you see an extra top space above the bar use the following tutorial to reduce it.

Reduce Extra Top Space Above Header   

Part B: Make your Page Bar Sticky

Want to make your navigation/menu bar sticky? Use this method to allow it to stick to the top whenever a visitor scrolls down your blog page. Follow the below steps;

1. Go to the Template Edit Html Section
2. Use Ctrl=F to Search for the code ]]></b:skin>
3. Paste the following piece of code just above it.

.tabs-inner .widget ul {

background: #2ecc71;

border: 0px solid #2ecc71;

text-align: center !important;}

.tabs .widget li, .tabs.widget li{

display: inline;

float: none;}

.tabs-inner .widget {position: fixed; width: 100% ; border-top: 0px,  top: 0px; left: 0px; z-index: 100;} 

4. Mitigation Step:

Replace the color code (mentioned in green in above code) with your tab color.  

5. Hit the SAVE TEMPLATE button and view your blog. 

Last Comments

So we learned an interesting trick today that will surely bring your blog on the crest of wave. We defined two parts here in this post; after completing which you will be able to make tabs sticky and show them up above the blog header. Enjoy the trick and share it with your friends. Have queries regarding this post? Put them into the below comment box. Stay Blessed :)