Placing a static navigation bar at the top of the form

Currently, I am utilizing Bootstrap 4 and have a div set up as a container for three rows.

The first and third row are meant to be fixed, while the middle section (content) consists of a large form that should scroll. The goal is to keep the first and third rows visible at all times.

I seem to be having some difficulty achieving this setup. Could you provide some assistance?

Below is the code snippet I am working with:

<div class="container">
        <div class="d-flex justify-content-center" style="position: absolute;left:20%;right:5%;top:10%;z-index: 1000;">
            <div class="col-4">
                    <!-- Top navigation -->
                    <nav class="navbar navbar-default" role="navigation" id="navbar-example">
                        <div>
                            <ul class="nav navbar-nav">
                                <li><a href="#profile">Profile</a></li>
                                <li><a href="#">Courses</a></li>
                            </ul>
                        </div>
                    </nav>
            </div>
        </div>
        <div class="row" style="padding-top: 5%;">
            <input type="hidden" id="_token" >
            <div class="col-md-12">
                <div class="box box-primary">
                    <form class="form-horizontal"
                          data-target="#navbar-example" id="adaptation_form">
                        <div class="box-body">
                            <div id="profileAnchor" class="box box-secondary">
                                <div class="box-body">
                                    <div class="panel panel-info">
                                        <div class="panel-heading">Profile</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                    <div class="box-footer">
                        <a type="button" href="{{ route('adapt.cancel', [$id]) }}" class="btn btn-default">Cancel</a>
                        <button id="create_dataset" name="create_dataset" type='submit'
                                class="btn btn-primary pull-right">Submit
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

My objective is to ensure that the top navigation and footer remain fixed in their position. I attempted using 'position:fixed', but this caused overlap issues when scrolling through the content.

For reference, here are two screenshots highlighting my concerns:

1. In the first image, there is a header containing links for Profile and Courses. I would like this header to stay fixed while the rest of the content scrolls. https://i.sstatic.net/ci7Yc.png

2. However, when attempting to use 'position:fixed', I encountered an issue where the content overlapped as shown in the second screenshot: https://i.sstatic.net/lgj0w.png

Answer №1

To make your navbar always stick to the top, simply add the class sticky-top to it. Additionally, apply d-flex flex-column min-vh-100 to the body and include mt-auto fixed-bottom in your footer to ensure it stays fixed at the bottom of the page. Check out the code snippet below for a working example:

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<body class="d-flex flex-column min-vh-100">
  <nav class="navbar sticky-top navbar-light bg-light">
    <a class="navbar-brand" href="#">Sticky top</a>
  </nav>
  <section>
    <p>
      What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
      specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
      recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The
      point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem
      Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    </p>
  </section>
  <footer class="mt-auto fixed-bottom text-center text-white bg-dark pt-2 pb-2"> footer</footer>
</body>

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

The width of sibling divs in IE7 does not match their sibling's width

Currently facing a challenge with resolving an IE7 problem. My goal is to ensure that my sibling div has the same width as its counterparts. The initial sibling serves as the header, whereas the subsequent siblings have specific dimensions. Any advice woul ...

Can an identification be included in a label element?

My inquiry is as follows: <label for="gender" class="error">Choose</label> I am interested in dynamically adding an id attribute to the above line using jQuery or JavaScript, resulting in the following html: <label for="gender" class="err ...

CSS: Creating a dynamic layout to center the card on screens of all sizes

