[Support request] Page Hero image not updating and locating in the wrong spot

[Devin]

I’m not sure what’s been going on, but for some reason, my page hero isn’t updating when changing my image. A few days ago I placed a test image into my page hero to see what it would look like and ever since then it’s kept this same image despite me changing it to something completely different. I have all cache and optimization settings disabled, so it can’t be that. I’ve tried testing it on a staging site with all plugins disabled as well, but still, no luck. In addition to that, I’m also having issues with it appearing below my “featured articles” despite the location being set to after_header. I’ve attached a screenshot of what the image I’m trying to upload looks like. The text is changing, but the image isn’t. I’m using the page hero template.

[Fernando]

Hi Devin,

Can you check if you’ve set the Dynamic Background image of the Container Block to none?

See: https://share.getcloudapp.com/DOumOW7N

If you’ve set that up correctly and the issue still exists, can you check with your hosting provider if the have a caching mechanism set on your website?

Kindly let us know how it goes. Hope to hear from you soon! 🙂

[Devin]

Alright, that did it for the image. I’ve been trying to figure that out for days so thank you. Any reasoning as to why the hero isn’t positioning directly below the footer and instead under the featured article section? I have the hook set to after header.

[Fernando]

To confirm, do you want this section to appear under the nav bar instead of under the featured article section?

How did you add the Featured article section? Is it also an Element hooked to after_header? If so, that is if they have the same hook, you can try modifying their priority. Priority defines which Element goes first.

See: https://share.getcloudapp.com/NQuxQzBD

Hope this helps! 🙂

[Devin]

Yes, under the nav bar. The featured article section is in fact hooked to after_header. I’ll play around with the priority a bit and get back with you. Thank you!

[Devin]

Changing the priority worked! Thanks again Fernando, you’ve been a huge help. Lastly, since this pertains to the page hero, is there a way to contain the text, change the radius of the search bar for desktop, and change the location so that it’s not underneath my navbar for mobile. If I need to open a new topic for this, please let me know. I’m assuming posting them here will be fine though considering it’s all page hero related.

[Fernando]

With regards to the spacing of the page hero on mobile view, you can change the view of the Block settings to Mobile and set appropriate spacing.

See: https://share.getcloudapp.com/4guZgdPj

To add rounded corners to the Search widget on Desktop, here is a CSS you can try:

@media (min-width: 1025px) {
    form.wp-block-search .wp-block-search__inside-wrapper .wp-block-search__input {
        border-radius: 30px;
        border:none;
    }
}

For the location of the Page Hero on mobile, can you try changing the Navigation Location in Appearance > Customize > Layout > Primary Navigation?

See: https://share.getcloudapp.com/Apuxp526

Kindly let us know how it goes. 🙂

[Devin]

Thanks 🙂 I guess my issue was with my mobile menu breakpoint being too high. After switching it back down to 0 it seemed to fix the issue, but got rid of my hamburger icon in the process. I’m assuming that maybe this is because I only have 3 categories in my header. Will the hamburger icon reappear after the header becomes more populated with categories?

[Fernando]

If you switch this to zero, the mobile menu wont display. Adding more menu items wont make the hamburger button appear again. You’ll need to set it back to 768px.

Can you try changing the Hook name instead to something like “after_navigation”?

Kindly test other hooks that are relatively connected to the navigation as well.

See: https://share.getcloudapp.com/mXuJl0DR

Hope this helps! Let us know how it works. 🙂

[Devin]

Alright, maybe I didn’t figure it out. I was able to get the page hero to appear after the header but for some reason the navigator and menu wasn’t acting right. The menu items weren’t spanning out all the way, the menu button itself was a different color than the rest of the header, and the navigator was producing a drop down search bar instead of the default search bar that appears on desktop. Anyways, I’ve dropped the menu back under the page hero and now the header items are working as they should. The only problem though is that the page hero is still over and not under the header. I’ve tried many different hooks but none, besides the one that made the header not act right, allowed me to place the page hero under the header.

[Fernando]

I see. Here is a custom CSS you can try to fix this:

@media (max-width: 768px) {
    body {
        display:flex;
        flex-direction:column;
    }
    nav#mobile-header{
        order:-1;
    }
}

Kindly let us know how it goes. 🙂

[Devin]

That worked, thanks!

[Fernando]

You’re welcome Devin! Glad that worked! 🙂

[Author]

Posts