My Blog's Header Menu HTML and CSS Source

Here I am sharing my shitty simple design of my top menu in the header I've updated recently. If you like, you can use it for your blog as well. If you want to customize some part of it, you can do easily. I recommend playing around with color combinations.

CSS Of Header Menu:

#menubox
{
    width: 100%;
    background: #2e2e2e;
    height: 36px;
    font-weight: 14px;
}

ul#mynav
{
    list-style: none;
    padding: 7px 5px 0px 5px;
}

ul#mynav li
{
    display: inline;
    border: 0px;
    background: #333;
    margin-left: 0.5px;
    margin-right: 0.5px;
    padding: 8px 10px;
}

ul#mynav li a
{
    text-decoration: none;
    color: #ccc;
    font-weight: bold;
}

ul#mynav li a:hover
{
    text-decoration: underline;
    color: #eee;
}

The CSS entities are kept inside the <b:skin> and ]]></b:skin> so you have to paste all these CSS inside them. If you are confused, search for ]]></b:skin> and then paste all the above CSS codes before it.

HTML Part for menu:

<div id="menubox">
<ul id="mynav">
<li><a href="#" title="">Link 1</a></li>
<li><a href="#" title="">Link 2</a></li>
<li><a href="#" title="">Link 3</a></li>
<li><a href="#" title="">Link 4</a></li>
<li><a href="#" title="">Link 5</a></li>
</ul>
</div>

First edit the HTML code as per your need and then search for <b:section class='header' id='header' and you need to figure out where to post the HTML. I had a separate div where I could insert these HTML codes but your blogger template might be different so I leave this for you to figure out. Just paste in the header area and then preview to see how it looks. I can't exactly pinpoint you on what to do exactly, just keep on previewing till you get what you need. I've pasted mine one just below the </b:section>.

This way, you can simply insert the HTML and CSS based navigation menu for your blogger blog. I hope the information proves helpful.