Question 42847 in Html Question posted in
Some basic documentation can be found here.

Fixed-Top navbar blocking top content of the page in mobile screen but not on pc screen – Html

Fixed-Top navbar is blocking the top content of the page in mobile screen but not on pc screen.
Once I reduce the browser width to mobile screen my navbar is covering the top content of my body…

<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <div class="d-flex flex-grow-1">
            <span class="w-100 d-lg-none d-block">
                <!-- hidden spacer to center brand on mobile --></span>
            <a class="navbar-brand d-none d-lg-inline-block" href="#"> Navbar 6 </a>
            <a class="navbar-brand-two mx-auto d-lg-none d-inline-block" href="#">
                <img src="https://via.placeholder.com/40?text=LOGO" alt="logo">
            </a>
            <div class="w-100 text-right">
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#myNavbar">
                    <span class="navbar-toggler-icon"></span>
                </button>
            </div>
        </div>
        <div class="collapse navbar-collapse flex-grow-1 text-right" id="myNavbar">
            <ul class="navbar-nav ms-auto flex-nowrap">
                <li class="nav-item">
                    <a href="#" class="nav-link m-2 menu-item nav-active">Our Solution</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link m-2 menu-item">How We Help</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link m-2 menu-item">Blog</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link m-2 menu-item">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
<div class="header">
    <h1>HEllo world 1</h1>
    <h1>HEllo world 2</h1>
</div>


body {
  padding-top: 60px;
  margin: 0;
}
@media (max-width: 979px) {
  body {
    padding-top: 0;
  }
}
.container-fluid{
    margin: 0;
}

I tried to insert top padding for the body but it disappears when the screen changes to mobile.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found the problem with my css code. The problem was with the padding in my mobile screen css code, as the navbar in mobile screen mode was covering the top content of the site. So instead of 0 padding i used the same padding for the mobile screen as well.

    body {
  margin: 0;
}
.header {
  padding-top: 60px; /* Set some padding for the header */
}
@media (max-width: 979px) {
  .header {
    padding-top: 0; /* Remove the padding for mobile screens */
  }
}

  2. 0

    Adding top padding to body should do the thing. Probably the issue is that your top padding is overwritten by your media query on screens less than 979px:

    @media (max-width: 979px) {
  body {
    padding-top: 0; // Remove
  }
}

    So just remove your media query.

    Otherwise you can add margin top to body.

    body {
  margin-top: 60px;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search