Can a jumbotron and navigation bar be permanently attached to the top of a screen?

Currently, I am in the process of constructing my website using Bootstrap and my goal is to ensure that the header and navigation bar remain fixed at the top of the page while the content below scrolls underneath. While I am aware that it is possible to fix a navbar to the top with Bootstrap, I am wondering if there is a way to also fix the jumbotron to the top.

The code I have so far looks like this:

<div class="jumbotron">
      <img class="jumbotron-img-top" src="images/headerwithtag.png">
</div>

<nav class="navbar">
      <ul class="nav navbar-nav">
        <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></a>
      BOOKS
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
      <a class="dropdown-item" href="#">Branding Sutra</a>
    </div>
  </li>
  <li class="nav-item">
          <a class="nav-link" href="#">SERVICES</a>
  </li>
  <li class="nav-item">
          <a class="nav-link" href="#">ABOUT</a>
  </li>
  </ul>
</nav>

As for the CSS associated with it, here is what I have:

.jumbotron {
          background-color: white;
      }

      .jumbotron-img-top {
          width:100%;
      }

      .navbar {
          background-image: url("images/navbarbgnew.png");
          background-size: cover;
          margin: -30px 0 15px 0;
      }

I am uncertain about what modifications are needed to achieve the desired outcome of fixing both elements at the top of the page while ensuring they fill the entire screen.

Answer №1

To make the .jumbotron class position fixed, add position: fixed and then adjust top: 0 to ensure it stays at the top of the browser viewport. It is recommended to also include width:100% to prevent shrinking.

.jumbotron {
    background-color: white;
    position: fixed;
    top: 0;
    width: 100%;
}

.jumbotron {
        background-color: white;
        position: fixed;
        width: 100%;
        top: 0;
    }

    .jumbotron-img-top {
        width: 100%;
    }

    .navbar {
        background-image: url("images/navbarbgnew.png");
        background-size: cover;
        margin: -30px 0 15px 0;
    }
    .long-content-sample {
        height: 1000px;
        background: #ccc;
    }
<div class="jumbotron">
    <img class="jumbotron-img-top" src="images/headerwithtag.png">
    .jumbotron element
</div>

<nav class="navbar">
    <ul class="nav navbar-nav">
      <li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    BOOKS
  </a>
  <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
    <a class="dropdown-item" href="#">Branding Sutra</a>
  </div>
</li>
<li class="nav-item">
        <a class="nav-link" href="#">SERVICES</a>
</li>
<li class="nav-item">
        <a class="nav-link" href="#">ABOUT</a>
</li>
</ul>
</nav>
<div class="long-content-sample">Scroll down<div>

Answer №2

The simplest method - utilizing only Bootstrap 4 default classes without any personalized CSS - to solve the issue of fixing both the jumbotron and navbar to the top of the page is by enclosing them within a div with the class sticky-top. Check out the code snippet below for a demonstration:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="sticky-top">
    <div class="jumbotron jumbotron-fluid bg-white my-0 py-0">
        <img class="img-fluid" src="https://picsum.photos/2000/200">
    </div>

    <nav class="navbar navbar-expand-md navbar-light bg-light mb-3">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="nav navbar-nav">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    BOOKS
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item" href="#">Branding Sutra</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">SERVICES</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">ABOUT</a>
            </li>
        </ul>
        </div>
    </nav>
</div>

<div class="container-fluid">
    <div class="row">
        <div class="col-9 col-sm-6 col-md-3">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium fugit veritatis ipsam possimus iste ipsum aut cupiditate earum eveniet vel minus laudantium eligendi, et blanditiis tempore itaque enim facere dolorum deserunt obcaecati autem? <br><br> Dolorem earum enim est, voluptas harum eveniet pariatur! Amet, ipsum necessitatibus explicabo repellat quisquam, eum nam, cupiditate excepturi sed magni, natus commodi deserunt cum praesentium provident debitis dolore ducimus expedit...
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to customize the appearance of the Facebook Like box with a scroll-bar?

I recently added a Facebook like-box to my website, and I'm trying to customize the scroll bar within the iframe. However, I'm struggling to find a way to do so. Does anyone have any ideas on how this can be achieved, or if it's even possibl ...

Using ASP.Net MVC to link visible controls triggered by jQuery actions to the corresponding web model

I am working on a DropDownList that is populated with countries. When the user selects US, I want to display a dropdown menu with US states. If the user picks CA, I need to show a dropdown with CA provinces; otherwise, display a TextBox. With jQuery, I am ...

What methods are available in JavaScript regex for validating city names?

