[Support request] homepage navigation inside first container

Home Forums Support [Support request] homepage navigation inside first container

Home Forums Support homepage navigation inside first container

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1927343
    Rob

    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
    homepage navigation

    Thanks
    Rob

    #1927346
    Elvin
    Staff
    Customer Support

    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

    #1927364
    Rob

    Hi Elvin,

    Thanks – here you go:

    Homepage Navigation

    #1927376
    Elvin
    Staff
    Customer Support

    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. πŸ˜€ )

    #1927463
    Rob

    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 πŸ˜…

    #1927509
    Elvin
    Staff
    Customer Support

    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. πŸ˜€

    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%;
    }
    }
    #1927909
    Rob

    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

    #1928037
    Ying
    Staff
    Customer Support

    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 πŸ™‚

    #1929832
    Rob

    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

    #1930438
    Ying
    Staff
    Customer Support

    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 πŸ™‚

    #1933631
    Rob

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

    #1934000
    Ying
    Staff
    Customer Support

    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.

    #1934515
    Rob

    Great, thanks Ying

    #1934933
    Ying
    Staff
    Customer Support

    You are welcome πŸ™‚

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