Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Adding a Container Wrapper

Home Forums Support Adding a Container Wrapper

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #299991
    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.

    GeneratePress 1.3.46
    GP Premium 1.2.96
    #300010
    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

    Header logo absolute

    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…

    #300021
    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

    #300208
    Tom
    Lead Developer
    Lead Developer

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

    #300249
    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

    #300316
    Tom
    Lead Developer
    Lead Developer

    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.

    #300347
    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?

    #300543
    Tom
    Lead Developer
    Lead Developer

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

    #300624
    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…

    #300720
    Tom
    Lead Developer
    Lead Developer

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

    #300741
    Gabriele

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

    #300895
    Tom
    Lead Developer
    Lead Developer

    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.

    #300984
    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

    #301157
    Tom
    Lead Developer
    Lead Developer

    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.

    #301170
    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 🙂

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.