Implement Bootstrap and CSS to ensure that my content appears below the header when users scroll down

I am struggling with a simple HTML page that is working well with CSS, but encountering an issue where the input form gets placed above the header when scrolling down. I want the header to always remain above the content even while scrolling.

Any suggestions or solutions?

.sticky {
  position: sticky;
  top: 0;
}
#i ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: blue;
}

#i li {
  float: left;
}

#i li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

#i li a:hover {
  border-radius: 0px 0px 10px 10px;
  background-color: rgb(43, 137, 226);
}

.active {
  background-color: rgb(43, 137, 226);
}

#footer-id {
  background-color: blue;
}

#MyForm .contact-form {
  background: #fff;
  margin-top: 10%;
  margin-bottom: 5%;
  width: 70%;
}

#MyForm .fixed-header {
  width: 100%;
  margin: 0 auto;
  position: fixed;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 999;
}

#MyForm .contact-form .form-control {
  border-radius: 1rem;
}
#MyForm .contact-image {
  text-align: center;
}
#MyForm .contact-image img {
  border-radius: 6rem;
  width: 11%;
  margin-top: -3%;
  transform: rotate(29deg);
}
#MyForm .contact-form form {
  padding: 14%;
}
#MyForm .contact-form form .row {
  margin-bottom: -7%;
}
#MyForm .contact-form h3 {
  margin-bottom: 8%;
  /* margin-top: -10%; */
  text-align: center;
  color: #0062cc;
}
#MyForm .contact-form .btnContact {
  width: 50%;
  border: none;
  border-radius: 1rem;
  padding: 1.5%;
  background: #dc3545;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
}
#MyForm .btnContactSubmit {
  width: 50%;
  border-radius: 1rem;
  padding: 1.5%;
  color: #fff;
  background-color: #0062cc;
  border: none;
  cursor: pointer;
}

.input-group {
  position: relative;
  width: 100%;
}
.input-group input {
  position: relative;
  height: 45px;
  border-radius: 30px;
  min-width: 500px;
  box-shadow: none;
  /* border: 1px solid #eaeaea; */
  padding-left: 100px;
}
.input-group label {
  position: absolute;
  left: 0;
  height: 48px;
  background: #55ccf2;
  padding: 0px 25px;
  border-radius: 30px;
  line-height: 48px;
  font-size: 18px;
  color: #fff;
  top: 0;
  width: 100px;
  font-weight: 100;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
  



<!--The content below is only a placeholder and can be replaced.-->

<span id="i">
  <ul class="sticky">
    <li>
      <a
        href="#"
        
        >Home</a
      >
    </li>
    <li>
      <a
        href="#news"
        
        >News</a
      >
    </li>
    <li>
      <a
        href="#contact"
        >Contact</a
      >
    </li>
    <li>
      <a
        href="#about"
        
        >About</a
      >
    </li>
    <li>
      <a
        href="#test"
        
        >Test</a
      >
    </li>

    <ul class="nav navbar-nav pull-right">
      <li class="nav"><a href="#">Contact</a></li>
    </ul>
    <ul class="nav navbar-nav pull-right">
      <li class="nav">
        <a href="#ta" (click)="scrollToElement(con)">Target</a>
      </li>
    </ul>
  </ul>
</span>



  <div #con class="fixed-header">
    <br />
    <br />
    

    <!-- <div  class="input-group">
        <input type="text">
        <label>Some Text</label>
        </div> -->

    <div id="MyForm">
      <div class="container contact-form">
        <div class="contact-image">
          <img src="assets/rocket_contact.png" alt="rocket_contact" />
        </div>
        <form
          [formGroup]="productForm"
          (ngSubmit)="sendMail(productForm.value)"
        >
          <h3>Merci de nous laisser un message</h3>

          <!-- <div class="row"> -->
          <div class="col-md-12">
            <div class="form-group" id="your_name">
              <input
                formControlName="name"
                type="text"
                name="txtName"
                class="form-control"
                placeholder="Your Name *"
                value=""
              />
            </div>
            <div class="form-group">
              <input
                formControlName="email"
                type="text"
                name="txtEmail"
                class="form-control"
                placeholder="Your Email *"
                value=""
              />
            </div>
            <div class="form-group">
              <input
                formControlName="number"
                type="text"
                name="txtPhone"
                class="form-control"
                placeholder="Your Phone Number *"
                value=""
              />
            </div>
          </div>
          <div class="col-md-12">
            <div class="form-group">
              <textarea
                formControlName="message"
                name="txtMsg"
                class="form-control"
                placeholder="Your Message *"
                style="width: 100%; height: 150px;"
              ></textarea>
            </div>

            <div class="form-group">
              <input
                type="submit"
                name="btnSubmit"
                class="btnContact"
                value="Send Message"
              />
            </div>
          </div>
          <!-- </div> -->
        </form>
      </div>
    </div>
  </div>


</body>
</html>

htmlcss

Answer №1

Elements with position: absolute or position: fixed can sometimes overlap other elements. In such cases, the element with the highest z-index value will be rendered on top. If no z-index is specified, it defaults to the lowest possible value.

To ensure your sticky class stays above other elements, you can simply include:

z-index: 1;

within your sticky class definition.

Here's an example of how you can implement this in your CSS:

.sticky {
  position: sticky;
  top: 0;
  z-index: 1;
}
#i ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: blue;
}

