Logo overlapping background image in mobile browsers

Tagged: background image, logo, overlapping

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Posts
May 27, 2015 at 10:02 pm #450819

zac51
Participant

I have a website I recently created using the Enfold Theme with the menu beneath the logo. Logo is justified to the left. And the background image is justified to the right. It looks great on computers. But on mobile devices, the background image collapses with the narrow viewport and the two images stack and look bad. I would like for the logo to stack above the background image once the images start overlapping. Is there a way to accomplish this using the background image? Or is there an alternative way it can be implemented?

Thank you for your timely instruction. And thank you for a great theme.

May 28, 2015 at 4:12 pm #451227
Elliott
Inactive Moderator
Hi zac51!

So on small screens your wanting the “cowboy” image to display on top and the “allied” image to display beneath it?

If so then try adding this to your custom CSS.
```
@media screen and (max-width: 767px) {
div#header_main {
  height: 200px;
}
.header_color .header_bg { background-position: bottom left !important; }
}
```
Best regards,
Elliott
May 28, 2015 at 7:42 pm #451392

zac51
Participant

That worked! Thank you!
Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

The topic ‘Logo overlapping background image in mobile browsers’ is closed to new replies.