I’ve finished my custom theme with Sage 8. As I had a HTML design mockup before, I’ve implemented it in the theme.
Now I have issue with making sticky NavBar(affix), that should be below full page picture(jumbotron), and stick to the top after scrolling to it. Used NavWalker for Bootstrap NavBar.
Does anybody had the same situation ? Maybe it’s a pure WordPress related question…
Thanks
This could be helpful:
I can’t say for sure but I wouldn’t think so, I’d imagine it’s more a question of how you’re implementing the Affix plugin.
What have you done so far? – it would help others to help you if you were to post your code.
Which version of Bootstrap are you using? Affix changed dramatically between 3 and 4. Bootstrap themselves now recommend using the (reasonably well supported) position: sticky (and it’s browser-specific equivalents which Sage should build for you) rather than a Javascript solution.
Yes, @MWDelaney - thanks for the hint, now I realised that it was a Bootstrap version problem. From my research - affix is dropped from Bootstrap 4.
Anyway, this solution does the trick, if someone have similar problem/needs: https://bootbites.com/articles/freebie-sticky-bootstrap-navbar-scroll-bootstrap-4/ working on Chrome/Mozzilla/Edge/IE browers in my case
Now have other issue:grinning:: I’ve copied my whole nav code from header.php, to be in my template-home.php, in the place where I want it to be, after Jumbotron picture.
How to correctly remove the previous one witch is fixed to top…? Maybe some custom php if statement in base.php to not show the hard coded get header only for front-page(home) ? Or some php code on the top of template-home.php ? But I’m not capable to that yet…
Thanks.
Don’t know is this correct but I found solution - disabling it via CSS: https://wordpress.org/support/topic/remove-nav-bar-from-one-page/
Now is everything in the place.