The sticky top feature of the Bootstrap 4 navbar does not function properly when it is nested inside a div

I am just getting started as a beginner working on a Web application and utilizing Bootstrap 4 for my web design. I have a quick question that needs some clarification.

When the code is structured like this, the Navbar does not stay fixed at the top:

<nav class="navbar navbar-expand-sm navbar-dark sticky-top">
  <div class="container" style="padding:0;">
    <a class="navbar-brand text-info">The Bros</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"><span class="navbar-toggler-icon"></span></button>
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="nav nav-justified">
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

However, by simply rearranging the order of the elements like below:

<div class="container" style="padding:0;">
<nav class="navbar navbar-expand-sm navbar-dark sticky-top">

The Navbar sticks to the top but I also want to add color to the background. Is there a way to achieve both functionalities simultaneously?

htmlcssbootstrap-4twitter-bootstrap-4

Answer №1

I am interested in changing the background color of the navbar

You have the option to do this in both scenarios.

For the first case, you can achieve this by following these steps (click the "run code snippet" button below and expand to full page): 

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

<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>

<nav class="navbar navbar-expand-sm navbar-dark bg-dark sticky-top">
    <div class="container p-0">
        <a class="navbar-brand text-info">The Bros</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
        <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="nav nav-justified">
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<main class="container mt-4">
    <div class="row">
        <div class="col">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit voluptates consequatur nostrum beatae doloribus cupiditate incidunt voluptate aliquid quae, alias omnis, quisquam illum! Molestias, nisi ullam odit consectetur nesciunt laborum.
            </p>
            <p style="margin-top: 999px;">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit voluptates consequatur nostrum beatae doloribus cupiditate incidunt voluptate aliquid quae, alias omnis, quisquam illum! Molestias, nisi ullam odit consectetur nesciunt laborum.
            </p>
        </div>
    </div>
</main>

In the second case, simply add the sticky-top class to the .container instead of the navbar.

Also, take note of the spacing classes used such as p-0 (padding:0) and mt-4 (margin-top 4 units).

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

How to retrieve and delete a row based on the search criteria in an HTML table using jQuery

Here is the HTML code snippet: <table class="table" id="myTable"> <tr> <th>Type</th> <th>Counter</th> <th>Remove</th> <th style="display:none;">TypeDistribution</t ...

javascriptjqueryhtmlsearchhtml-table

The designated <input type=“text” maxlength=“4”> field must not include commas or periods when determining the character limit

