I am having a problem for a menu that is in the footer of the window. I want it to always show. When you start the page or scroll up, the footer is hidden.
On the other hand, when scrolling down the menu appears (as I want it to be seen at all times).
I added a background color to make it more noticeable.
This is my code:
HTML
<div id="footer"> </div>
SCSS
//Mobile 440px
@media screen and (min-width: 0px) and (max-width: 440px) {
#footer {
position: fixed;
bottom: 0;
height: 55px;
width: 440px;
z-index: 2000;
//background:#fff;
background:red;
}
}
I am very sure that the problem is due to the position fixed. But without using that property I don't know how to make it always show at the bottom of the page.
The same thing happened to me last year working with a Prestashop. In the end I found an element of the page that went off the screen due to padding, this changed the size of the body and caused a small scroll.
Check the elements that can go out of their space, and those that you have with absolute or fixed positions, maybe you can correct it by adding to that element or to the parent element an "overflow: hidden"
Use the footer tag rather than a div with id="footer
Try giving the footer margin: 0;
Then with
padding
,height
andwidht
you put it to your liking so that it fits more or withmargin:0em;