Hi there,
How can I recreate the following header thing like the apple website as you can see here:
I have to disable the sticky header and what’s the next step? I want the following under header blurry thing
Hello Katarina,
Thanks for writing in!
First, please check out this video tutorial:
You may need to insert several bars and then set the 2nd bar as sticky. At the moment, your header looks like this:
If you want the blue one to be sticky, please enable the sticky option in the bar settings. For the semi-transparent background color, might need you to set a custom CSS to be able to do that. Please give us further clarifications.
Thanks.
Hey Ruenel,
Thanks for your reply,
I have watched the tutorial you sent, and it is not what I wanted
In the video I sent down below the header (Apple website) there’s a second header that it is blurry and it follows as you scroll
Hi Katarina,
Can you please mark the specific header into a screenshot to understand which header you trying to pointing out? I would also request you to follow the last few instructions given by my colleague and add a new bar and adjust the background color, opacity. Please let us know if that works for you.
Thanks
Hi Tristup,
This is what I talk about: https://prnt.sc/zlsb6v
As you can see here:
When you scroll it follows you and it is blurry
How can I re-create that?
Hi Katrina,
It seems that you are talking about the specific header background, which is a little transparent when it is sticky. If that is the case, you need to create 2 different bars with similar structure and content and make one sticky and hide initially with little transparent background color from the duplicate header.
I have tried the same in the local environment and it works. Please find the video which describes the settings and attributes.
https://www.awesomescreenshot.com/video/2770680?key=98d81e57c7eb53ba44fa784a68446b0f
Hope it helps.
Thanks
Hi @tristup
Thank you for recording the tutorial for me! This was very helpful and kind of you… I appreciate it
Since every sub-header will be different for each other page (other text) like this for example:
How can I create the following header for separate pages
Hopefully, you understand me
HI Katarina,
Using the Pro Header Builder you can create multiple headers with different designs and assign them to your designated pages. I suggest that you also update your Pro theme to the latest version. Check the articles below for the conditions and assignments for your headers.
- https://theme.co/docs/conditions-and-assignments#assigning-headers-footers-and-layouts
- https://theme.co/docs/header-footer-overview
- https://www.youtube.com/channel/UCgY5E3tOI83kBEahh9Y3uRg/search?query=header%20builder
Hope that helps.
Thank you.
Could you maybe create a short tutorial for me so I understand? please
Hello Katarina,
Since every sub-header will be different for each other page, you will have to create several custom headers. You can simply duplicate a custom header and then change the sub-header. You can then assign each of the custom headers to the specific pages you want it to display. While you are editing the header, find the Settings (Gear icon) and set a condition:
In the sample screenshot above, the custom header my header will only be shown in the “About” page.
Hope this makes sense.
Hey @ruenel
I made it but the sub-header is a little buggy… It is not smooth at all when I scroll to the top
Pls reply as soon as possible
Hello Katarina,
Go to your Header -->Select the Bar—>Click on the Sticky —>Set the Shrink Amount as per your design and customize the Trigger Selector as per design.
Thanks
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.