Tagged: background image, logo, overlapping
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.
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
That worked! Thank you!