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

I am looking for an HTML solution that allows me to neatly stack photos of different sizes in two columns, always prioritizing the column with more empty space

Is there an easy method to populate two columns, each with a width of 50%, with photos in a way that the next photo is always added to the column with more available space? The photos come in different sizes but should be able to fit within the width of t ...

htmlcssstackalignment

Issue with ng-model causing incorrect variable binding

My issue lies with a variable that I have connected to a select input through the use of ng-model. Strangely, the variable seems to not update with the correct data and retains the value assigned to it during initialization. I have a similar setup elsewhe ...

javascripthtmlangularjs

Learning to extract information from a JSON file with various key and value combinations

I am facing a challenge with my JSON data file, which contains UserIDs as keys and Passwords as values. My goal is to use JavaScript for validation by reading this JSON file. The structure of my JSON is as follows: IDsNPass = '[{"A":"A15"},{"B":"B15" ...

javascripthtmljson

What is the best way to use a CSS selector to target multiple divs such as block-11, block-12, and so

Here are several block IDs I have: <div id="block-11">content Here</div> <div id="block-12">content Here</div> <div id="block-13">content Here</div> <div id="block-14">conten ...

htmlcss

Show the menu when hovering in reactjs

Currently, in my react project, I am implementing dropdown menus using the reactstrap css framework. Example.Js <Dropdown className="d-inline-block" onMouseOver={this.onMouseEnter} onMouseLeave={this.onMouseLeave} ...

javascriptcssreactjstwitter-bootstrapreactstrap

PHP and jQuery to create an autocomplete text input feature

I've been working on implementing an auto suggest text box using PHP and jQuery, but it seems like the jQuery code I found online is already deprecated. I'm not sure if my code is incorrect or if the issue lies with the jQuery itself. Can anyone ...

phpjqueryhtml

Is applying a bevel effect when hovering achievable?

Is there a way to add a bevel effect to my hyperlink image so it stays in place without moving down? I need the bevel effect to be inside the image as it keeps shifting position. Any suggestions would be greatly appreciated. I really need the bevel effect ...

htmlcssalignmentbevelled

Utilize a function from a separate JavaScript file by calling it within the $(document).ready(function()

Refer to this post for more information: Click here I attempted to access a function that was defined in another .js file based on the instructions from the post. However, I encountered an issue. Take a look at my code below: sildemenu.js $(document).re ...

javascriptjqueryhtmlcss

Assistance needed in creating a MVC3 and Razor 2-level horizontal navigation menu

I am attempting to create a 2-level horizontal menu, similar to the one featured on the following site: TV.Com Despite searching on google, I am struggling to put it all together. Below is the sample code I am working with: <div id="divNav"> <u ...

cssasp.net-mvc-3razor

What steps can be taken to extend the duration that the HTML necessary validation message is displayed?

Is it possible to extend the duration in which the HTML required validation message is displayed? Currently, it seems to appear for too short a time. ...

javascriptjqueryhtmlbootstrap-4

Updating Template in Python Flask upon Button ClickLet's enhance our Python Flask application by

I need assistance with switching templates upon clicking a button. My Python code is as follows: @app.route("/", methods = ['POST', 'GET']) def my_forum_post(): if request.method == 'POST': if reque ...

pythonhtmlflask

Can someone explain what logForm.$invalid.$setValidity is all about?

The code snippet can be found here I am a beginner in this field and currently studying a piece of code. I am having trouble understanding the logForm.$invalid.$setValidity line. I have searched online but couldn't find any information about it. The ...

javascripthtmlangularjs

Creating a card design that responds to user interactions using CSS and HTML

I attempted to create a responsive queue of playing cards that adjusts based on the display width. I want this queue to perfectly fit the display width so that no card is cut off. It should be optimized for phones, tablets, and desktop screens. Additiona ...

htmlcssresponsive-design

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

Setting the color for the :hover and :active states on a react JSX component: A step-by-step guide

<button onClick={fetchExchangeRates} style={{ backgroundColor: `${selectedColor}` }} className="hover text-white px-3 py-1 flex justify-center items-center gap-2 text- rounded-md" > Convert <FontAwesomeIcon className=&apo ...

cssreactjsdynamictailwind-css

In Chrome, CSS automatic hyphens are displayed as question mark symbols

On my website, I have implemented automatic hyphenation using CSS: article > p, article > li { -o-hyphens: auto; -o-hyphenate-limit-before: 3; -o-hyphenate-limit-after: 3; -o-hyphenate-limit-chars: 6 3 3; -o-hyphenate-limit-lines: 2; -o-h ...

htmlcssreactjs

The hyperlink for making phone calls appears twice on an Android phone

When you click on the number, it will be displayed twice in the phone screen like this... 12345678910,12345678910 ...instead of just once... 12345678910 Take a look at the code snippet below: {#if order.salesRep} <div class="info"> ...

androidhtmltemplateshyperlinkphone-number

Set the CSS/HTML to make two child elements occupy 50% of the height of the parent container div

This task seems deceptively simple, yet I am struggling to find a straightforward solution. Language: (HTML) <div class="col-6-12 subcontent-outer"> <div class="subcontent"> <h1>Header</h1> ...

htmlcss

Following the build in Angular, it only displays the index.html file and a blank screen

According to the information on Angular's official website, running the "ng build" command should generate files in the dist folder ready for hosting. However, after running this command, the index.html file is empty except for the page title. When yo ...

htmlangulartypescriptweb

Creating a sophisticated form design with multiple input fields using DIV elements in HTML

I am looking to create a multi-column form layout that allows each row to have a different number of fields. My initial approach was using tables and the colspan attribute within td tags for layout structure. However, I have learned that using tables for l ...

htmlcss