Creating a Menubar Right Under Your Header in Blogger

It will take you a few minutes to create your own Menubar in your Blogger.
I haven’t fount such page element that is to add a menubar to your blogger. So, believe, if you do exactly in that particular way that is written below, you will get a nice menubar right under your Header and further replace it wherever you want it to be. I’ve found Menubar more useful and efficient than labels or any other page element in blogger for these purposes to classify your content.
Let the show begin!

As usual, before doing something, save your template.
Then, Template–>Edit HTML and search in your code for lines that I’ve given in red color…

<div id=\’header-wrapper\’>
<b:section class=\’menubar\’ id=\’menubar\’ maxwidgets=\’1\’ showaddelement=\’yes\’>
<b:widget id=\’LinkList2\’ locked=\’true\’ title=\’Menubar\’ type=\’LinkList\’/>
</b:section>
<b:section class=\’header\’ id=\’header\’ maxwidgets=\’1\’ showaddelement=\’no\’>
<b:widget id=\’Header1\’ locked=\’false\’ title=\’Beautiful Beta (Header)\’ type=\’Header\’/>
</b:section>
</div>

And paste between them the code that I’ve given in green. Then in CSS part, only there, in two words, find that part in your code where you have many lines starting with # and paste there as one part following code:

#menubar h2 {display:none;}

#menubar ul {
list-style: none;
}
#menubar li {
float: left;
}

#menubar a:link, #menubar a:visited, #menubar a:hover {
padding: 5px;
display: block;
color: $headerTextColor;
}

#menubar a:hover {
background-color: $headerCornersColor;
}
Ok, we will have no title in our Menubar but who needs title for Menubar? Besides, you will be able to set a title for you Menubar in “Page Elements”

In some templates they don’t want to save it and give you such error:
“Invalid variable declaration in page skin: Variable is used but not defined. Input: headerTextColor“

If you received such an error, then just paste the following code right after “Variable definitions” in your template:

<Variable name=\”headerCornersColor\” description=\”Menu background color\”
type=\”color\” default=\”#fff\” value=\”#e6e6e6\”>
<Variable name=\”headerTextColor\” description=\”Menu text color\”
type=\”color\” default=\”#c60\” value=\”#5588aa\”>

Now save it. No errors? That’s good.
All color options and setting will be available in “Fonts and Colors”

Have a nice Menubar

site for travellers