[Resolved] “Floating” Header on homepage

Home Forums Support “Floating” Header on homepage

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1354954
    fabiosilva

    Hi!

    I would like create a header similar to this image:
    https://i.ibb.co/SVXtwvD/menu.jpg

    Only on homepage (desktop view, +important), and with a background slideshow.

    Any simple way to create this using Generatepress?

    I belive that it is possible (using elements and some css), but I am not finding similar cases in this forum.

    Thank you! 🙂

    #1354962
    David
    Staff
    Customer Support

    Hi there,

    create a New Header Element:

    https://docs.generatepress.com/article/header-element-overview/

    Add your Slider Shortcode to Hero content, and set the hero and inner container to full width.
    Go to Site Header tab and enable Merge with Site Content.
    Then if you wish you can enable and change the Navigation colors.
    Set the Display Rules for Front page

    Once thats done, share me a link to the site and ill look at the CSS required to add the space around the nav.

    #1354973
    fabiosilva

    Hi, David

    Thank you for your support.

    I maked this changes, and update site URL on this topic.

    #1354980
    David
    Staff
    Customer Support

    Try this CSS:

    .header-wrap .inside-header {
        background-color: #003556;
        padding: 20px 40px;
        margin-top: 20px;
    }
    #1354983
    fabiosilva

    Thank you, again!

    Works fine!

    But, it’s possible disable the “Merge” using media queries?

    So, basically, I would like to disable the merging content starting “x” page width size.

    #1354997
    David
    Staff
    Customer Support

    Remove the CSS i provided and try this instead:

    @media (min-width: 768px) {
        .header-wrap {
            position: initial;
        }
    
        .site-header {
            background-color: #003556 !important;
        }
    }
    
    @media (min-width: 1200px) {
        .header-wrap {
            position: absolute;
        }
    
        .header-wrap .inside-header {
            background-color: #003556;
            padding: 20px 40px;
            margin-top: 20px;
        }
    
        .site-header {
            background-color: transparent !important;
        }
    }
    #1355199
    fabiosilva

    Solved! Thank you. 🙂

    #1355210
    David
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.