WordPress Divi Theme Primary Menu & SubMenu with Mobile Menu
Style 1:
/**** Nesting Menu ****/
/* when mobile menu is open, change hamburger icon to x icon */
#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
content: '\4d';
}
/* makes sub sub menu icon be right arrow instead of down arrow */
#top-menu .menu-item-has-children .menu-item-has-children > a:first-child::after,
#et-secondary-nav .menu-item-has-children .menu-item-has-children > a:first-child::after {
content: '5';
}
/* - mobile menu toggling elements, injected via jQuery - */
/* make menu list item be relative, to be able to position toggle within this item */
#main-header #mobile_menu.et_mobile_menu .menu-item-has-children {
position: relative;
}
/* the new toggle element, which is added via jQuery */
#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle {
position: absolute;
z-index: 1;
width: 36px;
height: 36px;
line-height: 36px;
border-radius: 50%;
top: 5px;
right: 30px;
cursor: pointer;
text-align: center;
}
/* the new toggle element when popped */
#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped {
background-color: rgba(255,255,255, 0.2);
}
/* toggle icon */
#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle::before {
font-family: "ETmodules" !important;
font-weight: normal;
font-style: normal;
font-variant: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 36px;
font-size: 24px;
text-transform: none;
speak: none;
content: '\33';
color: #da1755;
}
/* toggle icon when triggered */
#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped::before {
content: '\32';
}
/* hide sub menus by default */
#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle ~ ul.sub-menu {
display: none !important;
padding-left: 0;
}
/* show sub menu when triggered via jQuery toggle, and add slight bg color */
#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped ~ ul.sub-menu {
display: block !important;
}
/* remove sub menu list item left padding, since padding will be on anchors */
#main-header #mobile_menu.et_mobile_menu li li {
padding-left: 0;
}
/* adjust mobile menu anchors side paddings */
#main-header #mobile_menu.et_mobile_menu li a {
padding-left: 20px;
padding-right: 20px;
}
/* indent sub sub menus further */
#main-header #mobile_menu.et_mobile_menu li li li a {
padding-left: 60px;
padding-right: 20px;
}
#main-header #mobile_menu.et_mobile_menu .menu-item-has-children > a {
background-color: transparent;
font-weight: inherit;
}
/* make the current page's mobile menu link be different */
#main-header #mobile_menu.et_mobile_menu li.current-menu-item > a {
font-weight: bolder;
}
/****** Code Style: Menu Slide-In ******/
/* Font Awesome */
.fa {
margin-right: 15px ;
}
@media only screen and (max-width: 980px){
#mobile_menu {
display: block !important;
min-height: 100vh;
height: 100%;
top: 0;
right: 0;
position: fixed;
z-index: 9998;
overflow: scroll;
border-top: none;
padding-top: 60px !important;
}
.et_mobile_menu li a {
color: #da1755 !important;
width: 100%;
float: left;
text-align: left;
border-bottom: 1px solid #ddd;
margin: 5px;
transition: .2s;
text-transform: uppercase;
}
.mobile_nav ul#mobile_menu .current_page_item > a {
color: #fff !important;
background-color: rgba(255, 255, 255, 0.1);
}
.mobile_nav.closed #mobile_menu {
background: rgba(51,51,51,0.9) !important;
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: -webkit-transform 0.4s 0s;
-moz-transition: -moz-transform 0.4s 0s;
transition: transform 0.4s 0s;
background: rgba(51,51,51,0.9) !important;
}
.mobile_nav.opened #mobile_menu {
background: rgba(27,29,30,0.98) !important;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
-webkit-overflow-scrolling: touch;
-webkit-transition: -webkit-transform 0.4s 0s;
-moz-transition: -moz-transform 0.4s 0s;
transition: transform 0.4s 0s;
}
#main-header .container.clearfix.et_menu_container {
width: 100%;
}
.mobile_menu_bar:before {
color: #1b1d1e !important;
}
.mobile_nav.opened .mobile_menu_bar:before {
content: '\4d';
color: #fff !important;
z-index: 9999;
}
}
@media only screen and (max-width: 980px) {
.et_header_style_split .mobile_menu_bar, .et_header_style_left .mobile_menu_bar {
z-index: 9999;
}
#et-top-navigation {
padding-right: 5px;
}
}
@media only screen and (min-width: 481px) {
#mobile_menu {
width: 340px;
margin-left: calc(100% - 340px);
}
}
@media only screen and (max-width: 480px) {
#mobile_menu {
width: 290px;
margin-left: calc(100% - 290px);
}
}
#top-menu .current-menu-item a::before,
#top-menu .current_page_item a::before {
content: "";
position: absolute;
z-index: 2;
left: 0;
right: 0;
}
#top-menu li a:before {
content: "";
position: absolute;
z-index: -2;
left: 0;
right: 100%;
bottom: 50%;
background: #15bf86; /*** COLOR OF THE LINE ***/
height: 3px; /*** THICKNESS OF THE LINE ***/
-webkit-transition-property: right;
transition-property: right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
#top-menu li a:hover {
opacity: 1 !important;
}
#top-menu li a:hover:before {
right: 0;
}
#top-menu li li a:before {
bottom: 10%;
}
#top-menu li li a {
border: 1px solid white;
margin-bottom: 5px;
text-align: left;
border-left:5px solid #d19b3d;
box-shadow: 0 0 14px #999;
}
#top-menu li li a:hover {
color: #3e007f;
background: #ffffff !important;
opacity: 1!important;
}
.nav li ul {
border-top: 0px solid #3e007f;
margin-top: -20px;
}
/*----------Sub Menu Mobile----------*/
.et_mobile_menu {
border-top: 0px solid #2ea3f2;
}
.et_mobile_menu li a {
text-align: left;
}
#top-menu li li a {
width: 350px;
}
.nav li ul {
width: 370px;
}
Style 2:
#top-menu li {
padding-right: 2px;}
#top-menu > li > a {
padding: 15px 15px!important;
margin-bottom: 15px;}
#top-menu .menu-item-has-children > a:first-child:after {
display:none;}
#top-menu-nav > ul > li > a {
background: #faa61a;
opacity: 1;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;}
#top-menu-nav > ul > li > a:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #2098D1;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;}
#top-menu-nav > ul > li > a:hover,
#top-menu-nav > ul > li > a:focus,
#top-menu-nav > ul > li > a:active {
color: #fff;}
#top-menu-nav > ul > li > a:hover:before,
#top-menu-nav > ul > li > a:focus:before,
#top-menu-nav > ul > li > a:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);}
/**** Nesting Menu ****/
/* when mobile menu is open, change hamburger icon to x icon */
#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
content: '\4d';
}
/* makes sub sub menu icon be right arrow instead of down arrow */
#top-menu .menu-item-has-children .menu-item-has-children > a:first-child::after,
#et-secondary-nav .menu-item-has-children .menu-item-has-children > a:first-child::after {
content: '5';
}
/* - mobile menu toggling elements, injected via jQuery - */
/* make menu list item be relative, to be able to position toggle within this item */
#main-header #mobile_menu.et_mobile_menu .menu-item-has-children {
position: relative;
}
/* the new toggle element, which is added via jQuery */
#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle {
position: absolute;
z-index: 1;
width: 36px;
height: 36px;
line-height: 36px;
border-radius: 50%;
top: 5px;
right: 30px;
cursor: pointer;
text-align: center;
}
/* the new toggle element when popped */
#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped {
background-color: rgba(255,255,255, 0.2);
}
/* toggle icon */
#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle::before {
font-family: "ETmodules" !important;
font-weight: normal;
font-style: normal;
font-variant: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
line-height: 36px;
font-size: 24px;
text-transform: none;
speak: none;
content: '\33';
color: #da1755;
}
/* toggle icon when triggered */
#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped::before {
content: '\32';
}
/* hide sub menus by default */
#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle ~ ul.sub-menu {
display: none !important;
padding-left: 0;
}
/* show sub menu when triggered via jQuery toggle, and add slight bg color */
#main-header #mobile_menu.et_mobile_menu .sub-menu-toggle.popped ~ ul.sub-menu {
display: block !important;
}
/* remove sub menu list item left padding, since padding will be on anchors */
#main-header #mobile_menu.et_mobile_menu li li {
padding-left: 0;
}
/* adjust mobile menu anchors side paddings */
#main-header #mobile_menu.et_mobile_menu li a {
padding-left: 20px;
padding-right: 20px;
}
/* indent sub sub menus further */
#main-header #mobile_menu.et_mobile_menu li li li a {
padding-left: 60px;
padding-right: 20px;
}
#main-header #mobile_menu.et_mobile_menu .menu-item-has-children > a {
background-color: transparent;
font-weight: inherit;
}
/* make the current page's mobile menu link be different */
#main-header #mobile_menu.et_mobile_menu li.current-menu-item > a {
font-weight: bolder;
}
/****** Code Style: Menu Slide-In ******/
/* Font Awesome */
.fa {
margin-right: 15px ;
}
@media only screen and (max-width: 980px){
#mobile_menu {
display: block !important;
min-height: 100vh;
height: 100%;
top: 0;
right: 0;
position: fixed;
z-index: 9998;
overflow: scroll;
border-top: none;
padding-top: 60px !important;
}
.et_mobile_menu li a {
color: #da1755 !important;
width: 100%;
float: left;
text-align: left;
border-bottom: 1px solid #ddd;
margin: 5px;
transition: .2s;
text-transform: uppercase;
}
.mobile_nav ul#mobile_menu .current_page_item > a {
color: #fff !important;
background-color: rgba(255, 255, 255, 0.1);
}
.mobile_nav.closed #mobile_menu {
background: rgba(51,51,51,0.9) !important;
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: -webkit-transform 0.4s 0s;
-moz-transition: -moz-transform 0.4s 0s;
transition: transform 0.4s 0s;
background: rgba(51,51,51,0.9) !important;
}
.mobile_nav.opened #mobile_menu {
background: rgba(27,29,30,0.98) !important;
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
-webkit-overflow-scrolling: touch;
-webkit-transition: -webkit-transform 0.4s 0s;
-moz-transition: -moz-transform 0.4s 0s;
transition: transform 0.4s 0s;
}
#main-header .container.clearfix.et_menu_container {
width: 100%;
}
.mobile_menu_bar:before {
color: #1b1d1e !important;
}
.mobile_nav.opened .mobile_menu_bar:before {
content: '\4d';
color: #fff !important;
z-index: 9999;
}
}
@media only screen and (max-width: 980px) {
.et_header_style_split .mobile_menu_bar, .et_header_style_left .mobile_menu_bar {
z-index: 9999;
}
#et-top-navigation {
padding-right: 5px;
}
}
@media only screen and (min-width: 481px) {
#mobile_menu {
width: 340px;
margin-left: calc(100% - 340px);
}
}
@media only screen and (max-width: 480px) {
#mobile_menu {
width: 290px;
margin-left: calc(100% - 290px);
}
}
#top-menu-nav > ul > li > a {
color: #ffffff;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
-webkit-transition-property: box-shadow, transform;
transition-property: box-shadow, transform;
}
#top-menu li a:hover {
opacity: 1 !important;
}
#top-menu li a:hover:before {
right: 0;
}
#top-menu li li a:before {
bottom: 10%;
}
#top-menu li li a {
border: 1px solid white;
margin-bottom: 5px;
text-align: left;
border-left:5px solid #d19b3d;
box-shadow: 0 0 14px #999;
}
#top-menu li li a:hover {
color: #3e007f;
background: #ffffff !important;
opacity: 1!important;
}
.nav li ul {
border-top: 0px solid #3e007f;
margin-top: -20px;
}
/*----------Sub Menu Mobile----------*/
.et_mobile_menu {
border-top: 0px solid #333;
}
.et_mobile_menu li a {
text-align: left;
}
#top-menu li li a {
width: 250px;
}
.nav li ul {
width: 270px;
}
Comments
Post a Comment