How to move and remove the header gadget on your blog

On Blogger, the header element is locked by default in the Layout Gadget area. This can cause problems when you are re-designing your blog, especially if you want to put something above your header, move it elsewhere or delete it altogether. This tutorial will show you how to unlock your header gadget so that you can move it, delete it and add more gadgets to that section.

Unlocking the Header Element

Go to Template > Edit HTML > Format Template. Search for region-inner header-inner. If you are having trouble finding the code, check out Finding Code in HTML Editor and Understanding CSS.

The search should bring you to this code

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

Under this you’ll see the following code (may look different depending on your template)

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Header' type='Header'>
         <b:includable id='main'>

Alter the value for maxwidgets so it looks like this

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
    <b:widget id='Header1' locked='false' title='Header' type='Header'>
         <b:includable id='main'>

what each section means

maxwidgets='1' – max number of gadgets allowed in that section. Change to any number.
showaddelement='no' – show “add a new gadget” in section. Change to yes.
locked='true' – locked so you can’t delete the gadget. Change to false.

Moving or Removing the Header Element

Now if you go to Layout (you may have to refresh the page), the header element will look like the other gadgets. You can now move it to where you want. To remove it, click edit > remove.

Adding other gadgets above the Header Element

Go to Layout > add a new gadget. You can now re-arrange the gadgets to put ones above the header.

Gap above navigation caused by Blogger Navbar

To remove Blogger navigation bar, go to Layout > NavBar and turn it off. You’ll be left with a blank space. To remove this gap go to Template > Edit HTML and above ]]> </b:skin> add the following

body .navbar { height: 0px; } .content-inner { padding-top: 0px; }

Elements losing styling/CSS when moved above header

Occasionally, putting certain elements above the header will remove the CSS associated with it. Here’s a solution to that. In the layout tab drag your header, navigation and any other gadgets down a little. It will jump to the second level (typically called Cross-Column depending on your template). This shouldn’t effect the look of your blog (as in it will still appear at the top) but it will keep the styling. This image will hopefully explain that better.

move-header gadget Blogger Navigation and Header Sections

Leave a Reply

Thank you so much for taking the time to comment! Your email will not be published or shared but you will recieve an email if your comment has a reply. Need help with a tutorial? Check out our Coding + Consultation service for one-on-one assistance.