var cityRegex = /^[a-zA-z] ?([a-zA-z]|[a-zA-z] )*[a-zA-z]$/; is the regular expression I attempted to create. However, it fails when inputting a city name like "St. Petersburg." Update: It seems challenging to create a perfect regex pattern for city name ...

jQuery Ajax allows scripts to be contained within a page, even if the page itself is empty

Utilizing jQuery ajax to display an HTML page that includes javascript functions, here is my code: function ChartBook() { $.ajax({ url: '/Charts/ChartBook', dataType: 'html', id: 1, ...

A guide on how to activate an event when a radio button is selected using jQuery

I experimented with implementing this. When I try clicking on the radio button, the code functions correctly, but the radio button does not appear to be checked and remains unchanged. Any ideas on how to resolve this issue? <p> <input id="p ...

The functionality of the button is disabled once a pop-up JavaScript is implemented

I have encountered an issue with my HTML code that involves a button intended to hide certain content. The problem arose when I implemented a popup feature, causing the button to malfunction. Here is the JavaScript for the popup: $ = function(id) { retur ...

Leveraging jQuery for vertical alignment of an image

I am trying to vertically center an image with the class .personal within a container with the class .personal-row (located inside .row-main) on page load and when resizing. Initially, I attempted using vertical-align: middle;, but that did not yield the d ...

The Bootstrap menu does not seem to be affecting the positioning of the body text

I recently came across an issue with a Bootstrap-based site I'm working on. When I click the hamburger menu on mobile view, the main content doesn't shift down to accommodate it, causing an overlap. Not ideal :-( Here's my Demo: https://js ...

What is the best way to incorporate CSS into JavaScript code?

Here is the code I am working with: <script type = "text/javascript"> function pic1() { document.getElementById("img").src = "../images/images/1.png"; } function pic2() { document.getEl ...

Is there a way to verify if an ID includes more than one word?

I am trying to target a specific div with a unique id in jQuery: <div id="picture_contents_12356_title"></div> The '12356' is autogenerated and must be included in the id. I need to create a jQuery selector that combines "picture_co ...

Is there a way to automatically load an entire Facebook profile in one go using a program?

Does anyone know a way to automatically download all photos from a Facebook profile, not just thumbnails? I'm thinking of using wget to fetch the page source code and then extract links to images from child a elements of all div with class="rq0e ...

Stylish CSS: Jagged 3-dimensional rotated text

Have a look at this Codepen to see the issue. As the text moves into the background, more aliasing appears. A screenshot taken in Chrome on macOS (similar appearance in FF & Safari): https://i.sstatic.net/n746I.png I've experimented with different ...

What is the best way to eliminate the underline text decoration from a link element?

Take a look at this JS Bin. I want to change the link Project name in there. By default, it is underlined when hovered over. How can I remove that effect? I attempted using a class project-name: a:hover, a:focus .project-name { text-decoration: non ...

How can you use CSS to style an image's title attribute?

I am trying to customize the text displayed when hovering over an image. Despite my efforts, the code I used doesn't seem to be working properly: <body> <img src="img.jpg" title="<span class='title'>title</span>" &g ...

Creating a JSFiddle with sprites using source and image files from Github with THREE.JS - a step-by-step guide

Greetings! I am currently working on creating a JSFiddle based on the official THREE.js HUD Sprites example. However, I am facing an issue where the sprite images do not seem to load or apply using the URLs specified in the original file:- //... URL' ...

Retrieving the value of a <select> element using React.useState in a Nextjs environment

Encountering an issue in Nextjs involving the useState function from React. There is a select element with multiple options. Upon selection, the useState should store the value of the selected option. const [value, setValue] = useState('') ... ...

Efficient scripting on Visual Studio

In Visual Studio, a helpful feature is the option box on the left side that allows you to collapse code within curly braces { } using a "-" to minimize and a "+" to expand. This keeps the code organized and clean. I'm curious if there's a way to ...

Ways to automatically style the child divs within a parent div

I'm trying to figure out how to float a parent div with child divs of different widths and heights while maximizing the use of space and not being affected by absolutely positioned elements. For reference, here's an example: http://jsfiddle.net ...

Vue.js: The v-for directive demonstrates distinct behavior with the utilization of template literals

What is the difference in behavior of v-for when using numbers versus template literals? Consider the following scenario: new Vue({ el: "#app", }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div i ...

How can the DropDownList selection be disabled in ASP.NET MVC?

Is there a way to prevent the DropDownList from selecting a new value, while preserving the previously selected value? I attempted disabling it with $("#dropDown1").attr("disabled","disabled"), but this approach does not retain the previous value, causing ...