My code currently places the profile card in the center of the screen regardless of screen size, but it often appears too small. How can I adjust the positioning of the profile card to almost fill the screen? @import url("https://fonts.googleapis.com/cs ...

What is the method to define the maximum width for a BootstrapTable while also trimming any data that exceeds this specified width?

In my ASP.NET Web Forms project, I am utilizing Bootstrap 5.2 for a BootstrapTable, which is currently defined as follows: <table class="display table table-bordered table-striped w-100 tables" ...

Utilize the arrow keys to navigate through the search suggestions

I am facing an issue with my search bar where I am unable to navigate through the suggestions using arrow keys. I have been struggling with this problem for days and would appreciate any help in resolving it. var searchIndex = ["404 Error", "Address Bar ...

Special Table Spacing

Within my table, I am looking to create spacing between cells without setting padding and/or margin on each individual td. While using the CellSpacing and/or CellPadding properties of the table could be a potential solution, these properties apply space on ...

Display navigation bar upon touch or lift

In the mobile version of a website, there is a fixed navigation bar at the top. The positioning of this navbar is achieved using position:absolute: .navbar-fixed-top{position:absolute;right:0;left:0;z-index:1000; The goal is to make the navbar invisible ...

What is the best way to apply a background-image to a DIV while also implementing a double line border to prevent the image from showing through the border?

Within my DIV, I have applied a background-image and added a double border to the DIV. The image is currently visible in between the lines. Is there a method to resolve this issue and prevent the image from displaying in this manner? ...

Explore Site Configuration

When it comes to creating a responsive site with the given layouts: https://i.sstatic.net/esdpU.png https://i.sstatic.net/5Rdlr.png If you have a fixed header (4rem), how can you set up the main container (C & D) to have a maximum height of 100% and scr ...

Having trouble with Vue.js implementation of Bootstrap tab navigation?

I am currently working on a vue.js application that consists of 2 routed components. I recently attempted to integrate a bootstrap tab navigation into the first component, but unfortunately, the tab contents are not being properly displayed. <templat ...

Update the bootstrap button's value when clicking on it

Looking to change the content of a button upon clicking it - specifically transitioning it to a "block" state where it becomes unclickable, all while displaying a Glyphicon icon. Here's what I want to include: <span class="glyphicon glyphicon-sav ...

Looking for guidance on correcting dynamic tab selection post upgrading from Bootstrap V4 to V5

Since transitioning from Bootstrap V4 to V5, the functionality of this dynamic tab selection code has ceased to operate. var v_screen = 3; var triggerMap = { 2: '#open-tab', 3: '#closed-tab', 4: '#support-ta ...

Slider caption glitching out

I am encountering an issue with the caption I added to my slider. When I scale the page, the height becomes inconsistent. It seems like the caption is not in an absolute position on the page. Strangely, when I try to position it absolutely, it disappears? ...

Properly managing mouseover events on a flipped div: tips and tricks

I created a div that flips when clicked using some HTML and CSS code. It works perfectly in Firefox 39 and Chrome 43. Here is the markup: <div class="flip-wrapper flippable-wrapper" id="fliptest-01"> <div class="flip-wrapper flippable ...

How come my dimensions are not returning correctly when I use offset().top and scrollTop() inside a scrolling element?

Currently in the process of developing a web app at , I am looking to implement a feature that will fade elements in and out as they enter and leave the visible part of a scrolling parent element. Taking inspiration from myfunkyside's response on this ...

Designing a layout for a chat application that is structured from the bottom up

I'm currently in the process of designing a web application for a chat platform. I have access to an API that provides a list of messages: chatsite.com/api/thread/1/messages/ [ { "id": 2, "sender": { "id": 2, ...

What causes my animation to “reset” upon adding a new element using innerHTML?

One of the functionalities on my webpage involves a script that inserts a div called "doge" using innerHTML when a button is clicked. Additionally, there is a CSS keyframes animation applied to another div on the same page. However, whenever the button is ...

Having difficulty adjusting the text to match the image alignment

Having trouble aligning the text tag inside the H1 above the image. It keeps appearing in the wrong place, either on the left or right. I've tried including the h1 inside the container, but it just disappears. <!doctype html> <html> <h ...

Obtaining the value of an item in an unordered list

Hi everyone, I have been trying to extract the value of <li> elements that display images horizontally. Below is the HTML code I am working with: <div id="layoutInnerOptions"> <ul id="navigationItemsContainer" class="layouts_list"> <l ...

Align an image in the middle with a heading

I am currently working on aligning a picture and heading in a header section. My goal is to center both elements, with the picture being twice as tall as the heading. So far, I have them stacked one above the other: .body { font: 15px/1.5 Arial, Helveti ...