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…
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.