Skip to main content
Print

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;
}
Table of Contents