Menu and logo is not in the Same line on mobile

Hi I’m using Sydney theme for my website and I’m really happy with it. But I have some issues. Logo and menu is not aligned on mobile view. How can I do that. Also when you scroll down menu disappears on mobile. On desktop it doesn’t. can you help me please? My website

Hello there,

Sydney is designed like so and it isn’t a bug. However it doesn’t meet your need. To place the mobile menu button in the right side and stick the menu bar upon scrolling. You need to add the CSS code below into your site’s additional CSS option (Appearance > Customize > Additional CSS).


@media only screen and (max-width:991px){
  
  #masthead.site-header.fixed {
    position: fixed !important;
  } 
  
}

@media only screen and (max-width:767px){
  
  .site-header{
    height: 70px;
  }
  
  .header-wrap{
    text-align: left;
  }
  
  .btn-menu{
    margin-right: 15px;
    margin-bottom: 30px;
    margin-top: -35px;
  }
  
}

Regards,
Kharis

Thank you so much. But now when i scroll down menu stays transparent. On desktop its transparent on slider but when scroll down color changes to blue color that picked. It doesnt do samething on mobile. Also logo and menu button on mobile not aligned.How do i make them in same line horizontally.

Hello there,

Please share me the link to your site, so I can provide you with the working code depending on your setup.

Regards,
Kharis

asktileexperts.com

Hello there,

Please replace the code I suggested with this one:


@media only screen and (min-width:992px){
  
  .btn-menu{
    margin-top: -25px;
  }
  
  .site-header .col-md-8{
    margin-top: -10px; 
  } 
  
}

@media only screen and (max-width:991px){
  
  #masthead.site-header{
    height: 83px !important;
    padding: 20px 0 !important;
    background: red !important;
  } 
  
  #masthead.site-header.float-header{
    height: 53px !important;
    padding: 5px 0 !important;
    background-color: rgba(0,19,79,0.9);
  }
  
  #masthead.site-header.fixed {
    position: fixed !important;
  } 
 
  .site-header .col-md-8{
    width: 100%;
    margin-top: -25px;
  }  
  
}

@media only screen and (max-width:767px){
  
  .site-header{
    height: 70px;
  }
  
  .header-wrap{
    text-align: left;
  }
  
  .btn-menu{
    margin-right: 15px;
    margin-bottom: 30px;
    margin-top: -35px;
  }
  
}

Let me know how it goes.

Regards,
Kharis

Hi. Thank you for quick response. Can we change the color from red to #00134f this one ? Also when you just land to my page on mobile i want logo and menu button to be transparent but when you scroll down it changes to blue color(#00134f) just like on desktop.

Hello there,

Sorry, I made a mistake. Please remove this line:


background: red !important;

from this code block:


#masthead.site-header{
  height: 83px !important;
  padding: 20px 0 !important;
  background: red !important;
} 

Regards,
Kharis

When i did this change menu stays transparent when i scroll down. What do we need to do in order to keep it transparent on slider picture but when you scroll down color changes to blue color just like on my website when you visited from computer. I would like to have it same way for mobile. Can you visit my site from lap top or computer. Maybe you can see what im trying to explain easier. i feel like i cant explain very well.