KINGSLEY CHIMEZIE CREATIONS
  • Home
  • About
  • Blog
  • Contact

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

Reply
kuldeep
26/1/2021 13:55:55

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

Reply
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.)

Reply
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.

Reply
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.

Reply
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)

Reply
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

Reply
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.





Reply



Leave a Reply.


    blogs by

    Kingsley Chimezie

    Picture

    PayPal.Me

    Archives

    October 2020
    September 2020
    August 2020
    January 2020
    November 2019
    June 2018
    April 2017
    March 2017
    January 2017
    March 2016
    February 2016
    December 2015
    October 2015
    May 2015
    April 2015
    February 2015
    January 2015

    Categories

    All
    Applications
    Dev
    Frp
    Notion
    Phones
    Photoshop
    Samsung
    Smartphones
    Tech
    Tutorials
    Windows OS
    WordPress




    © Kingsley Chimezie
    ​  All Rights Reserved
Powered by Create your own unique website with customizable templates.
  • Home
  • About
  • Blog
  • Contact