[Resolved] Full Width Header & Sign Up Form

[Nat]

Hi Tom,

While waiting for an answer to this post https://generatepress.com/forums/topic/inline-sign-up-form/ I have more questions if you don’t mind.

I’m having some troubles figuring out how the header section works. I’m building a site and I want an inline signup form in the header. Something like this…

http://www.proctorgallagherinstitute.com/

I want the blue div to have a full width (like the above website) but for some reason I keep getting this result…

http://postimg.org/image/pm5xj81sp/

I pasted the embed video and HTML code of the signup form to “Before Header Content” (GP Hooks).

I also tried pasting it to wp_head and it worked but I want to be able to disable the element (header) in the post section and I can’t. How can I set the blue div to full width and disable it in the blog post section?

Thanks.
Nat

[Tom]

Hi Nat,

What happens when you place it in the “After Header” hook?

I think that will make it look much more like the site you showed as an example 🙂

[Nat]

Hey Tom,

This is what I want…

http://postimg.org/image/qifbon4dr/

I tried what you suggested (“After Header” hook) and it works. BUT I need to add it in the header because I want to be able to DISABLE it. In other words, I don’t want to show the video and form when visitors are in a blog post.

[Tom]

In order to get the header to allow full width content, you’ll need to add this CSS:

.inside-header.grid-container {
    max-width: 100%;
}

[Nat]

Hey Tom,

It doesn’t work adding your code. See image below.

https://i.imgsafe.org/aedec12.jpg

I want it exactly as the full width navbar (the black one that’s below). From side to side. What I did instead is this (just let me know if it’s fine to leave it like that) and it worked!

`.inside-header {
padding:0;
margin:0;
max-width:1440px !important;
}

[Nat]

Problem solved Tom!

This is the code…

.inside-header.grid-container {
    max-width: 100%;
    padding:0;
    margin:0;
}

Thanks for your time!
Nat

[Tom]

Perfect, glad you got it working 🙂

[Author]

Posts