Hamburger Menu - Not getting it to work

Hi!

I want to get the hamburger menu always, on desktop and mobile. Can´t seem to figure it out. The site is https://estudiomus.com.ar/ . Tried some css I found on forums but none seem to get the job done.

Could you guys help me out?

Thanks!

Hello there,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media (min-width: 1200px) {
      .header-mobile-menu {
        display: inline-block;
      }
      .menuStyle1 .mobile-menu-toggle_lines {
        background-color: #fff;
      }
    }
    @media (min-width: 1200px) {
      .menuStyle1 .mobile-menu-toggle_lines:before, .menuStyle1 .mobile-menu-toggle_lines:after {
        background: #fff;
      }

      .menuStyle4 #site-navigation-sticky-wrapper {
        margin: 0 !important;
      }

      .menuStyle4 .main-navigation {
        position: fixed;
        padding: 0;
        margin: 0 !important;
        width: 100%;
        max-width: 100%;
      }
      .menuStyle4 .main-navigation li {
        padding-top: 15px;
        padding-bottom: 15px;
      }
      .menuStyle4 .main-navigation li a {
        padding: 0;
      }
      .menuStyle4 .main-navigation .header-cta {
        display: block;
        position: static;
        height: auto;
      }
      .menuStyle4 .main-navigation .header-cta:before {
        display: none;
      }
      .menuStyle4 .main-navigation .header-search {
        display: none;
      }
      .menuStyle4 .main-navigation .header-search-cart,
      .menuStyle4 .main-navigation .header-cart-link {
        margin: 0;
      }

      /* Styling desktop navigation for mobile screens */
      .ca-header-shadow--mobile {
        -webkit-box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.1);
                box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.1);
        background-color: #fff;
        position: relative;
        z-index: 100;
      }

      .header-mobile-menu {
        text-align: right;
        display: block;
      }

      body.mobile-menu-active {
        overflow-y: hidden;
      }

      .main-navigation {
        display: block;
        background-color: #fff;
        padding: 30px 15px 30px;
        position: fixed;
        width: 100%;
        max-width: 100%;
        overflow-y: auto;
        z-index: 99;
        -webkit-transition: opacity .2s 0s ease, visibility 0s .2s linear, -webkit-transform 0.2s 0s ease;
        transition: opacity .2s 0s ease, visibility 0s .2s linear, -webkit-transform 0.2s 0s ease;
        transition: transform 0.2s 0s ease, opacity .2s 0s ease, visibility 0s .2s linear;
        transition: transform 0.2s 0s ease, opacity .2s 0s ease, visibility 0s .2s linear, -webkit-transform 0.2s 0s ease;
        /* delay the visibility so the transition can be observed */
        top: 0px;
        bottom: 0;
        left: 0;
        margin: 0;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        -webkit-transform: scale(0.95);
                transform: scale(0.95);
      }

      .menuStyle1 .main-navigation {
        background-color: #13151d;
        top: 124px !important;  
      }
      
      .main-navigation ul {
        display: block;
      }

      .mobile-menu-active .main-navigation {
        display: block;
        opacity: 1;
        visibility: visible;
        pointer-events: initial;
        -webkit-transform: scale(1);
                transform: scale(1);
        -webkit-transition: opacity .2s 0s ease, visibility 0s 0s linear, -webkit-transform 0.2s 0s ease;
        transition: opacity .2s 0s ease, visibility 0s 0s linear, -webkit-transform 0.2s 0s ease;
        transition: transform 0.2s 0s ease, opacity .2s 0s ease, visibility 0s 0s linear;
        transition: transform 0.2s 0s ease, opacity .2s 0s ease, visibility 0s 0s linear, -webkit-transform 0.2s 0s ease;
      }

      .main-navigation {
        padding: 0;
      }

      .main-navigation ul ul {
        position: static;
        float: none;
        padding: 0;
      }
      .main-navigation ul ul a {
        width: 100%;
      }

      .main-navigation li {
        display: block;
        position: relative;
        border-bottom: 1px solid rgba(25, 25, 25, 0.1);
        text-align: center;
      }
      .main-navigation li:first-of-type {
        padding-left: 25px;
      }

      .main-navigation a {
        font-size: 15px;
        line-height: 2;
        padding: 15px 30px;
      }

      .main-navigation ul .sub-menu,
      .main-navigation ul .children {
        display: none;
        background: rgba(0, 0, 0, 0.05);
      }

      .main-navigation ul .sub-menu.open,
      .main-navigation ul .children.open {
        display: block;
      }

      .main-navigation ul .sub-menu li,
      .main-navigation ul .children li {
        border-bottom: none;
      }

      .main-navigation ul .sub-menu li a,
      .main-navigation ul .children li a {
        font-size: 13px;
        line-height: 2;
        padding: 0;
      }

      .main-navigation ul .sub-menu li a:hover,
      .main-navigation ul .sub-menu li a:focus,
      .main-navigation ul .children li a:hover,
      .main-navigation ul .children li a:focus {
        color: #fb397d;
      }

      .main-navigation ul .subnav-toggle {
        height: 60px;
        width: 30px;
        position: absolute;
        top: 0;
        right: 0;
        text-align: center;
        display: block;
        cursor: pointer;
      }

      .main-navigation ul .sub-menu .subnav-toggle,
      .main-navigation ul .children .subnav-toggle {
        height: 50px;
      }

      .main-navigation ul .subnav-toggle:before {
        content: "+";
        display: inline-block;
        color: inherit;
        font-size: 20px;
        font-weight: 900;
        line-height: 60px;
        speak: none;
        -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
        -webkit-transition: all 0.2s ease;
        transition: all 0.2s ease;
      }

      .main-navigation ul .subnav-toggle.open:before {
        -webkit-transform: rotate(-180deg);
                transform: rotate(-180deg);
        /* negative value so it will rotate counterclockwise */
      }

      .main-navigation ul .sub-menu .subnav-toggle:before,
      .main-navigation ul .children .subnav-toggle:before {
        line-height: 50px;
      }

      .main-navigation li.menu-item-has-children > .subnav-toggle,
      .main-navigation li.page_item_has_children > .subnav-toggle {
        color: #191919;
      }

      /* When hovering the sibiling menu link -> change dropdown color */
      .main-navigation li.menu-item-has-children > a:hover + .subnav-toggle,
      .main-navigation li.menu-item-has-children > a:focus + .subnav-toggle,
      .main-navigation li.page_item_has_children > a:hover + .subnav-toggle,
      .main-navigation li.page_item_has_children > a:focus + .subnav-toggle,
      .main-navigation ul .subnav-toggle:hover {
        color: #fb397d;
      }

      .main-navigation ul li a:hover,
      .main-navigation ul li.current_page_item > a,
      .main-navigation ul li.current-menu-item > a,
      .main-navigation ul li.current_page_ancestor > a,
      .main-navigation ul li.current-menu-ancestor > a {
        color: #fb397d;
        text-decoration: none;
      }
      
    }

