Customizing Ethos Header Background

[aovinc]

We are using the Ethos stack, and want to know if we can put a background image or pattern behind the header logo (above the main menu)
This is what we would like to do: Currently it is plain with just the logo, no background dots

We also would like to put a simplified logo on the menu bar that appears when you scroll down
What we would like when you scroll down, it will appear when the top header logo disappears

How do I manage this?

The site is aovinc.com but we currently have an under construction page up.

[christopher]

Hi there,

Please add the CSS code below to X > Launch > Options > CSS:

.x-logobar {
    background: url(http://via.placeholder.com/1200X300) no-repeat center center;
    background-size: cover;
}

Change the URL of the background with the one you have.

To make the logo go at the top of the first place you need to go to X > Launch > Options > Header and set the logo to be stacked:

To make the navigation be sticky you need to set this option:

Our theme does not have an option to appear a logo after the navigation goes to the sticky mode.

One thing that is a customization and is outside of our support scope is that you add a menu item and instead of having a label for the menu you add the image tag code: <img src="http://via.placeholder.com/200X200">:

You will also need to add a CSS Class of showonsticky

Then you can add the CSS code below to X > Launch > Options > CSS:

.x-navbar:not(.x-navbar-fixed-top) .showonsticky {
    display: none;
}

Thank you.