Help with Bootstrap Responsive Design

Help with Bootstrap Responsive Design
0

#1

I am working my way through the assignment in which we are supposed to make a profile page, and I am stumped as to how to get my page layout started correctly.

I created a NAV Bar at the top of my page that I like as a starting point, but no matter what I do, the new content that I start trying to add is hidden behind this NAV bar. It seems like when I created a new container, that it should be allowing my to add content beneath the NAV, but it isn’t…

My goal was to create a clean looking page in which the NAV takes up the entire main portion of the top and stays static when the user scrolls. (container-fluid) and I wanted to create the main body of the page to leave some margin on each side that I was going to eventually color with CSS to give it some contrast (container). Apparently, I am stuck at the starting line…

Codepen Progress

Help Please!!! :slight_smile:


#2

I would suggest you take the nav tags out of the container-fluid and put it at the top, like such:

<body class="mainbg">
    <!--A light grey nav bar that becomes vertical on a small screen-->
  <nav class="navbar navbar-expand-sm bg-dark fixed-top">
    <!--Branded Navbar with Logo-->
    <a class="navbar-brand" href="#">
      <img src="https://s26.postimg.org/vp40nsn15/Stubby_Cat.jpg" alt="stubby cat" style="width:60px; height: auto;"></a>
    <!--Links inside the nav bar-->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Profile</a></li>
      <li class="nav-item">
        <a class="nav-link" href="#">Gallery</a></li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a></li>
      <li class="nav-item">
        <a class="nav-link" href="#">Social Media</a></li>
    </ul>
  </nav>
 <div class="row container">
    <div class="col-md-8">
      <h1>Student in front end</h1>

    </div>
  </div>
</body>

because you are choosing to have a navbar at the top, which is fixed (fixed-top class in the <nav> tag) due to bootstrap styling.

Also change the CSS:

.container {
  padding-top: 175px; // adjust pixels as desired
}

Typically, you would also keep the toggler from the navbar for small screen-sizes, so that you see the “hamburger” icon at small screen sizes and the full navbar at larger sizes, rather than always seeing the possible links, but it’s up to you.