Skip to main content
How Can We Help?
Header Layouts and CSS
Header 1 – https://prnt.sc/YhEPC0kk3qIT
/**Menu styling**/
/*****Top Menu CSS****/
#top-menu li {
padding-right: 48.525px;
}
#top-menu li a{
font-weight: 700 !important;
}
#top-menu li a:hover{
opacity: 1 !important;
color: #37A858 !important;
}
#main-header #top-menu > li:not(.menu_btn) > a {
padding: 15px 0 !important;
}
.nav li {
position: relative;
line-height: 1em;
}
body #main-header #top-menu li ul{
top: 35px;
padding: 0;
}
body #main-header #top-menu li ul li a{
background: transparent;
padding: 0 !important;
}
body #main-header #top-menu li ul li{
padding: 10px 20px !important;
width: 100%;
}
body #main-header #top-menu li.menu-item-has-children > a{
padding-right: 20px !important;
}
body #main-header #top-menu li.menu-item-has-children > a:after{
top: 50%;
transform: translatey(-50%);
}
@media (min-width: 981px){
ul#top-menu {
margin-bottom: 49px !important;
margin-top: 49px !important;
}
.et_header_style_left #et-top-navigation, .et_header_style_split #et-top-navigation {
padding: 0 !important;
}
}
/******Menu Button CSS*****/
#top-menu > li.menu_btn > a,
#mobile_menu > li.menu_btn > a,
body .et-fixed-header #top-menu > li.menu_btn > a{
background: #37A858;
padding: 20px !important;
color: #fff !important;
border-radius: 8px;
top: 50%;
border: 2px solid #37A858 !important;
}
#top-menu > li.menu_btn > a:hover{
background: transparent !important;
color: #121212 !important;
}
.et-fixed-header #top-menu > li.menu_btn > a:hover,
#mobile_menu > li.menu_btn > a:hover{
color: #121212 !important;
}
.et-fixed-header #top-menu {
margin-bottom: 30px !important;
margin-top: 30px !important;
}
body #main-header #top-menu{
transition: all .3s ease;
}
@media (min-width: 981px) and (max-width: 1650px){
#main-header #top-menu > li{
padding-right: 30px;
}
body #logo{
max-width: 250px;
}
#main-header #top-menu{
margin: 35px 0 !important;
}
#main-header.et-fixed-header #top-menu{
margin: 25px 0 !important;
}
}
@media (min-width: 981px) and (max-width: 1400px){
#main-header #top-menu > li{
padding-right: 20px;
}
body #logo{
max-width: 200px;
}
#main-header #top-menu{
margin: 25px 0 !important;
}
#main-header #top-menu > li > a{
font-size: 16px;
}
#top-menu > li.menu_btn > a{
padding: 17px !important;
}
}
@media (min-width: 981px) and (max-width: 1180px){
#main-header #top-menu > li{
padding-right: 15px;
}
body #logo{
max-width: 170px;
}
#main-header #top-menu{
margin: 20px 0 !important;
}
#main-header #top-menu > li > a{
font-size: 15px;
}
#top-menu > li.menu_btn > a{
padding: 15px !important;
}
}
@media (min-width: 981px) and (max-width: 1050px){
#main-header #top-menu > li{
padding-right: 11px;
}
body #logo{
max-width: 140px;
}
#top-menu > li.menu_btn > a{
padding: 12px !important;
}
}
#main-header #top-menu > li:last-child{
padding-right: 0;
}
#main-header .mobile_nav #mobile_menu {
background: #fff;
border-radius: 0 0 8px 8px;
}
#mobile_menu > li.menu_btn > a{
padding: 10px !important;
text-align: center;
}