Simple Banner Appears Behind Page Items

Hi @emilyharrishpna
Sorry for the delay. Your website theme is a bit tricky with its HTML placement so unfortunately there is no easy way to put the banner below the navigation with the current set of Simple Banner tools. However, you should be able to get this affect by setting the z-index to 5, and adding the following custom css:

@media (min-width: 48em) {
    .simple-banner {
        top: 148px !important;
    }
}
@media (min-width: 75em) {
    .simple-banner {
        top: 156px !important;
    }
}

.simple-banner {
    top: 97px;
}

You can put this in the Website Custom CSS section or in a custom CSS plugin of your choosing. Let me know if that works.

Hi Ryan,

Thanks so much for your help. I added that code and changed the z-index, and now I can’t see the banner. https://staging-hpna.rd.net/

Emily

Hey that custom css needs to go in the Website Custom CSS section in the Pro section. If you don’t have the pro version, there are a number of free custom css plugins you can download from WordPress.

Thank you! It’s showing now, but it’s hidden behind the navigation menu when I’m at the top of the page. Then when I scroll, there’s space between the banner and the menu. Do you know how to fix that?

Hi @emilyharrishpna
For the 2nd issue, i forgot to tell you to put the banner position as relative. That will make the banner scroll away as you go down your website. If you want it to stay there let me know. It will essentially require a similar set of custom css except using the .simple-banner-scrolling class.

For the first issue, can you describe this a bit more? I’m not sure i’m seeing what you’re seeing. Any information you have including browser, browser width, screenshots if possible, would be great!

Hey,

Now it looks great! It’s showing just below the menu without any extra space. If possible, can I have it still show as I scroll down the page?

Thank you!

I think this should work. Set your banner to fixed, and replace all of the previous custom css with this:

@media (min-width: 48em) {
    .simple-banner {
        top: 148px !important;
    }
    .simple-banner.simple-banner-scrolling {
        top: 124px !important;
    }
}

@media (min-width: 60em) {
    .simple-banner.simple-banner-scrolling {
        top: 80px !important;
    }
}

@media (min-width: 70em) {
    .simple-banner.simple-banner-scrolling {
        top: 97px !important;
    }
}

@media (min-width: 75em) {
    .simple-banner {
        top: 156px !important;
    }
}

.simple-banner,.simple-banner.simple-banner-scrolling {
    top: 79px;
}

it’s so close! I’m able to partially see it now behind the main nav. The z-index is still set to 5, should I leave that?

Hey @emilyharrishpna

I’m seeing it on your site and it looks good to me. Are you talking about the expandable nav? For Example when i hover over “Education & Events”?

Hey, it looks good on mobile, but it’s hidden/behind the main navigation (Get Involved, Education & Events, etc.) on my desktop. Here’s a screenshot – https://app.box.com/s/3rbkrnshxg7avkcn086b1ve4h64yleti

• This reply was modified 7 months ago by emilyharrishpna.
• This reply was modified 7 months ago by emilyharrishpna.

Im not seeing the same thing you’re seeing. Could be a browser difference, what browser are you seeing this on? Could you also open the site in incognito mode and see if it’s still showing like that? And if possible could you tell me the browser window width when you encounter this issue?

• This reply was modified 7 months ago by rpetersen29.

I’m using Chrome. It looks good in an incognito Chrome window, though. Could it be a caching issue?

Thank you so much!

Yeah if it looks good in incognito but not on your normal browser that is very likely a browser caching issue. The browser will cache responses from your backend in order to speed up performance. These caches are only kept for a limited amount of time usually but you can clear your browser cache/cookies through chrome settings to speed up the process. If the page was looking incorrect on the incognito mode as well that would likely indicate a server side cache (WordPress cache) or my CSS is wrong. Glad that’s working though, please let me know if you have any other issues.

Great, thank you for all your help!

Hi Ryan,

We pushed the banner to our main site and it looks great! I just noticed there’s not much space on the subpages, though – do you know how to build in some space below the banner/above the page title? Here’s a sample page: https://www.advancingexpertcare.org/tc4hpc24/