Tea Cozy Project: problems nav bar and background color

Hi guys!
I have quite completed the project, after having spent a lot of time, but there are still some elements I do not like…

  1. the nav bar is set as fixed and with z-index, the other sectors are relative, but they do not go under the nav bar, do you know why?
  2. the nav bar is not totally attached to the top of the browser
  3. I do not understand why “locations” title is backgrounded with black, even if I set up as transparent…
    Any idea?
    Thank you very much!
<!DOCTYPE html>

<html>

<head>
	<title>Tea Cozy</title>
	<link href="resources/css/css_tea.css" type="text/css" rel="stylesheet">
</head>

<body>

<header>
	<nav>
		<img src="resources/images/img-tea-cozy-logo.png" alt="logo Tea Cozy" id="logo">
		<ul class="nav_bar">
				<li><a href="#background_title">Mission</a></li>
				<li><a href="#content"> Featured Tea</a></li>
				<li><a href="#background_locations">Locations</a></li>
		</ul>
	</nav>
	<div id="background_title">
		<img src="resources/images/img-mission-background.jpg" alt="background image" id="background_img">
		<div class="title">
			<h2>Our Mission</h2>
			<h4>Handpicked, Artisanally Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
		</div>
	</div>
</header>

<main>
<section id="content">
	<div class="tea_month">
		<h2>Tea of the Month</h2>
		<h4>What's Steeping at The Tea Cozy?</h4>
	</div>
	<div class="choice">
		<div id="fall_berry">
			<img src="resources/images/img-berryblitz.jpg" alt="image berryblitz tea">
			<p>Fall Berry Blitz Tea</p>
		</div>
		<div id="spiced_rum">
			<img src="resources/images/img-spiced-rum.jpg" alt="image spiced rum tea">
			<p>Spiced Rum Tea</p>
		</div>
		<div>
			<img src="resources/images/img-donut.jpg" alt="image donut">
			<p>Seasonal Donuts</p>
		</div>
		<div>
			<img src="resources/images/img-myrtle-ave.jpg" alt="image myrtle ave tea">
			<p>Myrtle Ave Tea</p>
		</div>
		<div>
			<img src="resources/images/img-bedford-bizarre.jpg" alt="image beldford tea">
			<p>Bedford Bizarre Tea</p>
		</div>
	</div>
</section>

<section class="locations">
	<div id="background_locations">
		<div id="title_locations_cont">
			<h2 id="title_locations">Locations</h2>
		</div>
		<div class="locations_list">
			<div class="box">
				<h3>Downtown</h3>
				<p>384 West 4th St</p>
				<p>Suite 108</p>
				<p>Portland, Maine</p>
			</div>
			<div class="box">
				<h3>East Bayside</h3>
				<p>3433 Phisherman's Avenue</p>
				<p>&#40;Northwest Corner&#41;</p>
				<p>Portland, Maine</p>
			</div>
			<div class="box">
				<h3>Oakdale</h3>
				<p>515 Crescent Avenue</p>
				<p>Second Floor</p>
				<p>Portland, Maine</p>
			</div>
		</div>
	</div>
</section>

<section class="contact">
	<div id="contact">
		<h2>The Tea Cozy</h2>
		<h5>contact@theteacozy.com</h5>
		<p>917-555-8904</p>
	</div>
</section>
</main>

<footer>
	<p class="footer">copyright The Tea Cozy 2017</p>
</footer>

</body>

</html>
* {
	font-family: Helvetica;
	font-size: 22px;
	color: seashell;
	background-color: black;
	opacity: 0.9;
	text-align: center;
}

h2 {
	font-size: 30px;
}

h4 {
	font-size: 24px;
}

/* Nav Bar */

header {
	width: 100%;
}

nav {
	position: fixed;
	width: 100%;
	height: 69px;
	padding: 10px;
	border-bottom: 1px solid seashell;
	z-index: 10;
	margin-top: 0;
}

#logo {
	width: auto;
	height: 2.27rem;
	padding-top: 9.5px;
	padding-bottom: 9.5px;
	float: left;
}

ul.nav_bar {
	display: inline;
	float: right;
	padding-right: 10px;
	margin: auto 10px;
	padding-top: 7px;
}

li {
	display: inline-block;
	float: right;
	padding: 10px;
	margin: auto 10px;
	text-decoration: underline;
}

/* Header */

#background_title {
	position: relative;
	top: 69px;
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
}

#background_img {
	opacity: 0.9;
	justify-content: center;
	align-items: center;
	width: 95%;
	margin: 0 auto;
}

.title {
	position: absolute;
	width: 95%;
	margin: auto auto;
	justify-content: center;
	align-items: center;
}

.title h2 {
	text-align: center;
}

.title h4 {
	text-align: center;
}

/* Content */

#content {
	position: relative;
	z-index: 0;
	margin-top: 100px;
	margin-right: auto;
	margin-left: auto;
	max-width: 80%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.tea_month: {
	margin-top: 100px;
	max-width: 80%;
	display: flex;
		justify-content: center;
	align-items: center;
}

.tea_month h2 {
	text-align: center;
}

.tea_month h4 {
	text-align: center;
}

.choice img {
	width: 300px;
	height: 200px;
	margin-bottom: 10px;
	margin-left: 20px;
	margin-right: 20px;
	margin-top: 20px;
}

.choice p {
	text-align: center;
	justify-content: center;

}

.choice {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

/* Locations */

#background_locations {
	width: 95%;
	height: 500px;
	margin: 40px auto auto auto;
	background-image: url('https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-4/img-locations-background.jpg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	background-color: transparent;
	padding-top: 200px;
}


#title_locations {
	background-color: transparent;
}

.locations_list {
	width: 100%;
	margin-top: 15px;
	display: flex;
	justify-content: space-around;
	align-items: center;
	background-color: transparent;
}

.box {
	flex-basis: 300px;
	padding: 20px;
	box-sizing: border-box;
	background-color: black;
}

.footer {
	padding-left: 20px;
	float: left;
}```
  1. Set the background color of the nav bar to black and you’ll have to push the “Our Mission” down.
    And also, remove the opacity for nav bar or better still, set it as opacity: 1;

  2. Change the position of the nav bar to top: 0;. If that doesn’t work, give it a margin-top: 0;

  3. Set the color of the title to #fff or simply white.

    I also finished mine recently. Tea Cozy

2 Likes

You’re a life saver!! Thank you!