[Resolved] Sticky above header section for mobile and desktop

[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?

[hemant]

Also how does one make the secondary navigation stick??

[Tom]

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.

[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?

[Tom]

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

[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?

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

[Tom]

Glad you found those options!

Are you still wanting to make it stick?

[hemant]

Yes.

[Leo]

Try this CSS:

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

[hemant]

Exactly what I was looking for. Thank you.

[Leo]

No problem 🙂

[Author]

Posts