How to make Sydney theme menu mobile responsive

Hello. I needed a little help with the Sydney theme.
I was wondering how can I make the menu responsive on mobile?
The menu looks perfect on the desktop however on the mobile the hamburger menu is in the middle and that occupies a lot of space this reducing the size of the header image.

@kharisblank I was wondering if you could help me out with this

Hi,

​Please accept my apologies for the delay in response. I really appreciate your patient.

Try adding this CSS code to your website’s Additional CSS.

    @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
aThemes Support

Hello @kharisblank

Thank you so much for your response. You have helped me with my query.

Is there any way in which we can increase the size of the header slider on the mobile phone and decrease the size of the menu background?

I have attached a link of my website for your reference

https://platinarealestate.com/

Looking forward to hear from you :grin:

Hi,

Thank you for trying.

Try adding this CSS code:

    @media only screen and (max-width: 1024px) {
      .site-header {
        padding-top: 2px;
        padding-bottom: 2px;
      }
    }

    @media only screen and (min-width: 768px) and (max-width: 1024px) {
      .site-header .col-md-8 {
        position: relative;
        height: 100px;
      }
      .site-header .col-md-8 .btn-menu {
        position: absolute;
        top: 50%;
        right: 0;
        margin-top: -16px;
      }
      .site-header .col-md-8 #mainnav-mobi {
        position: absolute;
        top: 85px;
        
      }
    }

    @media only screen and (max-width: 767px) {
      .header-wrap .col-md-8 {
        margin-top: -83px;
      }
    }

    @media only screen and (max-width: 600px) {
      .site-header .text-slider .maintitle {
        font-size: 32px !important;
      }
    }

Regards,
Kharis
aThemes Support

Hello, @kharisblank

Thank you so much for your reply :grin:

Should I remove the previous suggested code and add the new one or should I add both?

Once again, thanks a lot.

Looking forward to hear from you

Hi,

No need to remove the older code. You should apply both code.

Regards,
Kharis
aThemes Support

Hi @kharisblank

Thank you so much for helping me out. I truly appreciate it.

Can you please tell me how to increase the height of the header slider to 290px only on the mobile view? While keep the anchor point the same

Also, the hamburger menu is not aligned with my logo on the mobile view can you please help me out with that too?

Attaching a link to my website for your reference

https://platinarealestate.com/

Once again thank you so much :grin:

Looking forward to hear from you.

You’re welcome!

For other query about the height of main slider on mobile screen, seems likely we need a separate topic to avoid endless threas in this topic. Please raise a new topic for this. And note that we’d request avoiding asking multiple questions in a single topic. Use one topic for single question instead, so we can maintain these support forums in good order. Thank you for helping us.

Regards,
Kharis
aThemes Support

Okay got it!

Thanks once again for all your help :grin:

1 Like