/* Other CSS rules omitted for brevity */

.input-group {
  position: relative;
  width: 100%;
}
.input-group input {
  position: relative;
  height: 45px;
  border-radius: 30px;
  min-width: 500px;
  box-shadow: none;
  /* Other input styles */
}
.input-group label {
  position: absolute;
  left: 0;
  height: 48px;
  background: #55ccf2;
  padding: 0px 25px;
  border-radius: 30px;
  line-height: 48px;
  font-size: 18px;
  color: #fff;
  /* Other label styles */
}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
  
  <!-- HTML markup and additional CSS classes -->

</body>
</html>

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

Make the div disappear after a specified time

Does anyone know of a code snippet that can make a couple of div elements fade out after a specific time period? Currently, I have the following example: <div id="CoverPop-cover" class="splash"> <div id="CoverPop-content" class="splash-center"> ...

javascriptjqueryhtmlcss

Fixing blurry text on canvas caused by Arbor.js mouse event issues

Currently, I am utilizing arborjs in my project. The text within the canvas is created using fillText in html5. While everything functions correctly on a Retina display MacBook, the text appears blurry. To address this, I applied the following solution: v ...

javascriptjqueryhtmlcanvas

How to easily align an image and blockquote vertically in CSS with automatic width for the blockquote

I am struggling with a layout issue involving a list of items containing images and blockquotes. My goal is to set a maximum width for the images and have the blockquotes automatically adjust their size to fit next to the images, all while keeping both ele ...

htmlcss

Is it possible to position two fixed divs side by side?

I am currently in the process of building my online portfolio. I am looking to create two fixed divs that will not scroll, each occupying the full height of the page. The content between these two divs should be scrollable while the bars on the left and ri ...

htmlcsspositionfixed

What can I do to prevent my HTML/CSS/jQuery menu text from shifting when the submenu is opened?

After encountering numerous inquiries regarding the creation of disappearing and reappearing menus, I successfully devised a solution that functions seamlessly on desktop and tablet devices. My approach involved utilizing the jQuery .toggleClass function w ...

jqueryhtmlcssmenu

Tips on adding CSS to a React component

I've successfully converted an HTML file into a component designed to resemble a 7-segment LED display. I have imported the necessary CSS styles from the index.css file, but I am unsure how to properly apply these styles within the component. My atte ...

htmlcssreactjs

Tips for minimizing the dimensions of images in a slideshow within a gallery

Check out this website: The slideshow images on there are too tall. Can someone assist me in lowering the height of the images? I want both images to be displayed at the same height. Thank you in advance. ...

