How to Enable Large Banner Logo on Mobile

The homepage of the Oxygen theme includes an optional image logo area right above the headline text. By default, Oxygen hides this logo on mobile devices to prevent overflow issues on smaller screens.

However, if you'd like to override this and show the large logo on mobile devices, simply do the following:

Step 1). Enter the HTML/CSS editor in the Weebly builder.

Click on the "Theme" tab, then click on the "Edit HTML/CSS" button.

Step 2). Click on the "main.less" header type.

You'll find it under "header styles" on the left-hand side of the editor.

Step 3). Scroll down to around line 2,462 and find the following code:

Tiime to do some scrolling! Scroll down to around line 2462 and find the code in question. We recommend doing a CTRL + F search for "banner-img" and then clicking "enter" a few times to cycle through the search results until you reach the code block as seen above, at around line 2462.

This block of code is actually located in a media query (a block of CSS code that includes CSS rules for mobile devices--this is how we make the theme responsive). The block of code tells the browser that if the user is on a mobile device, do a "display:none" for the banner-img.

To keep the banner-img (what we call the logo) from disappearing on mobile, simply change the "display: none !important;" to "display: block !important;"

If you experience overflowing issues, add a width constraint (like "width: 90% !important;").

So we would end with this...

That's it! Save your work and you're good to go.

If something doesn't work, please shoot us a support ticket. We'll do our best to help you.

Thanks!