Mobile Burger Menu not lining up properly

[Heike_Eco]

Hi there,

My burger menu on the mobile is not in lie with the logo which makes it look ugly.

How can I make these line up?

[mldarshana]

Hi There @Heike_Eco

Thanks for writing in! Could you please try adding the following media query into your X -> Theme Options > CSS area and see if that helps.

@media(max-width:320px){
  .x-brand.img {
    max-width: 200px;
  }
}

Hope that helps.

[Heike_Eco]

@mldarshana

@media(max-width:320px){
.x-brand.img {
max-width: 200px;
}
}

Hi Mldarshana,

I tried it but unfortunatley hasn’t worked - any other possible suggestions?

Thank you

[nabeel]

HI again,

Please replace the previous code with the following code:

@media screen and (max-width: 480px) {
    .x-brand img {
        max-width: 180px;
    }
}

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Cheers!