cssslideshow

Deletion of input is not permitted

Currently, I have a telephone input field on my form that only allows numbers. I have implemented a simple JavaScript code to enforce this validation. However, the issue I am facing now is that the input box cannot be deleted. <form id="aylikal" action ...

javascripthtmlinput

Tips for binding data to numerous dynamic controls

Implementing reactive forms in my Angular project allowed me to create a simple form for adding employee work hours and breaks. The challenge I encountered was the inability to bind data from break controls. In the .ts file export class AddAppointmentForm ...

htmlcssangulartypescriptangular-reactive-forms

Stop the inclusion of the scrollbar in the mat-drawer-inner-container within the Angular mat-drawer Component

Background Story: Working on designing a screen layout that includes the use of a mat-drawer to display a custom component. The challenge arises when the custom component gets nested inside a div (with class="mat-drawer-inner-container") automatically adde ...

cssangularangular-materialmat-drawer

Linking Two HTML Components in Angular 4 with Identical Values

Recently, I've started working with Angular and encountered an issue. In a table row, the value item.md_id is bound like this: <tr *ngFor="let item of driverData"> <td class="align-right" id="md_id" [(ngModel)]="item.md_id" name="driverId ...

javascripthtmlangular

Error occurred during download or resource does not meet image format requirements

Encountering an issue when attempting to utilize the icon specified in the Manifest: http://localhost:3000/logo192.png (Download error or invalid image resource) from the console? import React from 'react'; import Logo from '../Images/logo1 ...

javascripthtmlcssreactjsbrowser

Designing an interactive HTML table that adapts to various screen

Currently utilizing Bootstrap to create a responsive HTML table on smaller devices like the iPad, but seeking a more polished and professional alternative. Searching for a JQuery/JavaScript or CSS solution without relying on plugins. Would appreciate any ...

javascriptjqueryhtmlcss

Tips for eliminating double quotes from an input string

I am currently developing an input for a website that will generate a div tag along with its necessary child elements to ensure the website functions correctly. I have a couple of key questions regarding this setup: <!DOCTYPE html> <html> < ...

javascriptjqueryhtml

Utilize the search bar within a JavaScript function

One issue I am facing is taking an input from a search box and using that value as a parameter for another function. However, every time I click the button, the global variable resets itself when the page refreshes. In my javascript code, this is what I h ...

javascriptjqueryhtmlsearchglobal-variables

Steps for creating a jQuery function that responds to changes in a text box value

Currently, I have a text box containing certain values and a submit button alongside a slider. When I click the submit button, the slider changes. However, I would like to achieve the functionality where instead of clicking the submit button, changing the ...

javascriptjqueryhtmlcss

The navigation menu is stuck and will not toggle

I'm having trouble getting the button to toggle the nav bar to work properly. I've gone through similar questions and checked my html, but still can't figure out the issue. Any help would be greatly appreciated! Although I can see all the l ...

htmlbuttonnavigationbartogglebutton

Is it possible to conduct HTML-based Selenium tests without an internet connection?

As a newcomer to Selenium, I am currently using the Selenium IDE which has led me to create table structures like the one below: <table cellspacing="1" cellpadding="1" border="1" name="SELENIUM-TEST"> <thead> <tr class="title"> ...

htmlseleniumbrowserselenium-webdriveroffline

What is the reason behind LESS displaying arithmetic operations as text instead of performing them?

Whilst composing the subsequent operations @a: 2px @variable: @a + 5; .margin-style{ margin-left: @variable; } The code above compiles into .margin-style{ margin-left: 2px + 5; } Rather than margin-left:7px; What could be causing this issue? ...

htmlcssless

Is it possible to place two identical canvases on top of each other beside a separate canvas?

Trying to arrange two same-sized canvas elements on top of each other and next to a third canvas. In the figure below, I aim to have 2 and 3 positioned together, adjacent to 1. https://i.stack.imgur.com/dWkhc.png Attempting to address this issue with the ...

csshtmlcanvas