Navigation

    APPDRAG Community

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Popular

    REMINDER

    Please be respectful of all AppDragers! Keep it really civil so that we can make the AppDrag community of builders as embracing, positive and inspiring as possible.

    Header Overlay

    How-to, Tutorials
    4
    8
    787
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • J
      Julius Caesar Cortes last edited by

      Hi!

      Just want to ask if anyone was able to have their header overlay with their Hero Image?
      Stripe.png

      This is Stripe's website. I'd like to hear your thoughts on how you were able to merge the "header" with the hero image, essentially overlapping the two.

      1 Reply Last reply Reply Quote 0
      • Wassim
        Wassim last edited by Wassim

        Hello,

        From an AppDrag point of view what I would do is :

        • a first section with the logo + menu
        • in this menu => edit => desktop design => check "keep the topbar transparent until the user scrolls" and ""Fixed on Top"
        • build a second section that contains the "gradient" background image
        • on this section => edit => separator => bottom => and add the white diagonal
        • then add in this section the title + text + buttons on the left and the image on the right
        A 1 Reply Last reply Reply Quote 4
        • J
          Julius Caesar Cortes last edited by

          Hi, Wassim!

          Thank goodness. Was able to make it work!

          You're a legend, man.

          Have a great day!

          1 Reply Last reply Reply Quote 0
          • J
            Julius Caesar Cortes last edited by

            Although, in my case, I have to "Fix it on Top". Still, it works 🙂

            1 Reply Last reply Reply Quote 0
            • Wassim
              Wassim last edited by

              Hi,

              You're welcome 🙏
              Right it's required in addition to the "keep transparent on scroll", I will edit my answer for other users thank you 🙂

              1 Reply Last reply Reply Quote 1
              • A
                Academy for Certification - Training Ltd @Wassim last edited by

                @Wassim could you do me a favour and add a screenshot for the step "in this menu => edit => desktop design => check "keep the topbar transparent until the user scrolls" and ""Fixed on Top"

                I know that I have seen that option somewhere but half an hour of clicking around, I cant find it.

                Maciej Bienkowski 1 Reply Last reply Reply Quote 0
                • Maciej Bienkowski
                  Maciej Bienkowski @Academy for Certification - Training Ltd last edited by

                  @Academy-for-Certification-Training-Ltd

                  cfc614bc-f5c0-492b-a891-0869f5163ea3-image.png

                  Click on your menu --> then brush icon --> menu --> desktop design (as in the picture)

                  A 1 Reply Last reply Reply Quote 2
                  • A
                    Academy for Certification - Training Ltd @Maciej Bienkowski last edited by

                    @Maciej-Bienkowski Thank you so much for taking the time to do this.

                    1 Reply Last reply Reply Quote 1
                    • First post
                      Last post