The elements in the footer refuse to stay at the bottom of the page

Visit my repository here

I'm having trouble keeping the social media links at the center and bottom of the home page in the "footer". Can someone help me with this?

Below is the CSS code I am currently using:

@import 'http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css';
 
/* CSS styles here */

If you need to take a look at the full HTML structure, see below:

<!-- Full HTML structure -->
<div id="container">

    <header>
        <nav>
            <!-- Navigation links here -->
        </nav>
    </header>

    <div id="body">
        <!-- Parallax sections here -->
    </div>

    <div class="footer">
        <footer>
            <nav>
                <a class="in ion-social-linkedin" href="https://www.linkedin.com/in/blake-schollmeyer-717a45142"></a>
                <a class="git ion-social-github" href="https://github.com/blakeschollmeyer"></a>
            </nav>
        </footer>
    </div>

</div>
javascriptjqueryhtmlcss

Answer №1

To create a flex layout for the footer, ensure that the entire footer is styled as a flexbox and not just specific elements like the anchor tags.

.footer {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

Answer №2

Integrating

.footer nav {
  bottom: 0px;
}

Solves the issue. Placing a fixed element within another absolute element is not possible, as a fixed element is inherently an absolutely positioned element.

html, body {
    margin: 0;
    padding: 0;
    /* Can set a % height on our container div later */
    height: 100%;
    font-family: "Ubuntu", "Courier New", "Times New Roman", "sans-serif";
}

h1 {
    font-size: 24px;
    margin: 0;
}

p {
    font-size: 12px;
    margin: 0;
    padding: 20px;
}

.container {
    /* Ensures full height of screen */
    min-height: 100%;
    margin: 0;
    padding: 0;
    /* Allows to position elements inside later */
    position:relative;
}

#header {

}

#body {
    /* Height of the footer */
    padding-bottom: 250px;
}

/* DECIDE WHETHER TO USE OR NOT FOR PARAGRAPH TEXT (NOT CURRENTLY IN USE) */
.content {
    width: 90%;
    margin: 4em auto;
    line-height: 30px;
    text-align: justify;
}

.logo {
    line-height: 60px;
    position: fixed;
    float: left;
    margin: 16px 46px;
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 2px;
}

nav {
    position: fixed;
    width: 100%;
    line-height: 60px;
}

nav ul {
    line-height: 60px;
    list-style: none;
    background: rgba(0, 0, 0, 0);
    overflow: hidden;
    color: #fff;
    padding: 0;
    text-align: right;
    margin: 0;
    padding-right: 40px;
    transition: 1s;
}

nav.black ul {
    background: #000;
}

nav ul li {
    display: inline-block;
    padding: 16px 40px;;
}

nav ul li a {
    text-decoration: none;
    color: #fff;
    font-size: 16px;
}

.text-container {
    /* Used for centering h1 and p tags inside the parallax container */
    color: white;
    text-align: center;
    padding: 150px 0px 0px 0px;
}

#parallax-1 {
    height: 100vh;
    width: 100%;
    background-image: url(images/image0.jpeg);
    background-size: cover;
    /* Creates the parallax effect */
    background-attachment: fixed;
}

#parallax-2 {
    height: 100vh;
    width: 100%;
    background-image: url(images/image2.jpeg);
    background-size: cover;
    background-attachment: fixed;
}

#parallax-3 {
    height: 100vh;
    width: 100%;
    background-image: url(images/image3.jpeg);
    background-size: cover;
    background-attachment: fixed;
}

#parallax4 {
    height: 100vh;
    width: 100%;
    background-image: url(images/image4.jpeg);
    background-size: cover;
    background-attachment: fixed;
}

#parallax5 {
    height: 100vh;
    width: 100%;
    background-image: url(images/image5.jpeg);
    background-size: cover;
    background-attachment: fixed;
}

.footer {
    position: absolute;
    /* Moves footer div to the bottom of the container div */
    bottom: 0;
    width: 100%;
    /* If changed, do so with #body also */
    height: 250px;
}

