My main challenge is my limited knowledge of Bootstrap/CSS, which has led me to piece together code from different sources and tweak it to fit my needs. Another issue I'm facing is the correct nesting of containers/rows/columns around my navbar (which I want fixed to the left) and on top of a background image in a mobile web application setting. Specifically, I aim to display forms on top of this background image.
I've spent nearly two full days experimenting with inserting containers, rows, and columns around my existing code without success. Instead of achieving the desired layout, my navbar shifts to the center and text either appears above or below the image, but not on top of it. The background image is defined in the CSS within the head section as shown below.
body,
html {
height: 100%;
margin: 0;
}
.bg {
background: url("Red_polygon.jpg");
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.navbar-custom {
background-color: rgba(22, 22, 22, 1)
}
.thumbnail {
float: left;
margin: 2px 0px 2px 2px;
background: transparent;
border: 0 none;
box-shadow: none;
}<nav class="navbar navbar-custom navbar-fixed-top">
<div class="thumbnail" border="0">
<img src="ASD_header_logo.png" alt="Active Software Development" width=277 height=76 />
</div>
</nav>
<body>
<nav class="navbar navbar-custom navbar-fixed-top">
<div class="thumbnail" border="0">
<img src="ASD_header_logo.png" alt="Active Software Development" width=277 height=76 />
</div>
</nav>
<div class="bg">
<div class="wrapper">
</div>
<nav id="sidebar">
<ul class="list-unstyled components">
<p>
<center>
<h4>Management Information System</h4>
</center>
</p>
<li>
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Project nav</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
<a href="#">Projects</a>
</li>
<li>
<a href="#">Activities</a>
</li>
<li>
<a href="#">Tasks</a>
</li>
<li>
<a href="#">Staff</a>
</li>
</ul>
</li>
<li>
<a href="#">Help</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
<ul class="list-unstyled components">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Logout</a>
</li>
</ul>
</nav>
</div>I suspect there are errors in how I structured the navbar and background image. I am seeking assistance to understand my mistakes and learn how to rectify them. Apologies for the lengthy code snippet, as I'm unsure of what’s relevant after trying various approaches. Thank you for your help and warm regards.