Skip to main content
T
terryfoster
Inspiring
September 19, 2018
Question

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

  • September 19, 2018
  • 2 replies
  • 421 views

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

    This topic has been closed for replies.

    2 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    September 19, 2018

    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 O'Shea— Product User & Community Expert
    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    September 19, 2018

    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>
    Nancy O'Shea— Product User & Community Expert
    ALsp
    ALsp
    Legend
    September 19, 2018

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

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices