Mobile menu too big


#1

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?


#2

Sorry, I forgot to add an image.


#3

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


#4

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


#5

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


#6

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?


#7

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


#8

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!


#9

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


#10

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!