67 comments

  1. Lily on

    I changed mine to 3/yes/false but my header element is still fixed at the very top unlike yours. Mine says “header” then “add a element” underneath and the Header element isn’t moving nor does it have dots on the side like yours. My only option would be to insert my header using HTML then arrange them how I want them and just not use the Header element at all. Now sure if this works with the Simple Template.

    Reply
    • Ellie M on

      Hello. Been using this method for years, it works with all Blogger templates. I used the Simple Template for this tutorial ๐Ÿ™‚ Double check that the code saved properly. You may have to refresh the Layout page or clear our browsers cache for the change to take effect.

      Reply
  2. Laura Jarvis on

    Hi, I have done this and moved my pages tab above my header but now my pages tab isn’t in the middle. Do you have a code which will centre them?

    Laura

    Reply
  3. Varnis on

    Hi

    How can I resize the gadget above the header? I need to reduce its height. Thanks.
    P.S. I have added a html gadget above my header.

    Reply
    • Ellie M on

      Hello. Find #header img and replace margin-left: 0; margin-right: auto; with margin: 0 auto; this will centre it within your header space. However the header area is made up of your logo space on the left and the ad space on the right. So to centre the logo to the blog content, you’ll have to remove the code for the ad space.

      Reply
    • Ellie M on

      Actually, an easier way instead of deleting template code (which is below incase you need it) would be to find #header img and replace margin-left: 0; margin-right: auto; with margin: 0 auto;as stated above and then find #header, #adstop in your CSS and change float: left; width: 50%; to float: none; width: 100%;

      The ad space code looks like <div class="header section" id="adstop"></div> if you need it in the future.

      Reply
  4. Alex Samson on

    Thankyou so much! This helped me completely- for a while my blog looked terrible! I was searching everywhere for a simple tutorial but none of them worked for me except yours! Your blog tips are so helpful, please keep posting them! ๐Ÿ™‚

    Reply
  5. Amelia on

    Hi Ellie – When I moved my nav bar above my header, it kept the style but aligned the nav bar to the left and made the text smaller. I tried changing the text size in my HTML but it wouldn’t budge. Any ideas?

    I also tried adding a first layer above my nav bar but that didn’t work either.

    Thanks!

    Reply
    • Ellie M on

      Hello lovely, find #NavMenuleft and add text-align: center; between the brackets. Sometimes when you move it it just can’t read the tabs CSS so we can manually add this font size information back in – find #nav li and add font-size: 14px;

      Reply
  6. Jess on

    Thank you for this tutorial! I got rid of the header and instead just put an HTML box where the header would be so that I could include my social media icons as well as a header, however now there is too much space between my “header” and the pages bar – is there some way I can decrease the amount of space in between them? Thank you! (Btw, ideally I would actually want my social media icons to be in its own nav bar along the width of the screen rather than just a part of my header, but I couldnโ€™t figure out how to do that โ€“ hence my first comment on your blog on making the header the full width.)

    Reply
    • Ellie M on

      Wrap them both in divs (something like <div id="headerimg"> ... </div> <div id="socialnav"> ... </div>) and then you can use margins value to decrease the space, that’s the easiest way ๐Ÿ™‚

      Reply
    • Ellie M on

      Hello. Retested and it’s working fine. Don’t forget to click “save arrangement” once you delete the header. You may need to refresh the layout page also.

      Reply
  7. Katie on

    Thank you so much for this! I spent hours making a custom header with clickable links etc and then I couldn’t figure out how to remove the old one. This worked perfectly and was super easy to understand, thanks again!

    Reply
  8. Essence on

    Thank you so much for this. I thought I was going to be able to wait until I got home but I have already updated my blog. Thanks for making it easy to understand and implement.

    Reply
  9. ryuuji-chi on

    hey, thanks so much! it worked for me! however, ever since i moved my pages above my header, they have become a list of links (the kind you get when you put it in the sidebar) instead of tabs like i want them to be! is there any way i can fix this?

    Reply
  10. Jennifer on

    Hello, I tried this trick, but I too am having trouble with it grabbing out the CSS in the navbar when I move it above the header. I’ve tried moving it all around like you suggested, but nothing seems to work. Do you know what the CSS is supposed to be to make it back to normal? I could just hand-enter it back in, if I knew what it should be.

    Reply
    • Elaine M on

      Hello Jennifer, I’ve just had a look and it’s still in the header section rather than the tabs section. You’d have to change all the tabs code in your template to reflect the position it is currently in since it’s no long using the tabs selector in the CSS.

      Reply
  11. Amy Larkin on

    First of all, thanks so much for all your super helpful and easy-to-follow tutorials! I can’t tell you how many times I’ve consulted your site for help.
    I added an image above my header using an image widget, and now I’m trying to make it a responsive/adaptive/fluid image so it’ll resize depending on the browser. What should I do? I’d really really appreciate the help! Thanks so much, Elaine!

    Reply
  12. Laura scholes on

    Hi there,
    I had such high hopes this would work, but even after trying several times, I can’t get this darn header to remove from my client’s blog. I changed the code as you instructed, but didn’t see the header “gadget” in the layout so I could remove it; we are importing her blog into her new Squarespace site and that weird header imports with it kind of mucking things up. Would really appreciate any advice you might have. Thank you thank you!

    Reply
  13. NINDY on

    I keep getting this error pop-up message which contains: bX-djbcez everytime I try to remove the gap above the navigation menu. Can you help me to fix this? ๐Ÿ™

    Oh and the navigation menu still looks like regular text (on the body post) instead of the ordinary Pages text (with a long spaces between words/links) even after I put it on the second row as you’ve suggested on the post. I wonder what’s wrong, I’ve followed your steps here already. Can you take a look and see if I’ve done something crazy with with the codes?

    Thanks in advance, I’d really appreciate it ๐Ÿ™‚

    Reply
    • Elaine M on

      Hey, your navigation is still in the header section so you need to move the gadgets down further levels on the Layout page. The gap at the top is the default Blogger navbar, add body .navbar {height: 0px;} to your CSS to remove it.

      Reply
  14. christos on

    How to completely hide a gadget from my blog??

    I know the widget id but I don’t know the code in HTML which hides completely my gadget on my blogger.

    Please Help me! ,

    Reply
  15. Nanett on

    I just looove your blog and I’d like to say a huge thank you for helping “me” so much ๐Ÿ™‚
    I have followed your instructions (through several posts) but the gap above my page list doesn’t seem to disappear. (Neither the colour of my post title change……although I should be able to change that from the designer…..but that is a whole different case) Is there any other way to make that annoying white line disappear? Million thanks ๐Ÿ™‚

    Reply
    • Elaine M on

      Hello, thank you. So glad you enjoy it! Have you tried the code above for the gap? That should fix the issue, if it’s not then make sure there are no errors in your CSS. Errors in the CSS will prevent it from being read correctly.

      Reply
      • Nanett on

        Thank you for your help. I found the problem this morning: everything was duplicated in my CSS but now it all works. Yaaay ๐Ÿ™‚

        Reply
  16. Jordan on

    Hi,
    I have been trying to get rid of the space above my header with your codes for a while now, but it hasn’t worked. For one thing, my HTML does not have the code ]]></b:skin . If you could help me that would be great. Thank you!

    Jordan

    Reply
    • Elaine M on

      Hello Jordan, unless you’re using a template coded from scratch by a third party developer then the template should have that code as it’s the end of your stylesheet. Have a look at this post to help you find it.

      Reply