Menu on the top

Hi Jusung,

Is this a Secondary menu or your Primary Menu?

You can also build the through a Block Element - Hook. Hook it to after_header.

Just place GB Buttons in a Container Block and give the Container a negative margin top value.

Can you see the page now?
I merged the header and made an elements block(after header)
For the button, I gave class and give negative margin but it didn't work.

the 50% of the button needs to be raised

How did you add the negative margin?

Can you add it through the spacing settings?: https://docs.generateblocks.com/article/container-overview/#spacing

I added class to the button and on the addtional CSS, I added it, but nothing happened. so I deleted it.

Can you add it through the Container Block settings as mentioned? Let us know how it goes.

It works. When the screen is reduced the size of menu should be redueced too.
Do I need to set the padding of buttons seperately?
like on mobile, on table, on PC?

I gave the padding of buttons as %, which works.

However, the location of parent button is not static..

Yes, you can set different Paddings for different views. That should work. Using % works too.

Can you expound a bit more on what this means "the location of parent button is not static.."?

the negative margin. it is not static when the size of screen changes.
I want to make it static, but when I give % padding, it is not static.

for example, I wanna put the menu in the center exactly always.

I see. Can you add the Container Block for the menu inside to Container Block for the Header?

We can do it through custom CSS to position it exactly at 50% horizontally.

I think I have added it, but the page is broken now.

Try adding this through Appearance > Customize > Additional CSS:

.gb-container.gb-container-72c0591f {
    position: absolute;
    left: 50%;
    bottom: 0px;
    transform: translate(-50%, 50%);
    width: 100%;
}

.gb-container.gb-container-72c0591f .gb-button-wrapper-2d692b58 {
    display: flex;
    flex-wrap: wrap;
}

.gb-container.gb-container-763eec58 > .gb-inside-container {
    position: static;
}

.gb-container.gb-container-763eec58 {
    position: relative;
}

It works. but I have no idea how I can adjust the size of button.
I gave padding as % So, the size of button can be reduced when the screen size is reduced.
But giving padding doesn't work..

I give button a class (test1) and
I set this.

.test1 {
padding:15% 30% 15% 30%;
}
@media (max-width: 1024px) {
.test1 {
padding:10% 15% 10% 15%;
}
}
@media(max-width: 769px) {
.test1 {
padding:7% 9% 7% 9%;
}
}

Is there other way to make this?