How to change a top menu bar in mobile devices

Hello

I would like to ask you how to change the top menu on mobile size. I want to have a more slim design such as that the logo on the left and the menu icon is on the right. Now they are vertically on the center in the black space on the top of the bar. Actually I want to change the colour as well either the colour which i select or just white.

Please let me know how to deal with that for me.
I will appreciate that. Thank you,

To do that, try adding the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width:767px){
            
      .header-wrap .container{
        text-align: left;
      }

      .btn-menu{
        float: right;
        margin-right: 15px;
      }  

      .header-wrap .col-md-4 {
        max-width: 90%;
        position: relative;
        z-index: 2;
      }

      .header-wrap .col-md-8 {
        margin-top: -50px;       
      }        

      #mainnav-mobi {
        top: 70px;
      }
      
    }

To change the default mobile menu button color to any color of your choice, add this CSS code:

    .btn-menu {
        color: #ff0000;
    }

Regards,
Kharis

1 Like

Thank you so much.
It is working now really well.
But I meant that i want to change the background colour of the top nav which is black originally.
Could you let me know to do that?
Thank you.

Best.

1 Like

Hello there,

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

    @media only screen and (max-width: 1024px) {
      .site-header, 
      .site-header.fixed {
        background-color: #fff000;  
      }
    } 

Regards,
Kharis