Keep the top menu as a hamburger not page listed


#1

Hey guys,

I love the hamburger menu in Airi but every time my page goes wide it lists the pages I have in the top nav.

Is there a way of changing this?

Thanks!
Ally


#2

Hello Ally,

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

    @media (min-width: 1200px) {
      .header-mobile-menu {
        text-align: right;
        display: block;
      }

      .site-header .container-fluid {
        position: relative;
      }
      .site-header .main-navigation{
        top: 100% !important;
      }
      
      .mobile-menu-toggle_lines,
      .mobile-menu-toggle_lines:before, .mobile-menu-toggle_lines:after {
        background-color: #fff;
      }
      
      .menuStyle4 #site-navigation-sticky-wrapper {
        margin: 0 !important;
      }

      .menuStyle3 .main-navigation {
        background-color: #13151d;
      }

      .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);
      }
      
      .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;
      }
    }

Regards,
Kharis


#3

hi , i want it the other way around: i want on a computer/laptop the menu with name list and only when to small a hamburger menu. it was default it worked, but now it is gone, and i cannot figure out why this happened?

mooie.stb-webdesgin.nl
can you tell me where it goed wrong.

regards Willem


#4

Hello Willem,

I’d like to help. But the link seems to be invalid. Please resend the valid address of your website. Or is there any specific IP country restriction enabled?

Regards,
Kharis


#5

hello Kharis

Sorry my mistake: https://mooie.stb-webdesign.nl/

i see that it only occurs on Google Chrome, Mozilla works fine.


#6

Hello there,

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

.main-navigation {
  z-index: 9999 !important;
}

Regards,
Kharis