I am currently expanding my knowledge in web development with a focus on CSS. While I am familiar with JS and HTML, CSS is proving to be more challenging for me. I have been attempting to create a webpage using Bootstrap, but I have hit a roadblock with the Navbar component and cannot progress further.
One issue I am facing is that I have a header bar with a height of 100px, followed by a Navbar with a height of 55px, and then the main content section. When inspecting these elements using Chrome Dev Tools, even though they are supposed to stack one after the other, everything appears to start at position top:0. Can someone explain why this is happening and suggest a solution?
Another problem arises when I add a background color to the header bar in order to position the Navbar slightly below the very top of the page. Upon resizing the browser window to a smaller size, the header bar disappears. How can I prevent this from happening?
Furthermore, there seems to be an issue with the Services Div - clicking on it does not cause it to display properly. What could be causing this malfunction?
I would greatly appreciate any assistance or explanations provided by the community members.
To better understand the issues I am describing, please refer to the following link:
HTML Code:
<meta charset=”utf-8”>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<html>
<head>
</head>
<body>
<div class="container">
<div id="header" class="container"> </div>
<nav class="navbar navbar-default navbar-fixed-top container" role="navigation">
<div class="container inside-bar">
<ul class="nav navbar-right">
<li class="active"><a href="#about">About</a></li>
<li><a href="#Services">Services</a></li>
<li><a href="#OurStaff">Our Staff</a></li>
<li><a href="#book">book</a></li>
<li><a href="#Gift">Gift Cards</a></li>
<li><a href="#Reviews">Reviews</a></li>
</ul>
</div>
</nav>
<div id="mainContent">
<div id='Services' class="box">
Services
</div>
<div id='about' class="box">
About
</div>
<div id='OurStaff' class="box">
Our Staff
</div>
<div id='book' class="box">
book
</div>
<div id='Gift' class="box">
Gift
</div>
<div id='Reviews' class="box">
Reviews
</div>
</div>
</div>
</body>
</html>