Banner Disappears When scrolling down on website

Yes you can add position: fixed; in Simple Banner Custom CSS. And then you’re going to want to add some positioning css to your fixed header in Custom Site CSS:

div#page-container {
    margin-top: 0 !important;
}
.et-fixed-header {
    margin-top: 89px;
}

So it works, but the full banner is not showing, Take a look a1garage.com. Let me know if I need too add anything else.

Thank you so much!!!

Make sure you put

position: fixed;

in the Simple Banner Custom CSS.

that is how I have it the simple banner CSS.

Nevermind, it works when I’m logged out of wordpress.
Thanks again

Oh yeah i didn’t see it in there when i wrote my reply but i see it now. Glad its working.

Sorry to bug you again , I have 2 new issues in moblie mode.

1. If you see the website on mobile view now the banner is is hidden on page load, but shows when you start to scroll. Is there a way to keep this from happening?

2. When you scroll down you can see it banner, butthe banner in mobile mode cover some of the texts. Is there a way to keep this from happening?

a1garage.com

Thanks Again

So it looks like your header CSS changes 4 times at different widths so it’s going to take me a bit to have a complete solution for your site. I’ll have more time to look at this tonight, but for an immediate fix, its probably best to just have the banner not fixed in mobile views. So in Custom Site CSS, add:

@media only screen and (max-width: 767px) {
.simple-banner {
    position: relative;
}
}

I’ll change this support topic to unresolved so I know to look at it again.

Thanks man, Thats fine. I will look for your update soon.

Alright @rob4554 lets get this looking perfect. I’m going to put everything in here that you should put in your custom Custom Site CSS field in addition to what you currently have. Once that is done you can copy paste everything you have in a response and i’ll tighten everything up because I think we’re gonna have some duplicate code here.

So in Custom Site CSS, add:

#main-header:not(.et-fixed-header) {
    margin-top: 89px;
}

@media only screen and (max-width: 980px){
img#logo {
    max-height: 80px !important; //Change this number to change the logo size
}
.simple-banner {
    position: relative;
}
}

@media only screen and (max-width: 767px){
header#main-header {
    margin-top: 89px;
}
}

@media screen and (max-width: 568px){
header#main-header {
    margin-top: 0px;
}
}

Let me know how this works. Your site is especially tricky because theres inline styles and the header positioning starts at fixed, then changes to absolute, and then relative, usually I only see 2 so that was particularly challenging.