Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

Footer Fixed Position Div


Hello,

I am using Metronics Demo7 Vue, and I am trying to add a div to the Footer.vue file in a fixed position so that it is always visible at the bottom. I am able to add the div in the correct position, however, my issue is with the width.

As soon as I change position:fixed, the width is no longer inherited. Even if I add width: inherit, it will not work. Below I have listed the html I am using, but the width changes to 56px as soon as I changed the position to fix. Otherwise, it works, but the position is not fixed. Can you help me get the position to be fixed, however, the width should always stay the same size as the footer, content or or header.

<div class="bg-white h-70px" >This is my fixed footer div
</div>


Text formatting options
Submit

Replies (1)


Hi,

The fixed footer layout mode requires major changes in the layout SASS folder. We will release this feature for Demo 7 in the next update soon. In the meantime you can download the layout folder here and replace it with src/sass/layout folder and add footer-fixed to the body tag in the HTML code to enable fixed footer for desktop mode and add footer-tablet-and-mobile-fixed class to enable it for mobile mode and recompile the app.

Regards.


Text formatting options
Submit
Text formatting options
Submit