[Support request] background on the header.

[Jusung]

I just wanna ask a question.

I wanna put a background on the header and put the menu on the bottom side.
In this case, am I supposed to use Elements block?

Could you tell how I can approach this?

When you see my naver blog(the link), you can see I have backgrond image and put menu on the bottom side.

[Fernando]

Hi Jusung,

Yes, a good approach would be to use a Block Element – Hook. Hook it to before_header.

If you’re planning to add the Featured image for this Header image, you can use a Block Element – Page Hero instead. Just use the same hook – before_header.

[Jusung]

But the menu has to be inside the featured image but on the bottom part inside the featured image.
Would it still work?

[Jusung]

To make this, I guess i just have to use elements(hook – header) right?
I wannt put the menu inside the featured image.

[Fernando]

Yes, you can use a Block Element – Site Header.

You can also use a Block Element – Page Hero. Just hook it to before_header. It should still work but we need some custom CSS. Example: https://share.getcloudapp.com/mXubJX8B

[Jusung]

When you check my site now, you can see the menu under the image..
I need to include the menu inside the image..

on the bottom part inside the image..
Is there any way to do this?

[Fernando]

Yes, there’s a way.

Can you first create a Header Element displayed on your Front Page?

Set the merge option to merge.

Reference: https://docs.generatepress.com/article/header-element-overview/#site-header

[Jusung]

I added the image on the “container background” and used “after header”
Then it works now.

but I wanna make the menu appear on the bottom part on the image.
Also, since it is the background image, I had to give 70vh.

Is there a way to show the full stable size of the image?

[Fernando]

You can use an Image Block instead.

We just need the merge Header Element to ideally put them in one div. Then, with that structure, we can place the nav at the bottom of the image.

[Jusung]

I changed it to the image now and it is ok.

could you elaborate how i can put it on the bottom part?

[Fernando]

Create a Header Element. Set it to display on your Front Page.

Set the merge option to merge.

Reference: https://docs.generatepress.com/article/header-element-overview/#site-header

Afterward, we’ll add custom CSS to fix the position of the sections.

[Jusung]

Yes I have done it and the menu is merged now.

I just need to put it on the bottom part.

[Fernando]

Can you clear any caching mechanism you have? I’m not seeing it implemented on my end.

[Jusung]

Just cleared the caching.

the menu and image are merged but the menu is on upper side.

[Fernando]

I see it now. Can you set the hook of the Block Element for the image to before_header?

[Author]

Posts