Return to previous page

FIXED HEADER THE SAME AS MAIN HEADER - by envatonly envatinonly

This topic has 20 replies, 2 voices, and was last updated 4 years, 8 months ago ago by Olga Barlow

envatonly envatinonly

Participant

July 23, 2019 at 07:19

Hello team,

Below I have attached the main header and the fixed header design.

MAIN HEADER: https://ibb.co/8XQkvvR
FIXED HEADER: https://ibb.co/FWQBgvG

How can I have the exact navigation bar in Fixed Header as the Main Header?
The same design, layout, structure.

So the point is that the fixed Header bar to be exactly the same as the Main Header.

Thank you 🙂

#217536 Copied Theme version: 5.4.1

19 Answers

Olga Barlow

Support staff

July 23, 2019 at 11:38

Hello,

There is no option to compose different layouts of the fixed header for the different header types. But if you provide us with link to your site we’ll be able to provide you code to make the main header as the sticky header.

Regards

#217557 Copied

envatonly envatinonly

Participant

July 23, 2019 at 11:45

Hi Olga 🙂

Thanks for the reply.

I prefer the main header to be as the sticky header, not the sticky header to be the same as main header 🙂

Provided credentials on the private content area…

Thank you so so much 🙂

Just a following recap.

The main header (with search functionality) to be the sticky header…

So this https://ibb.co/8XQkvvR to use it as sticky header as well 🙂

Please contact administrator
for this information.

#217559 Copied

Olga Barlow

Support staff

July 23, 2019 at 12:12

Hello,

Check now, please. Is that ok for you?

Regards

#217564 Copied

envatonly envatinonly

Participant

July 23, 2019 at 13:06

Hi Olga,

Unfortunately, now I can’t see the sticky bar.

it’s like you disable the sticky bar entirely when scrolling up. 🙁

#217570 Copied

Olga Barlow

Support staff

July 23, 2019 at 18:35

Hello,

The whole header is sticky now https://gyazo.com/5cefbe427be32e3e063190f4285b2744
Is that what you wanted or you aked about something else?

Regards

#217586 Copied

envatonly envatinonly

Participant

July 24, 2019 at 06:13

Hey Olga thank you so so much for your reply.

Actually, you have done amazing work here. We are too close to finalizing it.

We need to have the sticky header when you are scrolling up. (!not always!)

Think about it as the smart sticky header. https://ibb.co/2PffgrJ
and apply that functionality only on the { div.header-bg-block }

As I saw on the video you fixed the header with the notification text. We don’t need to have the notification text on the sticky header.

for inspiration please check the https://www.asos.com/women/ this is what we need to make. Check the navigation bar of the https://www.asos.com/women/

Thank you Olga 🙂

Please let me know how to rate on ThemeForest.

#217607 Copied

Olga Barlow

Support staff

July 24, 2019 at 12:21

Hello,

Check now.

Regards

#217635 Copied

envatonly envatinonly

Participant

July 24, 2019 at 13:55

Hi Olga,

Maybe there is a misunderstanding here 🙂

The fixed header bar now is the same as it was when I created the topic.

We need to have the same header bar on both (main header – fixed header)
this one should be the main header and the fixed header https://ibb.co/JjL9K9b
so this navbar be as fixed header as well https://ibb.co/JjL9K9b

NOW you added this header as fixed bar https://ibb.co/4NrNKPT which is wrong.

Thank you 🙂

#217647 Copied

Olga Barlow

Support staff

July 24, 2019 at 16:07

Hello,

Nope, the fixed header is different now https://gyazo.com/ead0e62b9598011f72bdf5d697d23273 not the same as it was before. Try to clear browser cache https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn?hl=en

Regards

#217655 Copied

envatonly envatinonly

Participant

July 25, 2019 at 13:53

Hey Olga you made it!!! 🙂

I clear up the cache and now it works.

But did you notice the user experience? It seems that all the DOM is changing it’s time we scroll up. How can we make it more smoothly.

Please check https://www.asos.com/women/

We don’t want to affect the user experience.

If you see on https://www.asos.com/women/ you will instantly notice there is a huge difference in the UX.

Can we make it more smooth? Without affecting all the HTML elements on the site?
Thank you so so much 🙂 🙂

#217715 Copied

Olga Barlow

Support staff

July 25, 2019 at 16:29

Hello,

I’m not sure what exactly you meant. Both headers work the same https://gyazo.com/359239de7f20d1cc0569a5ffec312376
Anyway, additional customization is not included in our support. I pointed you to the right direction and showed how to customize the fixed header. If you need any smooth effect you can try to implement it using CSS transitions and transforms in case you have appropriate CSS skills or submit customization request here.

Regards

#217731 Copied

envatonly envatinonly

Participant

July 26, 2019 at 07:42

Thank you Olga 🙂

Then we can mark it as solved 🙂 🙂

#217767 Copied

Olga Barlow

Support staff

July 26, 2019 at 10:12

Hello,

You are welcome.

Regards

#217773 Copied

envatonly envatinonly

Participant

July 27, 2019 at 07:13

Hey Olga,

I hope that you are doing really well.

Where is the script you wrote or the CSS rules in order to make some modifications?

As I told you before the UX of this result is really unfriendly, so please can you guide me to make it more friendly?

Thank you 🙂

#217827 Copied

Olga Barlow

Support staff

July 29, 2019 at 09:31

Hello,

You have enabled the Cloudflare and we don’t see our changes. Enable the dev mode in the Cloudflare settings to disable caching and allow us to change the styles. Or install CloudFlare plugin and login to allow us clear cache via Dashboard.

Regards

#217872 Copied

envatonly envatinonly

Participant

July 29, 2019 at 10:06

Hey Olga,

Thank you for your response 🙂

Well, I enabled the dev mode on CF.

Just to let you know. I don’t want to disable it, just to tell me where the script is or the css are located in order to make the necessary adjustments.

Thank you 🙂

#217879 Copied

Olga Barlow

Support staff

July 29, 2019 at 11:57

Hello,

Check now. Is that effect ok for you? We made changes in xstore-child/js/etheme.js file.

Regards

#217904 Copied

envatonly envatinonly

Participant

July 30, 2019 at 08:49

OMGGG OLGA!!!

YEAH!!!!!! That’s what I wanted!!!

Thank you so so much :)))))))))))))))))

Now it’s definitely solved this ticket <3

#217993 Copied

Olga Barlow

Support staff

July 30, 2019 at 09:28

Hello,

You are welcome. We would be grateful if you can leave the rating for our theme on ThemeForest .

Regards

#217998 Copied
Viewing 20 results - 1 through 20 (of 20 total)