.footer a {
    text-decoration: none;
    border-radius: 7.5px;
    font-size: 40px;
    margin: 10px;
    display: flex;
    width: 60px;
    height: 60px;
    justify-content: center;
    align-items: center;
    float: left;
    transition: 0.5s all;
    cursor: pointer;
}

.footer nav {
  bottom: 0px;
}

.footer a:hover {
    margin-top: -10px;
}

.in {
    color: white;
    background: #0984e3;
}

.git {
    color: white;
    background: #2d3436;
}
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- PAGE CONTAINER -->
    <div id="container">

        <!-- HEADER -->
        <div id="header">
            <header>
                <nav>
                    <div class="logo">
                        LOGO
                    </div>
                    <div>
                        <ul>
                            <li><a href="home.html">Home</a></li>
                            <li><a href="about.html">About Me</a></li>
                            <li><a href="contact.html">Contact</a></li>
                        </ul>
                    </div>
                </nav>
            </header>
        </div>

        <!-- BODY -->
        <div id="body">
            <div id="parallax-1" class="text-container">
                <h1>Blake Schollmeyer</h1>
                <p>Front End-Web Developer | Co-Owner of BrandNewAgain.com</p>
            </div>
            <div id="parallax-2">
                <p></p>
            </div>
            <div id="parallax-3">
                <p></p>
            </div>
        </div>

        <!-- FOOTER -->
        <div class="footer">
            <footer>
                <nav>
                    <a class="in ion-social-linkedin" href="https://www.linkedin.com/in/blake-schollmeyer-717a45142"></a>
                    <a class="git ion-social-github" href="https://github.com/blakeschollmeyer"></a>
                </nav>
            </footer>
        </div>
    </div>
    <!-- CONTAINER END -->


    <!-- jQuery -->
    <script type="text/javascript">
        // Menu-toggle button
        $(document).ready(function() {
            $(".menu-icon").on("click", function() {
                $("nav ul").toggleClass("showing");
            });
        });
        // Scrolling Effect
        $(window).on("scroll", function() {
            if($(window).scrollTop()) {
                $('nav').addClass('black');
            }
            else {
                $('nav').removeClass('black');
            }
        });
    </script>

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

Angular JS Array with N-level hierarchy

I am developing an application for questionnaires, where questions have responses that can lead to child questions with even more responses. This creates a hierarchical structure of multiple levels. I am looking for the best strategy to display this data i ...

javascriptarraysangularjs

The icon for the "Hamburger" menu is missing, but the text is visible

Currently, I am designing the topbar for my website using Foundation. Everything seems to be functioning correctly except for the menu icon not appearing. I have followed the documentation provided by Foundation, but I am still facing difficulties. Here is ...

htmlcsssasszurb-foundation

Trouble with Installing Express

I have encountered an issue while trying to install express, despite following various solutions without success. Upon installation, I receive the message: npm WARN <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fb8c9e9988928f9 ...

javascriptnode.jsexpressnpm

Using an expression from the parent controller to disable an item in an AngularJS directive

I created a list of custom directive items, each with a remove button. The issue I'm facing is that I want to disable the remove button when there's only one item left in the list, but it's not working as expected. To see this problem in ac ...

javascriptangularjs

Utilizing Vue.js to merge data from a RESTful API

I am currently facing a challenge where I need to merge multiple API calls into a final object due to API consumption limits. Does anyone have any ideas on how I can combine several calls into the same final object? Below is an example of my code, where I ...

javascriptjsonvuejs2

What is the accurate user agent for Windows Phone?

