Mobile menu too big

Hello! I think the menu on mobile devices is too big because the logo and the menu button are centered, I would rather logo would be at right and the menu button at left, is it possible to change? Are there other possibilities?

Sorry, I forgot to add an image.

Hello there,

In order to accomplish that objective, could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

@media only screen and (max-width:767px){
   
  #masthead .row{
    position: relative;
  }
  
  .btn-menu{
    float: left;
    margin-left: 15px;
  }
  
  #masthead .col-xs-12.col-sm-4{ 
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
  }
  
  #mainnav-mobi{
    top: 87px;
  }
  
  #masthead .col-xs-12.col-sm-8{ 
    position: relative;
    z-index: 99999;
    width: 80%;
    float: right;
    text-align: right;
  }
  
}

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Regards,
Kharis

Yes, it worked, thanks! But the menu is still too big. Could it be made smaller or integrated as the desktop version?

Hello there,

Thank you for updating me.

Could you please try to change the CSS code I previously suggested with the following?


@media only screen and (max-width:767px){
  
  
  #masthead{
    height: 0 !important;
    overflow: visible !important;
    position: relative;
    top: 0;
    padding: 0;
  }
  
  
  .header-wrap{
    position: absolute;
    width: 100%;
  }
  
  #masthead .row{
    position: relative;
  }
  
  .btn-menu{
    float: left;
    margin-left: 15px;
    z-index: 10;
    position: absolute;
  }
  
  #masthead .col-xs-12.col-sm-4{ 
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
  }
  
  #mainnav-mobi{
    top: 0;
    padding-top: 107px;
    z-index: 2;
    position: absolute;
  }
  
  #masthead .col-xs-12.col-sm-8{ 
    position: relative;
    z-index: 99999;
    width: 80%;
    float: right;
    text-align: right;
  }
  
}

Let me know how it goes.

Regards,
Kharis

Now it’s perfect! Thank you! If I would like to change the position logo/menu, I’d have to change right/left, wouldn’t I?

Hello there,

I thought that would not be completely working. Try to use the following instead.

@media only screen and (max-width:767px){
  
  
  #masthead{
    height: 0 !important;
    overflow: visible !important;
    position: relative;
    top: 0;
    padding: 0;
  }
  
  .header-wrap{
    position: absolute;
    width: 100%;
  }
  
  #masthead .row{
    position: relative;
  }
  
  .btn-menu{
    right: 0;
    margin-right: 15px;
    z-index: 10;
    position: absolute;
  }
  
  #masthead .col-xs-12.col-sm-4{ 
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
  }
  
  #mainnav-mobi{
    top: 0;
    padding-top: 107px;
    z-index: 2;
    position: absolute;
  }
  
  #masthead .col-xs-12.col-sm-8{ 
    position: relative;
    z-index: 99999;
    width: 80%;
    float: left;
    text-align: left;
  }
  
}

Let me know how it goes.

Regards,
Kharis

It’s just what I needed! But I’ve realized that in other pages (not home) this setting is a problem because I can’t see the menu (because of the color). Could be possible apply this integrated menu only for de main page? Thanks a lot for your help!

Hello there,

> Could be possible apply this integrated menu only for de main page?

I thought it is possible. Home page body has a unique CSS class name i.e. .home. We must precede each selector with .home. So the entire code will look like the following:

@media only screen and (max-width:767px){
  
  .home #masthead{
    height: 0 !important;
    overflow: visible !important;
    position: relative;
    top: 0;
    padding: 0;
  }
  
  .home .header-wrap{
    position: absolute;
    width: 100%;
  }
  
  .home #masthead .row{
    position: relative;
  }
  
  .home .btn-menu{
    right: 0;
    margin-right: 15px;
    z-index: 10;
    position: absolute;
  }
  
  .home #masthead .col-xs-12.col-sm-4{ 
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9999;
  }
  
  .home #mainnav-mobi{
    top: 0;
    padding-top: 107px;
    z-index: 2;
    position: absolute;
  }
  
  .home #masthead .col-xs-12.col-sm-8{ 
    position: relative;
    z-index: 99999;
    width: 80%;
    float: left;
    text-align: left;
  }
  
}

Regards,
Kharis

Hello again, Kharis, I’m a bit confused about files I have to modify because of this: https://athemes.com/forums/topic/theme-update-and-child-theme/

Thanks for your patience!