0

I am currently trying to get my Navbar affixed to the top of the page after I have scrolled past an image. I have tried following the solutions from How to Add Affix to Bootstrap Fixed Bottom Navbar and Adding a header image before navbar-fixed-top, however, I can't seem to get the Navbar to stay on the screen.

My HTML code is:

<nav class="navbar navbar-expand-sm bg-dark navbar-dark" data-spy="affix" 
data-offset-top="50">

and my CSS is:

.affix {
   top: 0;
   width: 100%;
   position: fixed;
}

.affix-top {
   width: 100%;
}

Bootstrap and JQuery I have imported:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

Any help you can provide would be great

Thanks :)

user3307598
  • 515
  • 1
  • 5
  • 13
  • Have you gone through https://www.w3schools.com/bootstrap/bootstrap_affix.asp – Ramesh Oct 12 '18 at 06:13
  • I have, yes. Their example 1 is exactly what I am trying to do ... but I am just failing at it – user3307598 Oct 12 '18 at 06:14
  • You need to have javascript or jQuery for this. Where is your's? – Ramesh Oct 12 '18 at 06:19
  • @Ramesh I have edited the question showing what it is I am importing ... is this what you meant? The only difference I can tell between mine and the w3schools example is that I am using a newer version of bootstrap If I change my bootstrap to the older version it works ... But I feel this is a shoddy work around – user3307598 Oct 12 '18 at 06:31
  • 1
    Bootstrap 4 has few conflicts with bootstrap 3 and older. You can clearly see the difference between them here : https://blog.templatetoaster.com/bootstrap-3-vs-bootstrap-4-migrate-differences/. I recommend you to use bootstrap 3 if you are not familiar with bootstrap 4 – Ramesh Oct 12 '18 at 06:40
  • I just read that comment after I posted that "answer" that I posted. Thank you for your help ... I'm going to try and leave them both in and hope that nothing I have conflicts; it's only a simple website. Thanks again @Ramesh – user3307598 Oct 12 '18 at 06:43

1 Answers1

0

Right ... so after a little longer of searching, I have finally realised what the problem was ... I was following the Bootstrap 4 tutorial until I wanted the sticky nav bar. Then I accidentally clicked on the link for Bootstrap 3 without realising.

To get a nav bar sticky in Bootstrap 4, you just need to add "sticky-top" to the nav class like so:

<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
user3307598
  • 515
  • 1
  • 5
  • 13