I am currently utilizing this template and you can view a live demo by following this link:
However, I would like to remove the constant top effect of the menubar.
This is the content of style.css:
/*--------.menu_area-------- */
.menu_area{
float: left;
display: inline;
width: 100%;
font-size: 17px; /*--------.monchhichi-------- */
font-weight:bold;
color:#CBE32D;
}
.navbar-default .navbar-brand {
color: #fff;
font-size: 25px;
font-weight: bold;
margin-top: 20px;
}
.navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover {
background-color: transparent;
color: #fff;
}
.navbar-default {
background-color: #CBE32D;
border-color: transparent;
}
#navbar{overflow-x: hidden;}
.navbar-default .navbar-nav > li > a {
color: #244a66; /*--------.monchhichi menu bar font color-------- */
font-family:"arial",sans-serif;
padding: 10px 15px;
text-transform: uppercase;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover {
background-color: transparent;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
background-color: transparent;
}
.navbar-nav > li > .dropdown-menu {
background-color: #48575a;
}
.navbar-nav > li > .dropdown-menu:before {
border-bottom: 15px solid #48575a;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
content: "";
height: 0;
position: absolute;
right: 25px;
top: -15px;
width: 0;
}
.navbar-nav > li > .dropdown-menu li a {
border-bottom: 1px dotted rgba(255, 255, 255, 0.3);
color: #fff;
display: block;
opacity: 0.8;
padding: 10px;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.navbar-nav > li > .dropdown-menu > li:last-child a {
border-bottom: none;
}
.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover {
background-color: transparent;
text-decoration: none;
}
.dropdown-menu > .active > a, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:hover {
background-color: transparent;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
background-color: transparent;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
background-color: transparent;
}
This code does not include features such as position: fixed or z-value. So, it's unclear why the always-top effect is active here.
..............................................................................................................................................................