Change the mobile menu

Could you tell me how I can set up a mobile version of the menu. Problem: I want to use a different mobile version of the menu, as in this screenshot.this How can I solve this problem?
my mobile menu this
http://mbsource.by/

Hello there,

To accomplish it you will work with CSS rules to re-style the default mobile menu. You can apply your custom CSS code through Appearance > Customize > Additional CSS. Use the below example code which might be a good starting point for you.


@media only screen and (max-width:1024px){
  
  .site-header .container{
    position: relative;
  }
  
  .site-header .col-md-4,
  .site-header .col-md-8{
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;   
  }
  
  .btn-menu{
    margin-top: -60px;
  }
  
  .site-header .col-md-8{
    top: 60px;  
  }  
  
  #mainnav-mobi{
    width: calc(100% + 100px);
    width: -moz-calc(100% + 100px);
    width: -webkit-calc(100% + 100px);
    margin-left: -50px;
  }
  
  #mainnav-mobi ul li{
    border-color: #fff;
  }
  
  #mainnav-mobi ul > li > a {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    background: #fff;
  }  

  
}

Regards,
Kharis

Thank you, and how to do just below the menu and pressing the backlight color # 3b4d82?

screen

Try adding this code:


#mainnav-mobi ul li a:hover,
#mainnav-mobi ul li a:active {
  background-color: #3b4d82 !important;
}  

Regards,
Kharis

how to make a menu just below the logo on the level? 12

Try adding this code:


@media only screen and (max-width:767px){
  
  .site-header .col-md-8 {
    margin-top: 10px;
    position: relative;
  }  
  
  .btn-menu{
    position: absolute;
    top: -5px;
    right: 0;
  }
  
}


Regards,
Kharis

thank you so much, you best