Steps for designing a stationary footer in HTML and CSS

I have implemented a static footer on my website:

HTML

<div class="card fixedFooter">
  <div class="card-body space-around">
    <button
      type="button"
      class="buttonFooter"
      routerLink="/myRouter"
    >
      <i class="fa fa-lock fa-lg"></i>
    </button>
    <button
      type="button"
      class="buttonFooter"
      routerLink="myRouter"
    >
      <i class="fa fa-globe fa-lg"></i>
    </button>
    <button type="button" class="buttonFooter" routerLink="myRoute">
      <i class="fa fa-plus fa-lg"></i>
    </button>
    <button
      type="button"
      class="buttonFooter"
      routerLink="myRouter"
    >
      <i class="fa fa-home fa-lg"></i>
    </button>
  </div>
</div>

CSS

.fixedFooter {
  background-color: white;
  text-align: center;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  font-size: 1em;
}

.buttonFooter {
  background-color: white;
  color: grey;
  display: inline-block;
  border: none;
  cursor: pointer;
}

However, the issue I am facing is that when I scroll, the footer seems to move along with the page, even though it's meant to stay in one place. Here is an image demonstrating this problem:

https://i.sstatic.net/lHKiq.jpg

htmlcssbootstrap-4footer

Answer №1

If you are looking to create a fixed bottom navbar using Bootstrap UI elements, you can utilize the props available for this purpose. You can refer to the documentation for Fixed bottom.

<nav class="navbar fixed-bottom">
  // Buttons
</nav>

Alternatively, if you prefer to customize your own code for the footer in question, you can set the footer with properties like display: flex, specify a height, and use justify-content and align-items to center its contents.

body {
  background: black;
  height: 2000px;
}

.footerBF {
  background-color: white;
  text-align: center;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  font-size: 1em;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #f1f1f1;
}

button {
  background-color: white;
  border: none;
  cursor: pointer;
}
<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet" />

<body>
  <div class="card footerBF">
    <div class="card-body">
      <button type="button">
      <i class="fa fa-lock fa-lg"></i>
    </button>
      <button type="button">
      <i class="fa fa-globe fa-lg"></i>
    </button>
      <button type="button">
      <i class="fa fa-plus fa-lg"></i>
    </button>
      <button type="button">
      <i class="fa fa-home fa-lg"></i>
    </button>
    </div>
  </div>
</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

Using JavaScript to fetch HTML and apply CSS dynamically

Is there a way to retrieve all HTML within a div along with the corresponding CSS? A majority of the CSS is defined in classes within an external stylesheet. document.getElementById("mydiv") Currently, using the above code only fetches the HTML with inli ...

javascriptcss

How to send an email using asp.net and html

This is the form on my index.aspx page. <form role="form" method="post" action="SendMail.aspx"> <div class="form-group"> <input type="text" class="form-control" id="name" name="name" placeholder="Name" required> </div> ...

htmlasp.net

"Enhance the visual appeal of your Vue.js application by incorporating a stylish background image

