[Resolved] Sticky above header section for mobile and desktop

Home Forums Support Sticky above header section for mobile and desktop

  • This topic has 11 replies, 3 voices, and was last updated 3 months ago by Leo.
Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1336194
    hemant

    I’m looking for this effect :
    1. On the desktop two sticky buttons side by side above the header : one displaying our phone number and another displaying a call to action(Download now)

    2. On the mobile two sticky buttons above the header : one with a Call Us CTA linking to the phone dialer and and another with a “Download now” CTA

    What will be the easiest way to achieve this?

    #1336226
    hemant

    Also how does one make the secondary navigation stick??

    #1336789
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Let’s do one thing at a time.

    So are both of these buttons basically identical on desktop/mobile?

    If so, I would:

    1. Add an HTML widget to the Top Bar widget area.
    2. As the HTML, do this:

    <a href="tel:123-456-7890" class="button phone-button">123-456-7890</a>
    <a href="#something" class="button download-buttin">Download now</a>

    3. Go into Customize > Layout > Top Bar and set the alignment to center.

    #1337272
    hemant

    1. One of the buttons will work differently on mobile and desktop. On the mobile, the first button will link to the dialer. But on the desktop, it will display the phone number.

    The second button will link to the same page.

    2. The word “buttin” in the second line of code actually means button?

    3. Can the buttons in the top bar be separated from the center?

    #1337991
    Tom
    Lead Developer
    Lead Developer

    1. So will it still be a button if it’s only displaying a phone number? tel: does work on desktop as well if people have a calling app on their computer.

    2. Yes – button is the class.

    3. Like more space between them? If so, you can do this:

    .top-bar .button {
        margin: 0 10px;
    }
    #1338193
    hemant

    1. I think I will settle for the same buttons on both mobile and desktop.

    3. Where do I add this? In additional CSS tab in the customizer?

    4. How do I replace the default background color in the top bar? Also only the color of the buttons in the top bar?

    5. How to make the top bar stick?

    #1338535
    hemant

    Q.4 about background colour I found the answer in the customizer. The button colour also I changed through the customizer. You can ignore the question at least for the time being.

    #1339089
    Tom
    Lead Developer
    Lead Developer

    Glad you found those options!

    Are you still wanting to make it stick?

    #1339123
    hemant

    Yes.

    #1339198
    Leo
    Staff
    Customer Support

    Try this CSS:

    .top-bar {
        position: sticky;
        top: 0;
        z-index: 99;
    }
    #1339964
    hemant

    Exactly what I was looking for. Thank you.

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