Here’s the Video Link
Also it’d be good for you to see the css that I used:
/* Show mobile collapse before menu wraps automatically */
@media (max-width: 1206px) {
.x-nav-wrap.desktop {
display: none;
}}
@media (max-width: 1206px) {
.x-nav-wrap.mobile.collapse.in {
display: block;
}
.x-btn-navbar, .x-btn-navbar.collapsed {
display: block;
float: right;
margin-bottom: 20px;
color: #2789df;
}
.x-btn-navbar, .x-btn-navbar.collapsed:hover {
display: block;
float: right;
margin-bottom: 20px;
background-color: #2789df;
color: white;
}}
.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a, .x-navbar .desktop .sub-menu li > a:hover, .x-navbar .desktop .sub-menu li.x-active > a, .x-navbar .desktop .sub-menu li.current-menu-item > a, .x-navbar .desktop .x-nav .x-megamenu > .sub-menu > li > a, .x-navbar .mobile .x-nav li > a:hover, .x-navbar .mobile .x-nav li.x-active > a{
box-shadow: inset 0 2px 0 0 #44a7ff;
color: white;
background-color: #2789df;
transition: .3s ease-in-out;
}
.x-navbar .desktop .x-nav > li > a:hover > span, .x-navbar .desktop .x-nav > li.x-active > a > span, .x-navbar .desktop .x-nav > li.current-menu-item > a > span {
box-shadow: 0 0 0 0 #E2AF78;
}