Making a menu item appear on sticky only

Support
#1

I have created a one page header, which on that page I use a sticky header on scroll down beyond the slider above the masthead. That part I have working.

On the sticky menu is it possible to highlight the last menu item (buy tickets) to only appear once sticky and give it a different CSS background colour and icon to make it an orange button within the menu bar.

I guess colours can be changed by CSS, but how do I make it so that only happens once I hit the sticky part?

What I want is to make the Buy Tickets menu item:

  • Add a ticket icon
  • Make background orange with text centralised within that)
  • Float that menu item to the right

#2

Hi There,

The HTML access details is incorrect.

Could you please double check?

Thank you.

#3

Hi Thai,

Just reset it and checked it works, should be ok now to access.

#4

Hey @ocduk,

I recommend that you use a Button element for your Buy Tickets link because this would require a lot of custom CSS using the current setup which is the link being part of the menu. You also would have more flexibility this way. Here’s the setup steps.

  1. Add and configure a Button element in your Bar. Here is the Button element’s documentation.

  2. To float the button to the right, you need to set your Container’s Flex Layout to Space Between

  3. To drastically move the button to the right, your Bar’s Content Max Length should be increased.

  4. To hide the button and show it only when the bar is fixed, you will need to add this code to the button’s Element CSS.

$el {
  display: none;
}

.x-bar-fixed $el {
  display: inline-block;
}

I’ve recorded the whole setup so you could see the actual steps. Please see https://youtu.be/t0o_aIQ9ub0. This might also help other users with similar need. Pause and play the video to follow along the setup.

Thanks.

#5

Just saw on the page you had done it before I saw this reply, looks perfect, thank you so much. I will have a look at the video to see what you did.

#6

You’re so much welcome!

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.