Currently, I am utilizing Vue.js in a component where I need to set a background-image and wrap all content within it. My progress so far is outlined below: <script> export default { name: "AppHero", data(){ return{ image: { bac ...

javascripthtmlcssvue.js

Tallying the Number of Accordion Toggle Clicks

Let me present a scenario where I have some accordions and would like to keep track of how many times the user expands each one. Could you guide me on how to implement this particular feature? Appreciate your support, Kevin ...

javascriptphpjquerybootstrap-4accordion

When you hover over HTML tables, they dynamically rearrange or shift positions

Issue: I am encountering a problem with multiple tables where, upon hovering over a row, the tables are floating rather than remaining fixed in place. Additionally, when hovering over rows in the first or second table, the other tables start rendering unex ...

javascriptjqueryhtmlcss

How come an <a> tag is nabbing mouse clicks from a <canvas> element?

I have been experimenting with creating a 3D piano using three.js. Here is a snippet of the code I am currently working on: let renderer, camera, scene, light, keys, selectedKey; init(); render(); function init() { // Code for initializing renderer, ...

javascripthtmlcanvasthree.jsanchor

What could be causing my AJAX form to refresh the page upon submission?

I have been working on a basic Follow/Unfollow system, and although the functionality is working correctly in terms of inserting and deleting rows when following/unfollowing, I'm facing an issue where the page refreshes every time despite using e.prev ...

javascriptphphtmlajax

Customized link routing / Deep linking

I need some help. I am managing a standard website and I want to redirect custom URLs to specific pages when visitors access the site. For instance: - index.html should point to custom_index.cfm?custom_id=1&page_id=1&inc=index - about.html shou ...

javascriptjqueryhtmldeep-linking

Enhancing your design with animated borders on hover

This unique border animation caught my eye and sparked my curiosity. I'm interested to know if it can be achieved using only HTML5/CSS for a hover effect. Have you discovered any other visually appealing hover animations worth mentioning? ...

htmlcss

The color of the SVG is not visible in the PNG rendition

I have applied a style to an svg image and successfully changed the fill color using a random colors function in JavaScript. However, when I convert the svg to a png format after making these color changes, the PNG file retains the original colors instead ...

javascripthtmlcsssvgcolors

Dimensions in Material UI

As I embark on my journey with Material UI components for React, I am facing the challenge of integrating pre-styled components into my project. I have noticed that some components appear too large in my layout due to excessive padding and margins. Curren ...

cssreactjsmaterial-ui

I'm experimenting with using jQuery toggle to switch between text and images on my webpage

I attempted to use jquery "toggle" in order to hide the div containing text and display an image instead, and vice versa. However, when I click on the button, it does not work as expected. The button is from a bootstrap example - could that be the source o ...

javascripthtmljquery

Control other inputs according to the chosen option

Here is the HTML code snippet: <fieldset> <label for="tipoPre">Select prize type:</label> <select id="tipoPre"><option value="Consumer Refund">Consumer Refund</option> <option value="Accumulated Prize Ref ...

javascriptjqueryhtml

Experimenting with HTML and CSS to enhance email presentation

I am currently developing a Django application that requires sending out Emails with HTML templates. These email templates include images and dynamic variables from the Django context. However, each time I make changes to the inline CSS or HTML, I have t ...

htmlcssdjangoemail

Ensure that only one checkbox is checked at a time and that unchecking one does not remove the

I am facing an issue with two checkboxes in my code. When I click on the first checkbox in the featured playlist section, another popular genre checkbox should be unchecked. However, only the value changes and the checked mark remains unchanged. Can anyone ...

jquerycss

Positioning the <div> to the left of a sidebar

I regret to inform you that I am unable to provide an answer at this time. Below is the code snippet provided: #wrapper { width: 844px; display: block; margin-left: auto; margin-right: auto; text-align: left; } #posts { width: 844px; float: left; } .en ...

htmlcss

An artistic arrangement of images seamlessly fitting together in a rectangular shape using HTML and CSS

I am currently working on creating a collage of images that need to fit perfectly within a rectangle. I have successfully completed the top layer, but I am facing some confusion with arranging the images in the last row using CSS. (For better visualization ...

htmlcss

Copying an HTML <div> and inserting it into a database involves capturing the input text value as part of the process

How can I duplicate a content div in jQuery using the clone() method, while also incorporating the value of an input text? Is this the correct approach, or is there a better alternative? ...

phpjqueryhtmlmysql

The images in Bootstrap-Grid at 1920 resolution stay compact

Is there a way to make images grow beyond the 1280 resolution? This is how it appears at 1920 resolution https://i.sstatic.net/JmYc7.png And this is at 1280 resolution https://i.sstatic.net/Sk19K.png <div id="logokutu1" class="d ...

htmlcssbootstrap-4responsive-designgrid

The number input is not compatible with JavaScript/jQuery validation

While working on input field validation using javascript/jQuery code, I encountered an issue where the code worked fine with input type text but did not support input type number. Specifically, the 'number' type input did not work at all in FireF ...

javascriptjsonhtml