[Resolved] Adding a Container Wrapper

[Gabriele]

Hi Tom,
first I’m very pleased with GP, kudos to you!

I’m trying to achieve something like this http://www.effektiv.fr but + the primary navigation full width above the header. So in GP the primary navigation is a full width sticky menu above the header and the secondary navigation is the menu above the content in the Effektiv website.
I would like to leave the primary navigation (and the header itself maybe) full width and add a padding for the secondary navigation, body content and footer, so a wrapper must comprehend only these elements I suppose.
I tried to put div class=”site-wrapper grid-container grid-parent” in GP Hooks “after header content” or “after header” and .site-wrapper padding css but doesn’t work.
Please could you help me with that?
Also I would like to change the behavior for small devices and smartphones (like the site I linked before), how can I do? Is it better to write the css with media queries only for big screens or instead change it for exclude the padding for small devices?

Thanks and have a nice day.

[Roberto Enrique]

That sounds like a lot of tweaking =)

You can actually achieve a very similar layout (http://www.effektiv.fr) using an absolute positioned div (for that floating logo) that you add using some hook (like before_header). You’ll have to play a little with your media queries though.

I’m doing something similar in a website I’m doing right now

The main tweak I did to be able to position the logo exactly where I wanted was:

    .site-header {
   	 	position: relative;
    	margin-top: 0.5em;
	}

	.site-logo {
   		position: absolute;
    	width: 194px;
    	top: -58px;
	}

then I play with different settings on the different media queries, I ussually start my css like this:

/*STYLES JUST FOR DESKTOP*/

@media only screen and ( min-width: 1024px ) {/*Desktop*/
    
}

/*JUST FOR TABLETS*/
@media (min-width: 768px) and (max-width: 1024px) {/*Tablet*/

}

/*STYLES JUST FOR MOBILE*/

@media screen and (max-width: 768px) {/*Mobile*/
        

}

Regarding the logo that changes color on scrolling, that’s something you can do with svg’s and js
The button that opens the slideout navigation on mobile is something really interesting.
Also what they’re doing with that main slider on all the pages is beautiful.

I’m following to see what the others have to say in this regard…

[Gabriele]

Hi Roberto, thanks a lot for your tips, I will try to play a little with that and see what I can achieve…
Yes their website is lovely but very complicated also, I’m trying to take some good inspiration but simplify the things a little bit…
Maybe with some help I can make something whorty!

Thanks

[Tom]

Let me know when you make those tweaks! Then a link to your website would be helpful 🙂

[Gabriele]

Yes sure, but now I’m stuck with the left/right padding stuff…
I’m working locally but I put something online to show you: you can take a look here http://woocommerce-40170-85060-236608.cloudwaysapps.com/
Now the left/right padding is applied also to the header and the primary navigation above the header following your instructions here: https://docs.generatepress.com/article/adding-a-container-wrapper/

The padding should be applied instead only from the secondary navigation below the header, to the content area and the footer.
Could you help me?

Thanks

[Tom]

Have you tried just setting the header and navigation width to full?
https://docs.generatepress.com/article/header-layout/
https://docs.generatepress.com/article/navigation-layout/

Then set your content layout to “One Container”: https://docs.generatepress.com/article/content-layout/

That way the header and nav will be full width, and the rest of the site will be contained.

[Gabriele]

Yes it is exactly what I did, but then I set the container max-width to 1920px, so I need to find a way for smaller screen to nicely preserve the “contained” appearance for the secondary-nav, content and footer.
The solution that I imagined is to give a left/right padding to a wrapper around those areas following your instruction for that (you can see that if you try to resize the window), but I don’t know how to apply the wrapper only for those specific areas leaving the header and primary-nav full width.
I tried to put a div class=”site-wrapper grid-container grid-parent” in GP Hooks “after header content” or “after header” instead of “before header content” but doesn’t work. Any idea?

[Tom]

Any reason why you’re setting the container width to 1920px and not something more contained?

[Gabriele]

Simply because I’m trying to find an easy way to optimise the design for big screens also and I thought this could be a simple way to accomplish that while retaining the contained aspect for smaller screens like laptops.
Maybe you can suggest me another way to accomplish the same result if is not possible to wrap the secondary nav along with the content and the footer…

[Tom]

Can I see what it looks like when you add your wrapper div to the after header hook?

[Gabriele]

Yes sure, take a look now… the padding is added also to the header and appears doubled to the content…

[Tom]

You still have the other wrapper added to the site above the header.

If you remove that one, then the header/primary nav shouldn’t be within that container, but the rest of the site will be.

[Gabriele]

Ops I’m sorry, I forgot to cancel the other wrapper…
As you can see now the secondary nav is still outside the wrapper placing the wrapper div to the after header hook

[Tom]

Try adding this function:

add_action( 'after_setup_theme','tu_move_secondary_nav' );
function tu_move_secondary_nav() {
    remove_action( 'generate_after_header', 'generate_add_secondary_navigation_after_header', 7 );
    add_action( 'generate_after_header', 'generate_add_secondary_navigation_after_header', 15 );
}

That should move the Secondary Nav into the wrapper.

[Gabriele]

Perfect!
Thanks a lot Tom for your help and your time, it is true what I heard, GP has the best support ever for a theme 🙂

[Author]

Posts