Back

Technologies:

javascriptjavascript
htmlhtml
csscss
avatar
Tolerim
a month ago

How can I prevent my login page from overlapping onto my navbar?

Here is the modified paragraph: While working on a sliding login page, I experienced an issue where it kept overlapping my header while scrolling. I have included the CSS styles for both my navbar and login form below. I attempted to solve the issue by giving different z-index values to both the navbar and bg1, but it did not work. I also tried adjusting the display properties of the navbar.

.containerlog{
    position: relative;
    width: 800px;
    height: 500px;
    margin: 20px;
    margin-top: 10rem;
    margin-bottom: 25rem;
}
.bg1{
    position: absolute;
    top: 40px;
    width: 100%;
    height: 420px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: var(--box-shadow);
    z-index: 0;
}

.header{
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    background-color: var(--black);
    box-shadow: var(--box-shadow);
    z-index: 1000;
}

To address the overlapping issue, you could try setting the position of the navbar to "fixed" or "absolute". You may also need to adjust the z-index of each element to ensure they are layered appropriately. You can refer to this image for an example of how the login page and navbar should appear together: login page on navbar.
Answers(2)
avatar
Vogi
a month ago
Verified Answer
To fix the overlapping issue between your navbar and login form, you could try setting the position of the navbar to "fixed" or "absolute". You may also need to adjust the z-index of each element to ensure they are layered appropriately. Here is an example of how you can set up your navbar: 
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--black);
  box-shadow: var(--box-shadow);
  z-index: 1000;
}
You can also try using scroll-padding-top in your html or body element. Here is an example of how you can set up your login form: 
.containerlog {
    position: relative;
    width: 800px;
    height: 500px;
    margin: 20px;
    margin-top: 10rem;
    margin-bottom: 25rem;
}
.bg1 {
    position: absolute;
    top: 40px;
    width: 100%;
    height: 420px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: var(--box-shadow);
    z-index: 0;
}
You can refer to this image for an example of how the login page and navbar should appear together. I hope this helps! Let me know if you have any other questions.

Sources

Fixed Navbar Overlapping content - The freeCodeCamp ForumBody content overlapping navbar while scrolling - Stack OverflowHow To Create a Bottom Navigation Menu - W3Schoolhtml - Sidebar and navbar overlapping - Stack Overflowhtml - Page content overlapping navbar - Stack Overflow
avatar
Tolerim
a month ago
It seems like the issue you are having is that the login page is overlapping the header when scrolling. One possible solution is to add a z-index value to the header with a higher value than the login page. You mentioned you have already tried this, but it didn't work, so there might be another issue at play. One thing to check is if the position property of the header is set to static. If it is, changing it to fixed or sticky might help solve the issue. Another thing to check is the z-index values of any other elements that might be affecting the layout. Without seeing the HTML code and complete CSS, it's difficult to provide a more specific solution. However, I hope this helps point you in the right direction.
;