Let me know how it goes.

Regards,
Kharis
aThemes Support

It worked!

But I´d like to have the three bars of the menu in white. And is there any way to make the menu look smaller and on the side? And change the colour of the font?

Hello there,

Try adding this extra CSS code and do you own adjustments as needed.

    .mobile-menu-toggle {
      padding: 15px 10px;
    }

    .mobile-menu-toggle,
    .mobile-menu-toggle:active,
    .mobile-menu-toggle:visited {
      outline: none !important;
    }

    .mobile-menu-toggle_lines {
      background-color: #fff;
    }

    .mobile-menu-toggle_lines, 
    .mobile-menu-toggle_lines::before, 
    .mobile-menu-toggle_lines::after {
      height: 2px;
    }

    .main-navigation ul li a:hover, .main-navigation ul li.current_page_item > a, .main-navigation ul li.current-menu-item > a, .main-navigation ul li.current_page_ancestor > a, .main-navigation ul li.current-menu-ancestor > a {
      color: #fff000;
    }

Regards,
Kharisa
Themes Support

There is also another solution, originally posted in https://forums.athemes.com/t/menu-breakpoints-on-desktop/33451/18

.header-mobile-menu{
	display: block;
	text-align: right;
}
.mobile-menu-toggle_lines:before, 
.mobile-menu-toggle_lines:after{
	background-color: white;
}
.menuStyle1.mobile-menu-active .site-header{
	background-color: black;
}
.main-navigation {
	display: none;
	background-color: black;
	opacity: 0;
	visibility: hidden;
	position: inherit;
	margin: auto;
}

.main-navigation ul ul{
	float: unset;
	position: initial;
}
.main-navigation ul ul li{
	background-color: rgba(255, 255, 255, .1) !important;
	border: none;
}
.main-navigation ul ul li a{
	text-align: center;	
	color: white !important;
	width: 100%;
}
.mobile-menu-active .main-navigation {
	display: block;
	opacity: 1;
	visibility: visible;
	top: 78px !important;
}
.main-navigation li{
	display: block;
}
.main-navigation li a{
	text-align: center;
	padding: 15px 30px;
	line-height: 2;
	font-size: 15px;
}
1 Like

Hello there,

Glad to hear that you found the solution from one of our threads. Thank you for mentioning this here. I really appreciate it.

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support