Changing Font Size in the Header Bar in Blogger's Dynamic View Templates

Changing Font Size in the Header Bar in Blogger's Dynamic View Templates

Before

After

You'd think there is an easy way to change the size of the font on your Dynamic View's header bar. Oh wait, there is - the option to change your font size is very much there in your Template Designer (under Advanced - Header Bar). But let's be honest here. I have not seen this working. It never had any effect on my actual template, and no, not even on my preview page. Fortunately, there's a way to manually change the font size in the header bar, and here's how.

Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog:

Use the following to change the size of your menu font (Classic, Flipcard, Magazine..)

.header-drawer .menu span{
font-size: 20px !important;
}

And the following to change the size of your header bar links.

.header-drawer .tabs{
font-size: 20px !important;
}

And this to change the font-size of the view-options in your drop down menu:

#views .menu-item{
font-size: 20px !important;
}

Change the value '20px' in Line 2 accordingly.