Navbar overlapping content on mobile device

Topic: Navbar overlapping content on mobile device

theoad free asked 9 years ago

Hello, I follow this tutorial http://mdbootstrap.com/advanced-landing-page-with-mdb/ (so my code is nearly the same) and the problem is, that on mobile devices the navbar is overlapping the content, and because my navbar is higher than the height of the phone, I can't see the entire navbar. I tried to add a padding to the body body { padding-top: 70px; } , but it doesn't work. I also tried to changed the navbar-fixed-top to a navbar-static-top, but the design is then changed, and obviously, it's no more a fixed-top. Could you please help me ? I tried lot of things but I found any solution. Theo.

Add comment

theoad free answered 9 years ago

0 0 Best answer

Thank you ! But, it doesn't work. I found another solution that is :

@media (max-width: 767px) {
    .navbar-fixed-top {
        position: relative;
        top: auto;
    }
    .navbar-collapse {
        max-height: none;
    }
    body {
        margin: 0;
    }
}

which works great. Thanks for your help, it helped me to find this code. Problem is solved :-) !

Add comment

Alex Gotardi pro answered 9 years ago