homepage navigation inside first container

Hi 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

Hi Elvin,

Thanks - here you go:

Homepage Navigation

Ah, 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. :D )

Thanks 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 😅

This 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. :D

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%;
}
}

Thanks 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 easier

Best wishes
Rob

wondering 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.asp

Hope you can work it out, it seems a very nice design :)

Thanks Ying - actually rebuilt the background and set the woman image as a PNG column, so all works better now:

http://www.cazsayles.co.uk

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 effect

It 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 :)

Thanks Ying - so to clarify, I'd simply use .gb-container-3a1d02a1 as the container?

Yes, 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/UBttXgrx5

So 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.

Great, thanks Ying

You are welcome :)