White line above mobile header and logo mobile position

[estudiowam]

Hi, Support!

Hope you are ok!

I’m having problems with how the header is displayed on mobile sizes.

When the width of the screen is less than 768px, the theme shows a white line above the header.

When the width is less than 480px, the site logo is automatically centered and it looks weird.

I would like to know if there is a way to do the following things:
1) Remove the white line.
2) Float left the logo (as when the screen width is above 480ox width) when the device width is less than 480px.

I’m attaching an image to show you what I’m talking about.

Thanks in advance!

Paco.

Attachments:

You must be logged in to access attached files.

[Veena]

Pls use the below Custom CSS in themeoptions –

@media only screen and (max-width: 767px)
#header > .inner > .wrap {
padding-top: 10px;
}
@media only screen and (max-width: 479px)
#site-logo a{
float: left;
}

[estudiowam]

Thanks, @phoenix!

That worked fine.

I’ll ask one more thing.

After applying those changes the logo is not aligned with the responsive menu icon.

Can you provide me with the classes or ID’s where I can change de padding or margin to align them so they can be vertically centered?

I’m attaching a screenshot to explain what’s happening.

Thanks in advance.

Attachments:

You must be logged in to access attached files.

[Veena]

Pls use the below custom CSS in themeoptions –

@media only screen and (max-width: 767px)
{
#site-logo a{
margin-top: -15px;
}
}

[estudiowam]

That is f*cking awesome!!!!!!

Now you can mark this thread as resolved.

Thank you very much, @phoenix

Have a nice day!

[Author]

Posts