I need assistance in updating my footer to be bottom fixed without overlapping my left hand nav bar

Viewed 241

I've read the different posts here asking for footer help; but unfortunately I do not see anything here that have worked in assisting me.

I am building a web app where I am trying to fix the footer to the bottom of the page without overlapping my nav bar (Orange bar) on the left hand side.

Currently my page and code are:

fixed bottom, overlapping nav

<div class="container-fluid">
        <div class="HeaderBar row">
            <div class="col-md-12">
                <img src="images/systemslogo.png" />
            </div>
        </div>
        <div class="FeatureBar row">
            <div class="col-md-12">
                <p>Welcome</p>
            </div>
        </div>
        <div class="row min-vh-100">
            <div class="navbar col-md-1" style="background-color: #f78a00;">

            </div>
            <div class="col-md-11">
                <div class="row">
                    <div class="col-md-12">
                        <AlertSuccess/>
                        @Body
                    </div>
                </div>
                <div class="row fixed-bottom" style="background-color: #CCCCCC;"> 
                    <div class="col-md-12">
                        <p>Footer</p>
                    </div>
                </div>                
            </div>
        </div>
    </div>

If I remove the "fixd-bottom"; the footers width fixes; but then the footer floats to the top of the page like so:

Floating footer proper width

I have also attached my end goal image; I have blocked out the personal content. End Goal I have tried:

  1. Position relative with Bottom 0
  2. margin left (although moves footer over; it screws up when looking at mobile view where there should be no margin. (wasn't sure if I should do a media query and use this option)
  3. Position Absolute with mb-0
  4. Other ideas, but cannot recall what I have tried.

I am building this app in Blazor with Bootstrap 4.5.2

Thanks everyone for the assistance. I've been googling and trying for past 2 hours with on success.

1 Answers

You're looking for position: fixed;

An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.

A fixed element does not leave a gap in the page where it would normally have been located.

Source @ https://www.w3schools.com/css/css_positioning.asp

Related