ASTRA FREE THEME ANIMATED STICKY NAV BAR

Astra Theme Animated Sticky Nav Bar

30/10/2020

9 Comments

Video Guide - Part 1

A full walkthrough guide on what you can achieve with my project and how to initially set it up with your site.

Video Guide - Part 2

A full demo on how to set the custom variables which will allow you to customise the Nav bar and more.

GitHub Repository

Bitbucket Repository

Use this blog post as a discussion page.

9 Comments

Kingsley Enyi

20/11/2020 13:52:27

This is nice!
I like your blog

kuldeep

26/1/2021 13:55:55

soo.. nice
it's really work
thank you so much

Tejas Shah

7/2/2021 09:17:12

Hi!

Thanks for your code. Works well on desktop.
Would be grateful if you could assist on
how to fix an issue on mobile.

The hamburger menu on mobile opens well when on top of the page, but it doesn't display once scrolled.

I mean when I scroll down and tap on the hamburger menu,
it changes into a cross sign but the menu doesn't open
or may be it opens but remains invisible and menu items aren't seen. (Menu doesn't open issue only on mobile and only after scrolling down.)

Kingsley Chimezie link

10/2/2021 10:04:41

Hi, thank you for your comment. For sure I can help you out. Firstly, there could be many reasons for this. For now I'll leave some possible solutions. The only way I could truly help you is by debugging the problem myself, you can contact me via email and I could give you remote support.

First thing I would do is try follow the steps in Part 1 and 2 videos again. Perhaps a step was missed.

Seeing as this only happens when you scroll, then I know the part of my code that code to implement the fix, which is the part that detects a scroll. But there's no point in me explain if you don't know JavaScript. I'm just assuming you don't but if you do let me know and we can got a bit in-depth into this.

Anyway, my code doesn't hide any elements. However, it may be conflicting with the particular Astra template you're using. Can you make a fresh WordPress site using that same template? If my code works on that then it's more than likely something else is conflicting with my code. If it still happens with a fresh install of that template then I'll rewrite my code to make it work with your template and I'll publish it as a fix.

Kingsley Chimezie

23/3/2021 03:19:30

I've fixed this issue, check out the latest code as of the date of this comment.

Josh link

13/1/2022 12:02:47

Hi there Kingsley

I am still experiencing this issue. any ideas what I should adjust to ensure the hamburger menu on mobile stays visible. the header image stays visible but the menu disappears on mobile.

Kind regards
Josh Nienaber

Shaheryar Khan link

30/4/2021 17:13:46

Sir, Thank you for this video. I don't know why this code is not working even I followed every step as you mentioned. My website is alraassociates.com
I have astra theme installed (free version) and making my website by Elementor (free version)

Kingsley Chimezie link

2/5/2021 13:31:39

Hi,

You didn't tell me what the problem is exactly, so I can't really help you. However, after checking out your website, I don't see any issue, my code is working fine. Also looking at my code on your site, you didn't follow my code instructions exactly as I mentioned. For example, navbarPaddingDefault and navbarPaddingOnScroll, you have them set to 1 and 2... That is wrong, you need to put in the px as well. Read the far right where it says "ACCEPTED VALUE EXAMPLES" you should be following the examples.

If you don't follow the structures, it's going to case problems.

I suggest your watch the part 1 and 2 of my videos again.

Kingsley

Abdelrahman link

23/12/2021 11:29:43

Hello Kingsley Chimezie,

I very much appreciate your work and your fantastic code. I have used your code to convert my website navbar to fix the navbar, and It's incredible. I face one problem about it, and I hope you can help me with it.

After I used the code, I found the code worked very well with pages with the transparent Header. Still, it does not work very well in pages with the primary Header or pages containing posts and Breadcrumb. When scrolling, the fixed navbar cuts a considerable amount of the page and distorts the page. I am just want to keep Breadcrumb under the fixed Header just in posts pages.

You can check my website after I add it.
Thank you again for your efforts.

Astra Theme Animated Sticky Nav Bar

Video Guide - Part 1

Video Guide - Part 2

Leave a Reply.

blogs by

Archives

Categories