Skip to main content

How To Change Width & Height of Blogger's Top Menu Bar

I told you already that template editing is a fun also. Blogger has default width & height of its top menu bar. If you have a little bit knowledge of HTML, you can customize your template according to you. In some of my last post, I have shown you already regarding editing of blogger template. In this post, you learn how to change the width and height of blogger's default top menu bar. If you follow the below steps, you can do it easily for your blog also. For that, knowledge of html does not require.

Important Note:- Before doing editing / customization of your blogger's default template, take Back-up of your template and your blog's data so that if you make any major mistake, you can easily restore your original template as well as your blog's data.

How-to Download Your Blog's Data
How-to Download / Upload Blogger's Template

To reduce the extra space between blog title and blog description you need to do the following steps.

Read also How to reduce space between top menu & post title

Step 1. Login to your blogger account
Step 2. Click Template
Step 3. Click Edit HTML

Step 4. Once you click Edit HTML, you will able to see the codes of your blog's template.
Step 5. Click anywhere inside the code area
Step 6. Press Ctrl + F on your keyboard to get search box inside the code area

Read also How to reduce space between gadgets

Step 7. Type font: $(tabs.font); inside the search box and press Enter on the keyboard.

Step 8. Once you press Enter on the keyboard, you will switch to font: $(tabs.font);. You will see codes like below

.tabs-inner .widget li a {
  display: inline-block;

  margin: 0;
  padding: .5em 1.2em;

  font: $(tabs.font);
  color: $(tabs.text.color);

Just above font: $(tabs.font); there is padding: .5em 1.2em; code. In the code .5em is used for height / breath and 1.2em is used for width / length purpose and these value may varies depending upon the width & height of your blogger template. Here, you will just have to change this numeric value .5 and 1.2 according to you only. Do not change anything more.

Read also How to reduce space between blog title & blog description

If you increase these value width and height of top menu bar is increased and if you decrease these value width and height of top menu bar is decreased.

Step 9. After changing the numeric value click Save template to save the changes.

Watch This Video

Thanks for reading the post. Let me know whether you have experienced this tricks. Also let others to experience this feature by sharing this post on your social networks.


  1. Wow! what a wonderful blog it is! An another option is available in the form of Stepup height increaser. For more details please go at -

  2. Very informative post thanks for share this with us i highly appreciate you for this information thanks once again for sharing information like this!


Post a Comment