TOP The Menu Bar or menu navigation bar above the blog header is one of the modern website design trends. This menu is static, sticky, aka floating (floating), that is, it still appears when scrolled. This is what it looks like:

top menu bar like google

Tips on How to Make a Top Menu Bar Similar to Google this complements as well as an alternative to the previous post about How to Create Menu Navigation above the header or Top Nav Menu Similar to Facebook.

How to Make a Top Menu Bar Similar to Google (Google Style Top Fixed Menu Bar)

1. Templates > Edit HTML
2. Copy the following code on code ]]>

.menu{
position:fixed;
top:0;
left:0;
width:100%;
font:13px/27px Arial,sans-serif;
color:#3366cc;
height:30px;
background:#2D2D2D;
}

.menu a:hover{
background-color:#676767;
color:#CCCCCC;
}

.menu a{
text-decoration:none;
padding:6px 8px 7px;
color:#CCCCCC;
outline:none;
}

.menu ul{
list-style:none;
margins:0;
padding:0 0 0 10px;
}

.menu ul li{
padding:0;
float:left;
}

.menu ul li ul li{
padding:0;
float:none;
margins:0 0 0 0px;
width:100%;
}

.menu ul li ul{
position:absolute;
border:1px solid #C3D1EC;

/*box-shadow*/
-webkit-box-shadow:0 1px 5px #CCCCCC;
-moz-box-shadow:0 1px 5px #CCCCCC;
box-shadow:0 1px 5px #CCCCCC;
margin-top:-1px;
display:none;
padding:0px 16px 0px 0;
}

.active ul{
display:block !important;
}

.single ul{
display:block !important;
}

.active a{
background-color:white;
border:1px solid #C3D1EC;
border-bottom:0;

/*box-shadow*/
-webkit-box-shadow:0 -1px 5px #CCCCCC;
-moz-box-shadow:0 -1px 5px #CCCCCC;
box-shadow:0 -1px 5px #CCCCCC;
display:block;
height:29px;
padding:0 8px 0 8px;
position:relative;
z-index:1;
color:#3366CC;
}

/*Styling for the link of the current page*/
.current a{
background-color:#2D2D2D;
border-top:2px solid #DD4B39;/*red ribbon at top*/
border-bottom:0;
display:block;
height:25px;
padding:0 8px 0 8px;
position:relative;
z-index:1;
color:#FFFFFF;
font-weight:bold;
}

.active a:hover{
background-color:white;
color:#3366CC;
}

.active ul a:hover{
background-color:#e4ebf8;
}

.active ul a{
border:0 !important;

/*box-shadow*/
-webkit-box-shadow:0 0 0 #CCCCCC;
-moz-box-shadow:0 0 0 #CCCCCC;
box-shadow:0 0 0 #CCCCCC;
borders:0;
width:100%;
}

.arrow{
border-color:#C0C0C0 transparent white;
border-style:solid dashed dashed;
margin-left:5px;
position:relative;
top:10px;
}

.mid-line{
background-color:#FFF;
border-top:1px solid #e5e5e5;
font-size:0;
}

3. Copy the following code under code

http://plus.google.com”>+You

#“>Web

Drive

http://gmail.com“>Gmail

https://www.google.com/calendar“>Calendar

https://docs.google.com“>Documents

http://picasaweb.google.co.in/home“>Photos

More

Change the names and menu links!

4. Copy the following code on code

UPDATES!!! Code fixed! No Error Again…!!!

$(functions($) {
$.fn.fixedMenu = function() {
return this.each(function() {
var menu = $(this);
$(“html”).click(function() {
menu.find(‘.active’).removeClass(‘active’);
});

menu.find(‘ul li > a’).bind(‘click’, function (event) {
event.stopPropagation();
//check whether the particular link has a dropdown
if (!$(this).parent().hasClass(‘single-link’) && !$(this).parent().hasClass(‘current’)) {
//hiding drop down menu when it is clicked again
if ($(this).parent().hasClass(‘active’)) {
$(this).parent().removeClass(‘active’);
}
else {
//displaying the drop down menu
$(this).parent().parent().find(‘.active’).removeClass(‘active’);
$(this).parent().addClass(‘active’);
}
}
else {
//hiding the drop down menu when some other link is clicked
$(this).parent().parent().find(‘.active’).removeClass(‘active’);
}
})
});
}
})(jQuery);

4. Save Templates!

Now Top Menu Bar Similar to Google already appears above the header of your blog.

Top Menu Bar CB Way (Recommended!)

For CB, after the trial, how to Make a Top Menu Bar Similar to Google from Strike Lab above to be “complicated” and too much code.

CB recommends you use the following method which is simpler. Just change or add the names of the menus with menus like the Google Top Bar.

1. “Template” > “Edit HTML”
2. Copy the following code on code ]]>


* html #top{position:absolute}
#top {margin: auto;padding:0 10px 15px 10px;width: 100%;background: #2d2d2d;border-bottom: 2px solid #777;z-index: 100;height: 20px;}
#top-wrap {margin:auto;padding: 0;width: 950px;background:#2d2d2d;}
#navwrap { margin: 0px auto; width:100%; float:left;background:#080705;}
.topnav ul {list-style:none;margin:0;padding:0px; float:left;}
.topnav li {float:left;margin:0;text-align:center;}
.topnav li a {font-family: arial; font-size:13px;display:block;padding:10px 10px;color:#f2f2f2;text-decoration:none;}
.topnav li a {background:none; }
.topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#444; color:#f2f2f2;}

3. Copy the following code appropriate under code

4. Add code padding-top: 45px; in code .header-wrapper or #header-wrapper

Example:
.header-wrapper {padding-top: 45px; … }

That’s how to make a Google-like Top Menu Bar to beautify your blog while creating additional menu navigation and internal links. Good Luck! (http://exampleblognih.blogspot.com).*

.

Tagged