Change the position of the specified footer on the one-page website

I am currently in the process of creating a single-page layout website. What I want is to have the elements with the class "footer-bar" positioned absolutely on each page, but on the #Home Page, it should be position relatively.

Does anyone have any suggestions on how to make specific changes to individual pages? I don't want to have the footer written into every page, just once. I only need a CSS change if I am on the #Home page.

Thank you for any ideas.

<ul>
<li><a href="#Home">Home</a></li>
<li><a href="#Other">Other</a></li>
</ul>

<ul class="tabs-content">
<li id="Home"> Content for Home Page </li>       ---->Footer position:relative
<li id="Other"> Content for Other Page </li>     ---->Footer position:absolute
</ul>

<div class="footer">Footer Content</div>
htmlcss

Answer №1

It seems like your question is a bit unclear, but based on my interpretation, this code could potentially solve your issue:

.footer-bar {
position: absolute;
/* add any other necessary styles */
}

.footer-bar#Home {
position: relative;
/* add more custom styles here */
}

UPDATE:

To make the #Home in the CSS above a .Home, incorporate the following jQuery code within the required function.

$(".footer-bar").addClass("Home");

Alternatively

$(".footer-bar").css("position","relative");

Answer №2

To achieve this, consider using Jquery for the task at hand.

It is important to have a method in place to determine which tab is currently active. Therefore, implement a click event on your navigation links that will add or remove an .active class to your tabs accordingly.

Once you can identify the active tab, check if it corresponds to the 'home' tab and make any necessary CSS adjustments.

If this explanation seems unclear, I can create a sample demonstration for you. =)

Answer №3

This is the method I used:

$("#navpoint1, #navpoint2, #navpoint3, #navpoint4").on("click", function () {
         $(".footerbar").css({

         position: 'absolute',
         bottom: '0'

         });
     });

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

What are some creative ways to incorporate images into SVG paths?

Check out my JSFiddle here. I'm attempting to position this image in the center of my arc. My initial thought was to use .attr("fill","url('somePicture')"), but so far, no luck with that approach. const width = 700; const height = 600; con ...

javascriptjqueryhtmlsvgd3.js

Guide on achieving horizontal scrolling in Ionic 3

Check out this image I have a list of 10 names in an ion-scroll, but they are appearing on separate lines like paragraphs. Below is my HTML code: <ion-scroll scrollX="true" style="width:100vw; height:50px" > <ion-row class="headerChip"& ...

cssangularscrollionic2ionic3

Implementing asynchronous loading of an image onto a webpage using JavaScript

Is it possible to asynchronously load an image specified in the src attribute of an HTML image tag? I am trying to invoke a Java class using an image src tag, but I want this to happen asynchronously without affecting the current functionality of the web ...

javascripthtmlajax

What could be causing the discrepancy in alignment of my hyperlink?

I noticed that in this example the hyperlink is aligned at the bottom compared to the text. Can anyone help me identify the issue and provide a solution? Thank you! ...

htmlcss

Aligning the icon within the div and adding a gap between each div

I'm fairly new to web design, specifically dealing with html and css, and I'm attempting to create something similar to the design in the following image: My struggle lies in centering the fa-envelope-o icon both horizontally and vertically. I&a ...

htmlcss

Encountering issues with implementing useStyles in Material-UI components

Currently, I am working on a project utilizing Material-UI's library and encountering styling issues. This project marks my initial venture into ReactJS and JavaScript in general. Therefore, any assistance would be greatly appreciated! I am struggli ...

cssreactjsmaterial-ui

Using a Jinja 'for' loop to create nested 'If' statements

I'm attempting to include an if statement within a loop for a jinja template: </table> <class="container"> <table border ="1"> <caption> BBOXX <caption> <thead class="thead-inverse"> <tr> <th& ...

pythonhtmlfor-loopif-statementjinja2

Having an issue with my JavaScript burger menu not functioning properly

I'm really struggling to figure out why my code isn't working. I've checked and rechecked all the links, and everything seems correct. Could it possibly be because the code is outdated? I've been stuck on this for two days now and can&a ...

javascripthtmlcssnavigation

Buttons to maximize, minimize, and close individual sections on a webpage

I am fairly new to front end development and I must say, I am absolutely enjoying every bit of it. Here is a little challenge that came my way. It may seem simple to some but it got me thinking. I have three sections on the right side of my website. I wa ...

javascriptjqueryhtml

Issue with mix-blend-mode causing text to not show up on top of the gradient

I am struggling to find a way to make text easily readable over my gradient background. Despite trying to use MUI's Typography or a simple <p>, the contrast isn't great as the text appears in black. After some research, I discovered that I ...

cssmaterial-ui

Keep bootstrap content aligned to the left

I am working on creating a webpage using bulma/bootstrap and my goal is to have some text positioned on the left side of the screen. I want this text to be displayed in the red area and to stay fixed in place when I scroll down, similar to a side panel. ...

htmlcssbulma

A step-by-step guide on customizing the background color of the selected date in the MUI DatePicker

I am looking to customize the background color of selected dates in a MUI datePicker. In the image below, you can see that I want to change the blue color to a different color. Here is my code: const customStyles = makeStyles(theme => ({ datePickerC ...

htmlcssreactjsmaterial-ui

differences in rendering of flexbox align-items: center between Chrome and Firefox

As I was attempting to center a div inside another div using flexbox, an inconsistency in rendering between Firefox and Chrome caught my attention. In the scenario, there are 3 divs, each with properties display:flex, justify-content:center, and align-ite ...

htmlcssflexbox

Displaying items in the shopping cart across two separate columns

I have a website located at Within that page, I have included the Cart table using a woocommerce shortcode. Currently, the cart table is positioned below the billing details and payment options section. My goal is to move this cart table to be situated ...

csswordpresswoocommercecheckout

What is the best way to add content to a TextArea generated by the html helper in MVC 3?

I am attempting to retrieve a List collection of comments from the View using Razor and Microsoft's HTML helper for TextArea (@Html.TextAreaFor). While I can populate individual comments easily, I am unsure how to add the ENTIRE list collection of com ...

c#jqueryhtmlasp.net-mvc-3textarea

What are the various ways to incorporate material graphic elements on an HTML static webpage?

Currently, I am working on creating a static website that will be stored on CDs and USB sticks. This website serves as a manual for a specific product. I am considering using a graphic framework like Onsen UI, but I have found that I prefer Material UI. ...

htmlmaterial-ui

The background color appears to be fixed in place even after attempting to switch it to

I've been using a plugin for my camera functionality and I need to set the background color to transparent in order to display it properly. However, when I close the camera preview, the background remains transparent which is causing an issue. Is the ...

htmlcsscordovaionic-frameworkionic2

Leveraging route configuration's scope in HTML

As a beginner in AngularJs, I am currently exploring the creation of a single page application. However, I am encountering difficulties in converting my initial code into more professional and efficient code. During this conversion process, I have separate ...

javascripthtmlangularjs

Ways to retrieve the parent DIV's width and adjust the child DIV's width to match

Attached is my question with the HTML and a screenshot. Within a DIV container (DIV with ID=ctl00_m_g_a788a965_7ee3_414f_bff9_2a561f8ca37d_ctl00_pnlParentContainer), there are two inner DIVs - one for the left column TITLE (DIV ID=dvTitles) and the other f ...

jqueryhtmlcss

The issue with HTML/CSS is that it does not display video backgrounds correctly on mobile devices

On mobile, I have a code that displays a video with only a play button visible without the video itself. Once I click on play, the video starts playing as expected, but I would like to have something behind it. Here is how it currently appears: <div ...

htmlcsstailwind-css