Pro - Transparent sticky header with margin at top

Support
#1

Hi there,

is it possible to create the following header with the header builder from PRO?

  • A header that has a gap / margin at the top but is still sticky
  • The background image is a kind of gradient that shimmers through where the text of the menu items is supposed to be, so it’s transparent at these
  • If both of these points are not possible to create, is it at least possible to put this gradient line below the header that then shows which menu item is currently chosen?

I’ll attach an image so that you can clearly see what I’m talking about.

#2

Hi there,

Thanks for posting in.

  1. That’s possible, the header bar has offset option, try toggling on your header Initial Position to Absolute, then another option will appear and you can add Margin Top options

  2. The background can be from slider or section of the page content with the background, and the header is just floating above. You could do that as well.

  3. Active status is possible, but the gradient border is only doable with custom CSS, like from here https://css-tricks.com/examples/GradientBorder/. But it may still look different, is that image instead?

Thanks!

#3

Hi Rad,

thanks for the answer!
I found the options for number 1, that’s working fine.
I don’t understand number 2 though. Is it possible to have the font be transparent so that the background shines through? In the example I showed it’s visible that the first menu items are in a blueish color whereas the ones to the right are more greenish.
The active status is above the background. Is that possible to stick out like that to the bottom? The background is still the same, it’s just one image that starts above the header and goes down just to active status, including it.

#4

Hello There,

What you want to do is not possible without customization. You might be referring to text masking or clipping. Please check out this link:


Hope this helps.

1 Like
#5

About the Primary Particle Style: Is it possible to bring it down to this line below the menu? I tried to use “Location: bottom” but then it’s just below the menu item. If I use custom CSS to relocate it further down it vanishes behind the layer and is invisible. Any idea how I can get it on top and into this green line?
Have a look on the screenshot. This green line below should act as the bar for the Primary Particle.

Thanks in advance,
Andi

#6

Just to be clear I attached another screenshot to show what I would like to achieve.
When I hover over a parent menu item (in this case “Contact”, the green line below that should have the primary particle which in this case should be a white line.
The setup is as follows: one bar that contains the main menu and one bar below that contains this green line.
The height of the menu is set correctly but the primary particle does not appear since it is being overlapped by this green line. I changed the z-index of both but it doesn’t help.

#7

I figured it out! I missed the !important behind the z-index rules.
To whoever might have the same plan: give the bar below the menu a class and in the css of the header you can just insert the z-index: 1 !important; for the class. Then go to the primary particle setup of the menu and in the inline CSS type: z-index: 5 !important; or any other number higher than the number of the z-index of the bar below.

#8

Glad to hear you got it sorted and thanks for sharing the solution.

Cheers!

1 Like
#9

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