- This topic has 13 replies, 3 voices, and was last updated 2 years, 6 months ago by Ying.
-
AuthorPosts
-
September 11, 2021 at 10:42 pm #1927343Rob
Hi,
I’m using GeneratePress with GenerateBlocks – loving it so far!
Is there a way to have the navigation block appear *inside* a container just on my homepage at https://www.cazsayles.co.uk ?
I’m happy with the navi as-is for other pages
Thanks
RobSeptember 11, 2021 at 10:46 pm #1927346ElvinStaffCustomer SupportHi Rob,
I’m not exactly sure what you mean.
Any chance you can provide a mockup image of how you want it to be laid out on homepage? So we have a clearer idea on how to approach it.
Let us know.:D
September 11, 2021 at 11:15 pm #1927364RobSeptember 11, 2021 at 11:37 pm #1927376ElvinStaffCustomer SupportAh, in that case I think you can do that by creating Header Element.
Follow this procedure:
– Create a Header element
– On the Site header tab, set the “Merge with Content” dropdown to “merge”.
– On the same tab, make sure all the background colors are empty or transparent.
– On the Display rule tab, set the location to “Front page”.Save the HEader Element. Check home page’s front end if it fits the empty space. If it doesn’t let me check and see what we can about it. (It’s likely a bit of CSS adjustment. π )
September 12, 2021 at 1:56 am #1927463RobThanks Elvin
It’s pretty close: https://www.cazsayles.co.uk/
Need to possibly expand the overall page width for desktop (making logo fit on blue background to left), and center the navi elements (rather than align right) plus remove their background color?I also need to wrestle with GP/GB for general layout on tablet/mobile π
September 12, 2021 at 2:40 am #1927509ElvinStaffCustomer SupportThis is going to be tricky to pull off because the visible part of the BG image varies depending on viewport size.
If you check the page hero on a 4k screen, you’ll see what I mean. π
If you want move the navigation around try this CSS:
.nav-float-right nav#site-navigation { margin-left: 5%; }
Change the value to your preference.
And if you want different values depending on viewport sizes, add media rules.
Example
/* for tablets and smaller desktops */ @media (min-width:769px){ .nav-float-right nav#site-navigation { margin-left: 5%; } } /* for desktops 1025px or larger */ @media (min-width:1025px){ .nav-float-right nav#site-navigation { margin-left: 8%; } }
September 12, 2021 at 8:32 am #1927909RobThanks Elvin
Yep, the bg image is a challenge; wondering if it should be fixed size/position for each of desktop/tablet/mobile?
Is that easy to do?
I assume (esp with breakpoint changes I’ve made and Off-Canvas mobile navi) that positioning should be easierBest wishes
RobSeptember 12, 2021 at 12:02 pm #1928037YingStaffCustomer Supportwondering if it should be fixed size/position for each of desktop/tablet/mobile
You’ll need to test in different screen width and write CSS to place the bg image to different position with different media query.
It’s doable, but will require some time for sure.
You can use some thing like this:
@media (min-width: 769px) and (max-width: 1200px) { the-hero-container-class { background-position: 30% 50%; background-attachment: cover; } }
You can adjust the position by adjusting the
30%
(x direction) /50%
(y direction).
You can also adjust the image size by adjusting the value ofbackground-attachment
.Here’re some more properties that might be useful:
https://www.w3schools.com/cssref/css3_pr_background.aspHope you can work it out, it seems a very nice design π
September 14, 2021 at 1:58 am #1929832RobThanks Ying – actually rebuilt the background and set the woman image as a PNG column, so all works better now:
One question; is it possible to create/apply some kind of CSS wave background? (the current background is a static PNG)
Might be fun to have a slow moving wave effectSeptember 14, 2021 at 9:33 am #1930438YingStaffCustomer SupportIt looks nice π
is it possible to create/apply some kind of CSS wave background?
I think so, there’re lots of CSS bg effect on internet, if you find one, you can try using this selector:
.gb-container-3a1d02a1
.Also set the background image to somewhat semi-transparent so that the CSS effect will show through the bg image.
Let me know if you need further assistance π
September 17, 2021 at 6:43 am #1933631RobThanks Ying – so to clarify, I’d simply use .gb-container-3a1d02a1 as the container?
September 17, 2021 at 10:21 am #1934000YingStaffCustomer SupportYes, give it a try first, if it doesn’t work, we can have a look for your later.
As you can see in the below screenshot, it’s the current background CSS in the blue box for the container.
https://www.screencast.com/t/UBttXgrx5So remove the background you added from GB container block, then add the dynamic background CSS to
.gb-container-3a1d02a1
.Please be noted, if you remove this container add a new one, the container ID will change in that case.
September 18, 2021 at 3:38 am #1934515RobGreat, thanks Ying
September 18, 2021 at 11:12 am #1934933YingStaffCustomer SupportYou are welcome π
-
AuthorPosts
- You must be logged in to reply to this topic.