In the input field, there are numbers and special characters like commas and dots. When calculating the maxLength of the field, I want to ignore special characters. I do not want to restrict special characters. The expected output should be: 1,234 (Total ...

javascripthtmlangularjstypescript

Tips for arranging five images side-by-side in a row

I have a collection of 5 images: Image 1: Image 2: Image 3: Image 4: Image 5: The dimensions of each image are as follows: Image 1: 70x40 Image 2: 80x42 Image 3: 90x44 Image 4: 100x46 Image 5: 120x48 I would like to arrange these images ...

htmlcssimage

Tips for choosing a drop-down menu option without an identifier using Selenium in Python

I am trying to choose an element/item from a drop-down menu in Python and Selenium without using an id element. Here is the HTML code snippet: <mbo-transaction-mode-select mode="filters.mode" class="ng-isolate-scope"> <select class="form-con ...

pythonhtmlselenium

Angularjs still facing the routing issue with the hashtag symbol '#' in the URL

I have recently made changes to my index.html file and updated $locationProvider in my app.js. After clicking on the button, I noticed that it correctly routes me to localhost:20498/register. However, when manually entering this URL, I still encounter a 4 ...

javascripthtml.netangularjsroutes

Enhance your dynamic php page with the use of a light box feature

Hey, I have created a PHP page that dynamically reads images from a folder and displays them on a gallery page. However, I am facing some issues - I am unable to link an external CSS file and I have to include all the CSS within the HTML. Additionally, I c ...

javascriptphpjqueryhtmlcss

Opera browser having trouble with sidebar rendering

On my best days, I struggle immensely with troubleshooting browser display issues. The left-hand sidebar on this page () appears incorrect in Opera. While in all other browsers, the sidebar displays with an orange and tan background, for some unknown reas ...

htmlcssopera

What is the best way to move table data content to a new line?

I have a table that spans the entire width of the screen, with 3 <td> elements inside. The content in the 2nd <td> does not contain any spaces and is quite long, causing it to expand beyond its allotted 70% width and disrupt the layout. Is ther ...

htmlcss

Exploring Angular 2 Tabs: Navigating Through Child Components

Recently, I've been experimenting with trying to access the HTML elements within tabs components using an example from the Angular 2 docs. You can view the example here. Here is a snippet of my implementation: import {Component, ElementRef, Inj ...

javascripthtmltypescriptangularangular2-template

Having trouble getting CSS calc to work on a table cell? Wondering how to make two out of four columns the same width?

Is it possible that CSS calc doesn't work on a table cell? It seems that no matter what size I change 90px to, the result looks the same. Even after trying various calculations with calc, I cannot seem to achieve the desired number of 230. The goal i ...

css

Problem with <meta> tag occurring when initial-scale is adjusted

Initially, in the index.html file: <meta name="viewport" content="width=device-width, initial-scale=1" /> I decided to modify it to: <meta name="viewport" content="width=device-width, initial-scale=2" /> ...

javascripthtmlcssreactjsmeta-tags

Updating the color of text when clicking on a link using javascript

I am facing an issue where I cannot seem to change the text color using JavaScript. The functionality to show and hide div tags is working perfectly, but changing the color seems to be a challenge. It's worth noting that there are no styles defined fo ...

javascriptcssfunctiononclicktextcolor

Is there a way to determine the negative horizontal shift of text within an HTML input element when it exceeds the horizontal boundaries?

On my website, I have a standard HTML input field for text input. To track the horizontal position of a specific word continuously, I have implemented a method using an invisible <span> element to display the content of the input field and then utili ...

javascripthtmlcssinput

Navigating redirects in HTML parsing with Python

I am currently experimenting with submitting multiple forms using a Python script and making use of the mechanized library. The purpose behind this is to set up a temporary API. The issue I am encountering is that upon form submission, a blank page appea ...

pythonhtmlhttpformsscreen-scraping

Displaying a pop-up window upon clicking on an item in the list view

After creating a list where clicking an item triggers a popup, issues arose when testing on small mobile screens. Many users found themselves accidentally tapping buttons in the popup while trying to view it. What is the most effective way to temporarily ...

javascriptandroidjqueryhtmljquery-mobile

Having trouble with the postcss-import grunt plugin?

Here is the layout of my project: my_project |-- css | -- main.css |-- css-dev | -- main.css |-- node_modules | -- bootstrap | -- dist | -- css | -- bootstrap.css |-- package.json `-- Gruntfile.js The contents of my Gr ...

javascriptcsstwitter-bootstrapgruntjs

Discover how to prevent a link or text from appearing if a user has already browsed a particular webpage

Is there a way to hide a link to another page if the user has previously visited that page? For example, I have 3 options - A, B, and C. If a user selects option A, links to pages B and C are displayed at the bottom of the page. However, if they then navi ...

javascriptcsshtml

Conceal/reveal specific sections of a table cell using jQuery

Here is a table I have: A header Another header First (some-text-initially-hidden) click row Upon clicking, it changes to: A header Another header First (some-text-should-be visible now) click row However, the text "some-text-initially-hi ...

javascripthtmljquerycsshtml-table

When a mobile device is rotated, the screen on a jQuery application will automatically shrink

Having trouble with JQM and device rotation on iOS devices. The screen doesn't resize properly when rotated. I have this line in the header to handle display size: <meta name="viewport" content="height=device-height,width=device-width,initial-scal ...

javascriptjqueryhtmljquery-mobile

What is the best way to incorporate white-space:normal within the text of a jQuery Mobile grid button?

Below is the code for my jQuery Mobile Grid buttons: <div class="ui-grid-b my-breakpoint"> <div class="ui-block-a"><button type="button" data-theme="c"> <img src="res/icon/android/business.png" height="45"><br>Business</ ...

javascriptjquerycssjquery-uijquery-mobile