HTML Tips & Tricks | Moving The Page Navigation Bar

In blogger, the standard templates have fixed have headers, meaning that you cant move your pagebar above your header. However, theres a super easy way to fix this and you don't need to be clued up on html to solve it. 

A standard layout on blogger will look as above. You'll notice that next to the pages widget there is a grey bar, whereas on the header widget there isn't. This means that the pages widget can be moved but the header widget is static. In order to place the pages bar above the header, we need to make the header widget movable. To do this, all we need to do is go to template section on blogger - edit html and in your html, find the following coding;

The line you're looking for is the following;

<b:widget id='Header1' locked='true' title='blog title (Header)' type='Header'
All you need to do is change the text in yellow from true to false - this will unlock the header so you can now move the header below the pagebar.

Just click on the header widget and drag it below the pages widget so it looks like above. Now click save arrangement and your pages navigation bar will now be at the top of your blog.

I hope this was helpful. I'll have some page navigation bar styling tips soon!

check out my exclusive advertiser The Runner Beans


  1. These posts are so helpful, especially for a HTML newbie like me :) xx

  2. Hello! I wanted to tell you how useful your blog has been for me in improving mine. I just mentioned your blog in my most recent post

    Gemma x

  3. Thanks so much! I love when you post blog tips because it helps me learn to do so much on my own! :)

  4. I love html tips from you, I try to get tips off other websites but they aren't as easy to follow as yours - please post more!:) xx


  5. Awesome tip!

  6. Loved this! I'm totally thinking of doing this. I'm interested in the styling tips too as I'm still on the fence about buying a premade template and I'm loving all these tips I'm finding here and there! Thanks for sharing, this is really helpful!

    Gyudy’s Notes Of Beauty

  7. Super Helpful, thank you!

  8. Great tip, greatly appreciated! These posts are so helpful for new bloggers! :)


  9. Thanks for tip, i've always wanted to explore the html side of things but found it rather daunting, please keep the tips coming.

    Diana x

  10. Very helpful! Thanks for sharing


Thank you so much for reading!I read every comment and try to respond.If you have a question you can also email me or tweet me @sweetelectric xoxo