It doesn’t seem to collapse on the codepen
The codepen one I’m taking about, It does when you resize the it to small screen it does collapse that’s what I want to do, plus on a large screen make it like RNA have done can you help with the code?.
When on your code editor, did you link your CSS files inside the HTML file? because normal Code Editor don’t do that, codepen does it by default.
This is my code that I’ve got on my code 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;
}
.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>
So I’ve got so many wrongs in your HTML docs. You didn’t link your css to your HTML. On your HTML, you didn’t declare <!DOCTYPE html>, you didn’t have the <html> tag, you didn’t have either <body> or <head> tag.
So what do I need to do to make it work?
The code i just gave is from my text editor not codepen
It all works perfectly fine, if you want to check bugs or want to see what the live code you can open the console by pressing Ctrl + Shift + I
Can you tell me what works fine can you show me?
How can I make the navigation like RNA on a desktop?
As you can see, I fixed a lot of the problem here.
I declared
<!DOCTYPE html> at the top, <html>, <body>, <head> and I also linked the CSS to the HTML using the <link> tag on the top
Sorry for being a pain can you please copy and paste the html and css section on the here so i can just copy and paste it straight in please i would be ever so grateful if you can do that
Where do you want me to share it. I don’t want to share it in the FCC forum
please can you do that for me please.
* {
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');
}
#title {
display: inline;
font-size: 25px;
letter-spacing: 3px;
}
#title h1 {
font-weight: bolder;
}
.clearfix:before,
.clearfix:after {
display: table;
line-height: 0;
content: "";
}
.clearfix:after {
clear: both;
}
.headerContainer {
width: 80%;
margin: 0 auto;
padding-bottom: 10px;
}
header {
position: sticky;
top: 0px;
width: 100%;
height: auto;
background: black;
}
.header-left,
.header-right {
position: relative;
color: white;
float: left;
}
.header-right {
margin-top: 10px;
font-size: 20px;
font-weight: bolder;
}
main p {
font-size: 25px;
margin: 0 15px;
text-align: center;
line-height: 50px;
}
.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;
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 {
height: 100%;
}
nav > a {
position: relative;
display: inline-block;
font-size: 13px;
line-height: 40px;
padding: 0 2em;
-webkit-transition: all .3s ease;
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;
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) {
.headerContainer {
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;
}
.headerContainer {
width: 90%;
}
nav {
height: 0;
overflow: hidden;
-webkit-transition: all .3s ease;
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%;
}
.pink {
background: pink;
}
.blue {
background: steelblue;
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
</head>
<body>
<header class="clearfix">
<div class="headerContainer">
<div class="header-left">
<h1 id="title">SDW</h1><h2>Sports Massage Therapist</h2>
</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>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum tristique metus id ornare. Proin rutrum neque cursus tincidunt sagittis. Maecenas et erat nulla. Aenean ac finibus urna, eget cursus dui. In ornare augue et efficitur varius. Nunc ut egestas turpis, vel molestie orci. Etiam in justo a eros vestibulum hendrerit id in leo. Ut fermentum luctus quam, sit amet tempor mi faucibus vitae. Nulla laoreet, elit in ultrices fringilla, nisi elit convallis lorem, a vehicula elit nunc at est. Nam elit arcu, tincidunt nec nisl id, faucibus accumsan urna. Donec sit amet varius tellus. Sed nunc massa, egestas eu elit vitae, lacinia varius purus. Cras feugiat hendrerit vulputate.
Morbi vitae auctor massa, ac lobortis lectus. Etiam et dolor ac justo imperdiet efficitur. Donec in turpis commodo ligula hendrerit imperdiet vel quis velit. Mauris scelerisque velit quam, sed dictum leo fermentum ut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel magna pellentesque, consectetur quam non, vestibulum nibh. Cras et leo neque. Nulla porta, lacus vel porta tempor, sem quam consequat ipsum, id varius purus lorem et eros. Duis lacus velit, tristique sit amet volutpat vitae, eleifend ac dui. Aliquam blandit turpis orci, ut volutpat nunc ornare a. Duis at odio sed felis vehicula imperdiet ac ac velit. Maecenas porta leo tortor, quis rutrum arcu aliquam accumsan. Integer diam diam, varius quis tempor auctor, tempus eget lectus. Praesent mattis nisi a nunc venenatis pharetra. Maecenas elementum, turpis vel porta malesuada, mi tortor egestas felis, ut placerat dui est non nisi.
Nulla nec gravida tellus. Phasellus pretium metus sodales, molestie nisi a, auctor orci. Nulla in sapien sapien. In ultrices purus nisl, eget egestas nisl gravida sit amet. Praesent tristique vel magna sed egestas. Quisque lobortis massa purus. Nunc nibh enim, blandit ornare sapien non, convallis porta odio. Sed finibus maximus tortor, tristique mattis elit hendrerit id. Curabitur varius, dui eget tincidunt condimentum, orci est finibus erat, id luctus quam nulla eu nulla. Maecenas porttitor risus a pulvinar bibendum. Aenean at libero tellus. Maecenas ullamcorper justo eget dui euismod, eget fringilla arcu posuere. Integer blandit tempor accumsan.
Aenean posuere, felis in accumsan pulvinar, sem dui ornare nibh, et ultrices nunc ante in lorem. Mauris a lacus mattis, consequat nisi ut, tempor nunc. Ut et ex efficitur, imperdiet magna nec, molestie nisi. Mauris mollis quam ante, ac tincidunt dui semper viverra. Duis interdum ante eu urna ultrices sagittis. Etiam ultrices, leo ac lobortis hendrerit, neque nunc commodo turpis, at maximus neque enim ac erat. Fusce consectetur vulputate arcu, ut vehicula lacus porta consectetur. Mauris congue dolor eget pulvinar molestie. Maecenas porttitor rutrum sapien, in vehicula purus vestibulum vitae. Cras mattis eget turpis a dapibus.
Donec bibendum urna ut augue venenatis, at tristique diam facilisis. Donec dignissim viverra nisi, eget cursus libero volutpat ut. Duis tempus velit id ultricies blandit. Aenean facilisis nulla lectus, finibus ultrices ipsum varius vitae. Maecenas nibh nisi, finibus et dui vitae, bibendum maximus sapien. Nullam ut massa in leo venenatis convallis nec in sem. Vivamus congue risus pretium nulla venenatis feugiat. Nulla pellentesque, quam et consequat elementum, ligula tellus iaculis nisl, ac mollis tortor lacus non justo. Etiam consequat dictum orci nec ultrices. Morbi tempor, eros ac hendrerit lobortis, massa lorem vestibulum purus, ac mollis augue eros finibus velit. Maecenas tempor ligula efficitur elementum auctor. Quisque viverra varius dapibus. Morbi blandit est eget sapien sagittis, sed interdum dui aliquam. Sed massa massa, imperdiet quis porttitor a, convallis vel augue. Phasellus hendrerit, lectus aliquet ornare dapibus, est tellus pulvinar erat, in lacinia ex eros vitae magna.</p>
</main>
</body>
</html>
Sorry it’s still not working.
This is the link to what you’ve done so me and it still doesn’t work can you please help me?.
I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.
Note: Backticks are not single quotes.
Just seen that the navigation does work but how can I have it like RNA Plant website look like on a phone and desktop can you please help me with that.
I’m having trouble changing the text colour of my navigation can you please help me and I would like it to collapse on a small screen on an iPhone like this website http://www.rnaplant.co.uk/.
Please view what I’ve done so far http://siondafydd-com.stackstaging.com/
Can you please help me with my issues as It’s stressing me out.