Site title and main menu same line on mobile screen

I would like to have the site title and main menu (navigation) on the same horizontal line on mobile view. For tablet size it is working but on smaller screens the main menu goes underneath the site title. What do I need to change to get them on the same line? Thank you.

Hello there,

Thank you for reaching out to us here.

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:600px){
  
  .site-branding {
    text-align: left;
  }
  
  .mobile-nav{
    max-width: 50%;
    float: right;
  }
  
  .slicknav_menu{
    text-align: right;
  }
  
}

Regards,
Kharis

Thanks so much for that, it almost worked, but they are still not on the same line (screenshot here to show what I mean http://prnt.sc/c9sah4). Is there a way to adjust it so they are on the same horizontal line? Thanks again.

Hello there,

Please try to replace the code I suggested previously with this:


@media only screen and (max-width:600px){
  
  .site-branding {
    text-align: left;
  }
  
  .mobile-nav{
    max-width: 30%;
    float: right;
  }
  
  .slicknav_menu{
    text-align: right;
  }
  
  .slicknav_menu > a{
    line-height: 1;
    margin: -10px 0 0 0;
  }
  
}

Let me know how it goes.

Regards,
Kharis

Thank you for your help, I had to make a few more adjustments to that code but got it to be where I wanted it :slight_smile: However with all this re-styling for some reason the menu has become un-responsive, as in when I click it the menu doesn’t open? Could it be because of the overlapping?
Th new bit of code looks like this:

@media only screen and (max-width: 600px){
  
  .site-branding {
    text-align: left;
margin-bottom: -70px;
  }
  
  .mobile-nav{
    max-width: 50%;
    float: right;
margin: 5px 10px 0 0;
  }
  
  .slicknav_menu{
    text-align: right;
  }
  
  .slicknav_menu > a{
    line-height: 1;
    margin: -10px 0 0 0;
  }
}

Thanks.

No worries I figured out the solution, just need to add

.site-branding {
    text-align: left;
margin-bottom: -70px;
max-width: 60%
  }
  

Thanks for all your help! and the great theme :slight_smile:

Hi Kharis, first of all I want to wish you all the best for 2017.

Please, this css code allow me to put the logo and the menu icon on the same line. But I have an issue.

  1. Into the mobile screen, the menu icon loose the link and it don’t work (it appears but it don’t work).
  2. On the other side, into the tablet format, the icon works.

So how I can fix this problem ?

Thank you in advance. Regards, Nassim

Hello Nassim,

Thank you for posting in. But could you please start your own new thread here https://athemes.com/forums/forum/west/#new-post instead? Doing so will help us to document the support forum better.

To help us easier to identify the trouble, please share the link to your site.

Regards,
Kharis