How to Create a menubar right under the your Blogger header.

It's a fact to creating a menubar under your blogger header. Because no direct way is available on your page eliment's or page layout. If you create a menubar, you need to add some HTML code on your main page eliments, I will help you for how to create a  Menubar more useful and efficient than labels or any other page element in blogger for these purposes to classify your content.
Lets, we go for begin!

Log in to your blogger account, and go to Design, Template>Edit template
N.B: Allwayes must keep your template beckup.

Then search your code line, I've give blue color.

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:

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

Stay with us allways, and get update many usfull tips about all.

If You Like This. Please! Drop a Comment And Share This...