Site title and menu icon position

Hi,
I have two Sydney theme websites. www.mottaret.com and www.trevone.com

On the www.Mottaret.com my site title appears on the left and my menu icon appears on the right which is perfect.

However I can not achieve the same thing on my www.trevone.com website. On this website, my site title appears centred above my menu icon which is also centred and thus forms a much larger header block. This is not only happening on mobiles but even tablet screens.

I can not find any difference in the settings or custom css for the two websites.

I would really appreciate it, if you can tell me what I should do to ensure the site title appears on the left and more importantly the menu icon aligns on the right hand side of the screen.

Thanks

Hello there,

I checked Mottaret has the below custom CSS code that makes logo and mobile menu bottom sit in the same line horizontally.

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

  .header-wrap .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;
  }
  
}

Please check trevone.com’s additional CSS under Appearance > Customize; and see if that code presents in there.

Regards,
Kharis

Thank you Kharis - that worked on the Trevone website. However I can’t find the CSS code on the Mottaret website. When I look in ‘All Custom Code’ it does not appear. I must have added the above code to Mottaret but I wonder where and how?

Both sites appears as they should now so don’t worry about why the CSS code does not appear in my interface for additional CSS. Maybe I added it using another plug-in?

I guess it’s Simple Custom CSS: https://wordpress.org/plugins/simple-custom-css/

Regards,
Kharis

Or this one:

Regards,
Kharis

Actually I realise I need to understand what is happening. I have ‘Simple Custom CSS and JS’ plugin installed. I have written about 5 bits of CSS code - mostly copied from this help forum. I have been through my list and I can’t find the code you say the website has. Which means I must have added it in some other way?

Can you tell me how I can find out exactly what CSS code I might have added. How did you know I had added the code above (maybe you just viewed the source code of a page?)?
How can I find out what extra CSS I have added?

Hello there,

I got it with web browser’s view code source.

Try applying this code to your other site’s Additional CSS – under Appearance > Customize panel.

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

  .header-wrap .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;
  }
  
}

Regards,
Kharis