Move Box in Header Element

Hi Dave,

Does the horizontal alignment option work here?
https://docs.generatepress.com/article/header-element-overview/#horizontal-alignment

Unfortunately not. All that does is align the text to the right or left. I would like to move the whole box.

cheers,

Dave

We could use CSS to move it.

However, the best solution would be to use GenerateBlocks (which you are already using for the content) to build that page hero as the first section of your home page.

We've been making this transition in our site library. For example, the top (page hero looking) section of Prime and Target are actually just part of the home page content:
https://gpsites.co/prime/
https://gpsites.co/target/

You will have far better control this way.

Let me know if this makes sense.

Would that still give me the control to use a merged menu and the paralax feature?

Cheers,

Dave

Neither - simply add that section as your home page content along with all your other content on the home page.

This is what my reply is suggesting above:
https://generatepress.com/forums/topic/move-box-in-header-element/#post-1666070

Do I still get to use the paralax feature and merged header with generatblocks?

Dave

It doesn't look like you are using parallax or the merged option currently.

You can implement a script to use parallax with GB:
https://generatepress.com/forums/topic/can-sections-already-be-replaced-by-generateblocks/#post-1564332

As for merge, you would just need to create a header element like this:
https://docs.generatepress.com/article/transparent-header-and-navigation/

It will merge the first section you've created with GB with the header.

That works, but on mobile I want to use a different background image. How do I do that with this set up?

cheers,

Dave

Try this CSS:

@media (max-width: 768px) {
    .gb-container.mobile-hero {
         background-image: url(https://URL-HERE);
    }
}