Can someone explain why PHP and JavaScript produce different user agents? Which one is considered the accurate user agent? PHP User Agent Output: <?php print_r($_SERVER['HTTP_USER_AGENT']); ?> User Agent: Mozilla/5.0 (Mobile; Windows Ph ...

javascriptphpwindows-phone

Troubleshooting Typescript app compilation problem in a Docker environment

I am encountering a challenge while trying to build my typescript Express app using Docker. Surprisingly, the build works perfectly fine outside of Docker! Below is the content of my Dockerfile: FROM node:14-slim WORKDIR /app COPY package.json ./ COPY yarn ...

javascriptnode.jstypescriptdockerexpress

Is there a way to enable hover functionality on mobile devices? I wish for the hover effect seen on desktop to be triggered automatically on mobile devices

I attempted to implement @media (hover: hover) without success. In my design, I have three images in a row that reveal a text overlay when hovered over with a mouse. However, the issue arises when I try to switch to a mobile view, as the images remain un ...

javascripthtmljquerycssbootstrap-5

Edit the settings for the dual-axis line chart's parameters

After countless hours of scouring the Internet and numerous attempts, I have come to the decision to seek help by posting my issue on this forum. I must confess, I am not the best developer. My approach usually involves finding pre-existing code that I ca ...

javascriptchartsgoogle-apps-scriptgoogle-sheets

Utilizing the Page Method Feature in ASP.Net Web Services

I've been attempting to access a page method from a centralized module. My first attempt was placing it in a master page, but that did not yield the desired result Next, I tried incorporating it into a web service and followed these steps: A ...

javascriptasp.netajax

Selecting the optimal data structure: weighing the benefits of using boolean check versus array .include (balancing performance and redundancy

My objects can have one or more properties assigned, with a total of 5 different properties in my case. To illustrate this, let's use a simple movie example where each movie can be assigned from 5 different genres. I have come up with two methods to ...

javascriptarraysangulartypescript

Analyzing various array values to modify the status of a table

In the case of three records, the goal is to compare the values of 'test1' and 'test2' and then update the database to either 'open' or 'close' if the 'test1' and 'test2' values of the three recor ...

phphtmlmysqlarrays

Ways to prevent prop changes from passing up the chain?

After some experimentation, I discovered that the props I passed to a component can actually be changed within the component and affect the parent. This behavior is discussed in the official documentation. While objects and arrays cannot be directly modi ...

javascriptvue.jspointersvuejs3components

An issue has occurred while parsing the XML data, causing the document to not be properly formatted. As a result

Hey everyone, I'm currently working on an HTML/JavaScript project and have encountered a problem. There's a button in my code that is supposed to redirect to another page on my website, but when I click it, I receive the following error: XML Pars ...

htmlasp.net

What is the method for displaying an array separately for each item in JSON using JavaScript?

The issue arises when using for (let pet of person.pets) loop. In my JSON data, the "pets" field is an array but instead of getting a single array for each object, I am getting all pet arrays for every object in the JSON file. The desired outcome is to h ...

javascriptarraysjsonjavascript-objects

What are some techniques to create a dynamic background for a div that

I've been attempting to create responsive background images within a div element, but unfortunately, my current method is not producing the desired results. Below is an excerpt of my CSS code: .block-main{ background: url(images/ohdaihiep/bg1. ...

cssbootstrap-4responsive-designbackgroundresponsive-images

Running the JavaScript function prior to its interval being triggered

I'm in the process of developing a PHP dashboard page with various features, but there's one particular issue that bothers me, although it's not too major. The problem I'm facing is that I have a JavaScript function that fetches data a ...

javascriptphpajax

Displaying an array using Javascript that contains variables along with HTML code

First of all, thank you for your help and support! I am struggling with correctly outputting HTML code with variables using jQuery and jQuery Mobile. I receive results from a PHP database, separated by "," and converted into a JavaScript array successfull ...

javascripthtmlarraysvariablesoutput

Next.js data response not found

My code seems to be having an issue where the data fetched is not displaying on my website. I can see the data when using console.log(data), but nothing shows up when using src={data.img1}. async function getData() { const res = await fetch("http:/ ...

javascriptreactjsnext.jsfetch-api

What is the best way to update my React components to switch from a dark theme to a light theme?

Currently, I am attempting to switch between a light and dark theme in React by utilizing a Switch component from material-ui. Strangely, the theme only toggles once from dark to light. If you want to take a look at the full code, you can find it on this C ...

javascriptreactjsmaterial-ui