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.
<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