- This topic has 15 replies, 3 voices, and was last updated 6 years, 12 months ago by Tom.
-
AuthorPosts
-
March 31, 2017 at 10:14 am #299991Gabriele
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.
March 31, 2017 at 11:06 am #300010Roberto EnriqueThat 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…
March 31, 2017 at 11:27 am #300021GabrieleHi 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
April 1, 2017 at 12:39 am #300208TomLead DeveloperLead DeveloperLet me know when you make those tweaks! Then a link to your website would be helpful 🙂
April 1, 2017 at 3:46 am #300249GabrieleYes 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
April 1, 2017 at 8:30 am #300316TomLead DeveloperLead DeveloperHave 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.
April 1, 2017 at 9:20 am #300347GabrieleYes 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?April 1, 2017 at 11:24 pm #300543TomLead DeveloperLead DeveloperAny reason why you’re setting the container width to 1920px and not something more contained?
April 2, 2017 at 5:08 am #300624GabrieleSimply 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…April 2, 2017 at 10:02 am #300720TomLead DeveloperLead DeveloperCan I see what it looks like when you add your wrapper div to the after header hook?
April 2, 2017 at 10:34 am #300741GabrieleYes sure, take a look now… the padding is added also to the header and appears doubled to the content…
April 2, 2017 at 6:53 pm #300895TomLead DeveloperLead DeveloperYou 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.
April 3, 2017 at 3:03 am #300984GabrieleOps 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 hookApril 3, 2017 at 9:37 am #301157TomLead DeveloperLead DeveloperTry 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.
April 3, 2017 at 10:27 am #301170GabrielePerfect!
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 🙂 -
AuthorPosts
- You must be logged in to reply to this topic.