How can I freeze a top row so it does not scroll off responsive?

[terryfoster]

I have a very simple responsive site.

I'm not intending to advertise at all in any way but the site is at www.tanyalak.com

Now, I want to freeze the top grey band so that it stays on screen at all time and insert a menu where the Tanyalak logo and the Facebook icon is.

Could anyone please advise me how I could go about this please.

All my attempts have messed up the site before now.

Thank you

Terry

[ALsp]

You'll need to disclose whether you are using Bootstrap or your own CSS first.

[Nancy OShea]

You will need to upgrade your Bootstrap from older version 2 to the latest version 4.1 and implement a sticky navbar.  NOTE:  Do not combine Bootstrap versions.  It won't work.

https://getbootstrap.com/docs/4.0/components/navbar/

<nav class="navbar sticky-top navbar-light bg-light"> 
<a class="navbar-brand" href="#">Sticky top</a> 
</nav>

[Nancy OShea]

Latest Bootstrap and jQuery from CDNs

<!--Bootstrap 4.1.3 CSS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<!--jQuery, Popper then Bootstrap-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

[ALsp]

The link to the page was not formatted correctly and my eyes passed right over it

[Nancy OShea]

That link was easy to miss. 

The page in question has some minor code errors too.

Showing results for http://www.tanyalak.com/ - Nu Html Checker