Adding Global Banner

Hi there,

how can I make it full width so it stretches across the whole top of the page and no interfere with my current menu?

The area of before_header is full width, so anything added to that hook should be full width by default.

Can I see your site?

For the width issue, you have set the container’s max-width, so remove that along with margin-left and margin-right.

And you are using a header element to merge the header with content, the before_header hook also fall into that category, so it also merges with the content.

Do you only want the header to be merged with the content? Not the top bar?

Let me know 🙂

Did you remove the max-width too?

Based on the screenshot, you do NOT need to merge header with content, so go to appearance > elements, and set the header element’s status to draft.

The height is still way to big for my liking, if I adjust the size of the font will that fix the issue?

It’s because the wp forms is tall, do you know how to adjust the height of the form?
https://app.screencast.com/0pUPewIOIYWKm

Reducing font-size of the headline won’t change the height of the container.

For the menu color, as you removed the header element, so the color set for primary navigation in customizer is working.

If you want the homepage’s site header merge with the content, and have another color for primary nav, then add this CSS:

.home .site-header {
    position: absolute;
    left: 0;
    right: 0;
}

.main-navigation:not(.is_stuck) {
    background-color: transparent;
}

.main-navigation:not(.is_stuck) .inside-navigation .menu-item a {
    color: var(--contrast);
}

As for adding the color CSS, where am I to add this?

Customizer > additional CSS.

The form CSS you found is targeting textarea kind of input, while you do not have that kind of input in your form. It’s a lot more complicated to adjust its position and height. Give this CSS a try:

.wpforms-container .wpforms-field {
    display: flex;
    align-items: center;
}
.wpforms-container .wpforms-field input {
    flex-grow: 1;
    max-width: unset !important;
}
.wpforms-container label.wpforms-field-label {
    margin-bottom: 0;
    flex-shrink: 0;
}

div.wpforms-container-full:not(:empty) {
    margin-block: 0;
}

I just copied and pasted: https://imgur.com/a/JB2foLK

That’s for CSS class, not CSS code, add my code to customizer > additional CSS.

Here’s what the code looks like when I add it: https://imgur.com/a/2vCYfxZ
Here’s what the site looks like: https://imgur.com/a/2vCYfxZ

The two images are identical. Can you check？

I have not published it as yet.

PLease publish it so we can see.

1. Add this CSS as well (those CSS should be provided by the form plugin’s support, not us)

form#wpforms-form-1865 {
    display: flex;
}

div#wpforms-1865-field_0-container, div#wpforms-1865-field_1-container {
    padding-block: 0;
}

.wpforms-submit-container {
    margin-top: 0 !important;
}

2. Reduce the top and bottom padding of the root container of the topbar.

3. Reduce the headline’s font-size.