Docs

[minyona]

Hey there.

I want to make the top bar sticky on all screen sizes, and no longer have the main nav bar sticky. I know how to change the main nav bar in the customizer, but unsure how to make the top bar sticky.

Any help would be greatly appreciated. =)

[minyona]

This reply has been marked as private.

[Thai]

Hi There,

To achieve that, please follow these steps:

1. Set the navbar position to Static Top:

http://i.imgur.com/Xshjac3.png

2. Add the following CSS under Customizer > Custom > Global CSS:

.x-topbar {
    min-width: 41px;
    position: fixed;
    width: 100%;
    top: 0;
}
.x-logobar {
    margin-top: 41px;
}

Hope it helps 🙂

[minyona]

Worked perfectly.

I would like the top bar to span the full width. Currently the consultation button and the links on the left of the top bar line up according to what seems like a container. How can I have them begin at the margins? Like this site: https://www.miami-institute.com/

I also want to make the phone number more prominent. Can I add it as a button that displays the number, but also dials it when clicked on a cell phone?

[Friech]

Hi There,

You can add this under Custom > CSS in the Customizer.

.x-topbar .x-container {
	width: 100%;
	max-width: none;
}

You can add a class x-btn to the phone number link and that will turn to a button.

e.g.
<a href="tel:+14102960414" title="Phone" class="x-btn">410-296-0414</a>

Hope it helps, Cheers!

[Author]

Posts