Responsive Navigation

Hi I have made this navigation on codepen , but when I am inputing the code into my text editor the responsive navigation does not work as it should, can you identify what’s incorrect.

Please view what I’ve done on codepen https://codepen.io/owainbennett10/pen/wvKparx

This is my code on my text editor

<!DOCTYPE html>
<html>
<head> 

</head>

<style>

*{
  margin: 0;
	padding: 0;
	outline: none;
	border: none;
	-webkit-box-sizing: border-box;
}
*:before,
*:after{
	-webkit-box-sizing: border-box;
}
.clearfix {
  *zoom: 1;
}
html{
	font-family: Helvetica, arial, sans-serif;
	font-size: 12px;
}
body{
	background: url('brushed_alu.png');
}
.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}
.clearfix:after {
  clear: both;
}
.container{
	width: 80%;
	margin: 0 auto;
}
header{
	width: 100%;
	height: auto;
	background: black;
}
.header-left,
.header-right{
	position: relative;
	color: white;
	float: left;
}
.header-left{
	width: 30%;
}
.header-right label{
	position: absolute;
	top: -3.7em;
	right: 0;
	cursor: pointer;
}
.header-right span{
	position: relative;
	width: 2em;
	height: 2em;
	background: rgba(255,255,255,.3);
	-webkit-transition: all .3s ease;
}
.header-right span:hover{
	background: rgba(255,255,255,.6);
}
.header-right span:before,
.header-right span:after{
	content: '';
	position: absolute;
	width: 2em;
	height: .5em;
	top: 4px;
	left: 0;
	background: black;
}
.header-right span:after{
	top: 14px;
}
.header-right{
	width: 70%;
	text-align: right;
}
#open{
	display: none;
}
h1{
	font-weight: 200;
	line-height: 40px;
  font-size:15px;
}
a{
	text-decoration: none;
	color: white;
}
nav>a{
	position: relative;
	display: inline-block;
	font-size: 13px;
	line-height: 40px;
	padding: 0 2em;
	-webkit-transition: all .3s ease;
}
nav>a:hover{
	background: rgba(255,255,255,.9);
	color: black;
}
.hidden-desktop{
	display: none;
}
section{
	width: 100%;
	height: auto;
	background-image: -webkit-linear-gradient(#80059E 0%, #550486 100%);
}
.section-left,
.section-right{
	float: left;
}
.section-left{
	width: 70%;
	padding: 3em 0;
}
.section-right{
	width: 30%;
}
.section-title,
.section-tagline{
	color: white;
	font-weight: 300;
	margin: 0;
	padding: 0;
	-webkit-transition: all .4s ease;
}
.section-title{
	font-size: 4em;
	margin-bottom: .3em;
	text-shadow: 0 3px 0px black,
				 0 4px 0px rgba(150,150,150,.5);
}
.section-tagline{
	font-size: 1em;
}
.learn-more{
	display: table;
	margin: 3em auto 0;
	padding: 1em 6em;
	cursor: pointer;
	border-radius: 3px;
	box-shadow: inset 0 -3px 0 rgba(0,0,0,.8);
	background: #EAAF00;
	background-image: -webkit-linear-gradient(#EAAF00 0%, #D78100 100%);
	font-size: 1.2em;
}
.learn-more:hover{
	background: #EAAF00;
}
.learn-more:active{
	box-shadow: inset 0 2px 0 rgba(0,0,0,.8);
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
	.box{
		width: 49%;
		margin-bottom: 5%;
	}

	ul li:nth-child(3) .box{
		clear: both;
	}

	ul li:nth-child(2n) .box{
		margin-right: 0;
		clear: right;
	}
}

/* Small monitor */
@media (max-width: 979px){
	nav>a{
		padding: 0 1.5em;
	}
	.section-left,
	.section-right{
		width: 100%;
	}
	.section-left{
		text-align: center;
	}
	.section-right{
		padding: 0 0 2em;
	}
	.section-title{
		font-size: 4em;
		margin-bottom: .2em;
	}
	.section-tagline{
		font-size: 1.3em;
	}
	.learn-more{
		margin: 0 auto;
	}
}
 
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
	.container{
		width: 95%;
	}
	nav>a{
		padding: 0 2em;
	}
	h1{
		padding: .5em 0;
	}
	.header-left,
	.header-right{
		width: 100%;
		text-align: center;
	}
	.section-left,
	.section-right{
		width: 100%;
	}
	.section-left{
		text-align: center;
		padding: 2em 0;
	}
	.section-right{
		padding: 1em 0 2em;
	}
	.section-title{
		font-size: 3em;
		margin-bottom: .2em;
	}
	.section-tagline{
		font-size: 1.3em;
	}
	.learn-more{
		margin: 0 auto;
	}
}
 
/* Landscape phones and down */
@media (max-width: 380px) {
	body{
		padding: 0 .5em;
	}
	.container{
		width: 90%;
	}
	nav{
		height: 0;
		overflow: hidden;
		-webkit-transition: all .3s ease;
	}
	input[type="checkbox"]:checked + nav{
		height: 205px;
	}
	nav>a{
		padding: 0 1em;
		display: block;
		border-bottom: solid 1px rgba(255,255,255,.1);
	}
	h1{
		padding: .5em 0;
	}
	.header-left,
	.header-right{
		width: 100%;
		text-align: center;
	}
	.section-left,
	.section-right{
		width: 100%;
	}
	.section-left{
		text-align: center;
		padding: 1em 0;
	}
	.section-right{
		text-align: center;
		padding: 1em 0 2em;
	}
	.section-title{
		font-size: 2.4em;
		margin-bottom: 0;
	}
	.section-tagline{
		font-size: 1em;
	}
	.learn-more{
		display: table;
		margin: 0 auto;
	}
	.hidden-desktop{
		display: block;
	}
}
.full-width {
  width: 100%;
}
.500 {
  height:500px;
}
.pink {
  background: pink;
}
.blue {
  background: steelblue;
}xxx

</style>

<body>

   <header class="clearfix">
    <div class="container">
			<div class="header-left">
				<h1>S D W - Sports Massage Therapist</h1>
			</div>
			<div class="header-right">
				<label for="open">
					<span class="hidden-desktop"></span>
				</label>
				<input type="checkbox" name="" id="open">
				<nav>
					<a href="#">Home</a>
					<a href="#">Inspiration</a>
					<a href="#">Contact</a>
				</nav>
			</div>
		</div>
	</header>
			
<!-- Sizing the image tag works -->
<div class="pink 500">
 <img class="full-width" alt="Sunset Panorama" src="https://scontent.flhr3-2.fna.fbcdn.net/v/t1.0-9/s960x960/90243213_2597062143947842_2578180378577600512_o.jpg?_nc_cat=106&_nc_sid=110474&_nc_ohc=oB5kRZmiaWUAX-lgHuu&_nc_ht=scontent.flhr3-2.fna&_nc_tp=7&oh=f1d0b5531ea07c86b70ef97a8a2d8934&oe=5ED67C9D" />
</div>



</body>
</html>

Hi Owain,
the xxx in the last line breaks your CSS. Also, .500 in an invalid class name, because CSS classes should start with a letter, “-” or “_”; Looks like the codepen editor is more gracious …

Can you help me correct it please?

Can I please have some help to sort this problem out as it works fine on codepen but not in my text editor.

Can you please help the navigation works perfectly on codepen but not in my text editor please see code above and details for codepen.

I’ve started coding a responsive footer but I can see its not looking like I wanted it to look like can I have some help to identify the problem.

This is what I want the footer to like please view link, https://codepen.io/NamiqNamaz/pen/QZYyEq

This is what I’ve done http://siondafydd-com.stackstaging.com/.

Can you please help me

hey @OwainBennett,

have you copied the code from the codepen? if you did you will need to add bootstrap to your project too as that codepen uses bootstrap 4.

How can I do that can you help?

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
   <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >

add this into your head tag

Thank you very much can you help me with my navigation problem.

what problem do you have?

My navigation doesn’t collapse on a small screen and how can I make my navigation like this website http://www.rnaplant.co.uk/

My Navigation does not collapse on a phone as I’ve created it to do, also how can I make my navigation like this website http://www.rnaplant.co.uk/.

My responsive navigation is from my navigation works perfectly on here. https://codepen.io/owainbennett10/pen/wvKparx.

But when I put it on my text editor it does not work can you please help me http://siondafydd-com.stackstaging.com/

Hi I have coded a Responsive Navigation on Codepen which works perfectly but when I put the code my my text editor it does not work. I would like to have a similar navigation to this website http://www.rnaplant.co.uk/. Can you please help me with my problem

Please find the link to my codepen link of where the navigation code is https://codepen.io/owainbennett10/pen/wvKparx.

Then this is my code from the text editor

Code

<!DOCTYPE html>
<html>
<head> 

</head>

<style>



*{
  margin: 0;
	padding: 0;
	outline: none;
	border: none;
	-webkit-box-sizing: border-box;
}
*:before,
*:after{
	-webkit-box-sizing: border-box;
}
.clearfix {
  *zoom: 1;
}
html{
	font-family: Helvetica, arial, sans-serif;
	font-size: 12px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}
.clearfix:after {
  clear: both;
}
.container{
	width: 80%;
	margin: 0 auto;
}
header{
	width: 100%;
	height: auto;
	background: black;
}
.header-left,
.header-right{
	position: relative;
	color: white;
	float: left;
}
.header-left{
	width: 30%;
}
.header-right label{
	position: absolute;
	top: -3.7em;
	right: 0;
	cursor: pointer;
}
.header-right span{
	position: relative;
	width: 2em;
	height: 2em;
	background: rgba(255,255,255,.3);
	-webkit-transition: all .3s ease;
}
.header-right span:hover{
	background: rgba(255,255,255,.6);
}
.header-right span:before,
.header-right span:after{
	content: '';
	position: absolute;
	width: 2em;
	height: .5em;
	top: 4px;
	left: 0;
	background: black;
}
.header-right span:after{
	top: 14px;
}
.header-right{
	width: 70%;
	text-align: right;
}
#open{
	display: none;
}
h1{
	font-weight: 300;
	line-height: 40px;
}
a{
	text-decoration: none;
	color: white;
}
nav>a{
	position: relative;
	display: inline-block;
	font-size: 13px;
	line-height: 40px;
	padding: 0 2em;
	-webkit-transition: all .3s ease;
}
nav>a:hover{
	background: rgba(255,255,255,.9);
	color: black;
}
.hidden-desktop{
	display: none;
}
section{
	width: 100%;
	height: auto;
	background-image: -webkit-linear-gradient(#80059E 0%, #550486 100%);
}
.section-left,
.section-right{
	float: left;
}
.section-left{
	width: 70%;
	padding: 3em 0;
}
.section-right{
	width: 30%;
}
.section-title,
.section-tagline{
	color: white;
	font-weight: 300;
	margin: 0;
	padding: 0;
	-webkit-transition: all .4s ease;
}
.section-title{
	font-size: 4em;
	margin-bottom: .3em;
	text-shadow: 0 3px 0px black,
				 0 4px 0px rgba(150,150,150,.5);
}
.section-tagline{
	font-size: 1em;
}
.learn-more{
	display: table;
	margin: 3em auto 0;
	padding: 1em 6em;
	cursor: pointer;
	border-radius: 3px;
	box-shadow: inset 0 -3px 0 rgba(0,0,0,.8);
	background: #EAAF00;
	background-image: -webkit-linear-gradient(#EAAF00 0%, #D78100 100%);
	font-size: 1.2em;
}
.learn-more:hover{
	background: #EAAF00;
}
.learn-more:active{
	box-shadow: inset 0 2px 0 rgba(0,0,0,.8);
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
	.box{
		width: 49%;
		margin-bottom: 5%;
	}

	ul li:nth-child(3) .box{
		clear: both;
	}

	ul li:nth-child(2n) .box{
		margin-right: 0;
		clear: right;
	}
}

/* Small monitor */
@media (max-width: 979px){
	nav>a{
		padding: 0 1.5em;
	}
	.section-left,
	.section-right{
		width: 100%;
	}
	.section-left{
		text-align: center;
	}
	.section-right{
		padding: 0 0 2em;
	}
	.section-title{
		font-size: 4em;
		margin-bottom: .2em;
	}
	.section-tagline{
		font-size: 1.3em;
	}
	.learn-more{
		margin: 0 auto;
	}
}
 
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
	.container{
		width: 95%;
	}
	nav>a{
		padding: 0 2em;
	}
	h1{
		padding: .5em 0;
	}
	.header-left,
	.header-right{
		width: 100%;
		text-align: center;
	}
	.section-left,
	.section-right{
		width: 100%;
	}
	.section-left{
		text-align: center;
		padding: 2em 0;
	}
	.section-right{
		padding: 1em 0 2em;
	}
	.section-title{
		font-size: 3em;
		margin-bottom: .2em;
	}
	.section-tagline{
		font-size: 1.3em;
	}
	.learn-more{
		margin: 0 auto;
	}
}
 
/* Landscape phones and down */
@media (max-width: 480px) {
	body{
		padding: 0 .5em;
	}
	.container{
		width: 90%;
	}
	nav{
		height: 0;
		overflow: hidden;
		-webkit-transition: all .3s ease;
	}
	input[type="checkbox"]:checked + nav{
		height: 205px;
	}
	nav>a{
		padding: 0 1em;
		display: block;
		border-bottom: solid 1px rgba(255,255,255,.1);
	}
	h1{
		padding: .5em 0;
	}
	.header-left,
	.header-right{
		width: 100%;
		text-align: center;
	}
	.section-left,
	.section-right{
		width: 100%;
	}
	.section-left{
		text-align: center;
		padding: 1em 0;
	}
	.section-right{
		text-align: center;
		padding: 1em 0 2em;
	}
	.section-title{
		font-size: 2.4em;
		margin-bottom: 0;
	}
	.section-tagline{
		font-size: 1em;
	}
	.learn-more{
		display: table;
		margin: 0 auto;
	}
	.hidden-desktop{
		display: block;
	}
}
.full-width {
  width: 100%;
}
.500 {
  height:500px;
}
.pink {
  background: clear;
}
.blue {
  background: steelblue;
}
img {
  float: right;
}
    
    p{
        margin: 10px;
        background-color: clear;
    } 
</style>

<body>

 <header class="clearfix">
    <div class="container">
			<div class="header-left">
				<h1>Your company</h1>
			</div>
			<div class="header-right">
				<label for="open">
					<span class="hidden-desktop"></span>
				</label>
				<input type="checkbox" name="" id="open">
				<nav>
					<a href="#">Home</a>
					<a href="#">Inspiration</a>
					<a href="#">Articles</a>
					<a href="#">Works</a>
					<a href="#">Contact</a>
				</nav>
			</div>
		</div>
	</header>

			
<!-- Sizing the image tag works -->
<div class="pink 500">
 <img class="full-width" alt="Sunset Panorama" src="https://scontent.flhr3-2.fna.fbcdn.net/v/t1.0-9/s960x960/90243213_2597062143947842_2578180378577600512_o.jpg?_nc_cat=106&_nc_sid=110474&_nc_ohc=oB5kRZmiaWUAX-lgHuu&_nc_ht=scontent.flhr3-2.fna&_nc_tp=7&oh=f1d0b5531ea07c86b70ef97a8a2d8934&oe=5ED67C9D" />
</div>
    <br>

    <p><img src="sdw.png" alt="Pineapple" style="width:170px;height:170px;margin-left:15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. 
Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio..</p>


</body>
</html>

Well one thing that you can do is make the navbar sticky. So,

nav {
  position: sticky;
  top: 0px;
}

Will that make it like the codepen example I’ve done plus how can I make it more similar to RNA Plants navigation?. Can you please help me as I really want it to look like RNA Plants navigation.

The position sticky will make it stick to the top of the page like the RNA Plants navigation bar.

Where can I put in it my code also I want it to collapse as it does on codepen on a mobile as i want it to be responsive?.

You can put it on nav CSS

nav {
  position: sticky;
  top: 0px;
}

If you want to make it collapse, you have to create a replacement element which normally is a i tag with 3 bars on it. then you can use the @media on css.
You can learn more about making a responsive tag here:

https://www.w3schools.com/howto/howto_js_topnav_responsive.asp

Can you please have a look at the code provided in the earlier messages and let me know where to insert the above, plus I had it collapsing in codpen but not in my text editor can you please look at my codepen which I’ve given the link to I think there must be an error.