I'am triyng to make Link A,B goes inside to Left element (green box), and Link C,D goes inside to Right element (yellow box), wrapped by container.
As the picture show, also i managed placing Link C,D on the right side using CSS position: absolute; right: 0;
but when i using position: absolute; left: 0;for Link A,B this link is not on the left side aligned to upper elements
Picture
this is my code:
<head>
<style>
.container {
width: 1000px;
border: 3px solid black;
margin: auto;
padding: 16px;
}
.left, .right { width: 400px; }
.left {
background-color: #197b30;
float: left;
color: white;
font-style: italic;
text-align: left;
position: relative;
}
.left span {
font-weight: bold;
font-size: large;
font-style: normal;
text-decoration-line: underline;
}
.left ul {
color: rgb(243, 9, 126);
list-style-type: disc;
position: absolute;
left: 0;
}
.left a { color: #ff0000}
.right a { color: #ff0000}
.right {
background-color: #fff200;
float: right;
color: black;
font-style: italic;
text-align: right;
position: relative;
}
.right span {
font-weight: bold;
font-size: large;
font-style: normal;
text-decoration-line: underline;
}
.right ul {
color: rgb(243, 9, 126);
list-style-type: disc;
position: absolute;
right: 0;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<p><span>This is a left paragraph</span</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel, aperiam odit
nostrum,
reprehenderit temporibus reiciendis aliquam maxime sunt qui quos eligendi sequi unde,
quas molestiae explicabo quod harum veniam alias.</p>
<p><span>This is a left link</span></p>
<ul>
<li>Left Link A</li>
<li>Left Link B</li>
</ul>
</div>
<div class="right">
<p><span>This is a right paragraph</span></p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi incidunt
necessitatibus adipisci eum harum, culpa, amet voluptate cumque molestias quos
earum
asperiores hic debitis iure iste porro? Fugit, itaque quo.</p>
<p><span>This is a right link</span></p>
<ul>
<li>Right Link C</li>
<li>Right Link D</li>
</ul>
</div>
<div class="clear"></div>
</div>
When you are using the ul element there's a default padding on the left hand side of every li element.
Try this:
.left ul {
color: rgb(243, 9, 126);
list-style-type: disc;
position: absolute;
left: 0;
padding: 0; /* Add this */
}
That removes the padding and will position the navigation as you expect.
Related
I am trying to make a vertical navigation bar. I have made a navbar.I want to set it's height to full page but i am not able to do that even when is set height:100% in CSS. I want content like para to be displayed on its left side.
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 200px;
height: 100%;
background-color: grey;
}
ul li {
text-align: center;
background-color: grey;
border-bottom: 1px solid black;
}
ul li a {
font-family: monospace;
color: white;
font-size: 23px;
text-decoration: none;
display: block;
padding: 10px;
pos
}
ul li a:hover {
background-color: white;
color: black;
}
ul li a:active {
background-color: cadetblue;
color: red;
}
div {
display: inline;
}
<ul>
<li><a class="active" href="#home" target="_blank">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam aspernatur qui tenetur dicta, aperiam harum saepe, fuga quae distinctio corporis quas amet minima magnam, excepturi cupiditate at sunt sit cum.</div>
I tried to change the display: parameter of the unordered list to display:inline and also the display: parameter of div tag to display:inline How do I set the height to full page and also display content on its left side.
When you use height:100%; it means that you want that element to be 100% of its parent which in your case is body, and as height is not defined for it so it is auto. all you need to do is to add min-height:100vh for the body. It will solve your problem for full height navbar.
Now your next objective is to make the text to wrap around it, which can achieved by floating your navbar to left. This will make the next elements to wrap around it.
Setting div to display:inline; won't be a good thing to do just for achieving this result, because the moment you add next div it will start creating problems.
body {
margin: 0;
height: 100vh;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 200px;
height: 100%;
background-color: grey;
float: left;
margin-right: 10px;
}
ul li {
text-align: center;
background-color: grey;
border-bottom: 1px solid black;
}
ul li a {
font-family: monospace;
color: white;
font-size: 23px;
text-decoration: none;
display: block;
padding: 10px;
}
ul li a:hover {
background-color: white;
color: black;
}
ul li a:active {
background-color: cadetblue;
color: red;
}
<body>
<ul>
<li><a class="active" href="#home" target="_blank">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam aspernatur qui tenetur dicta, aperiam harum saepe, fuga quae distinctio corporis quas amet minima magnam, excepturi cupiditate at sunt sit cum.</div>
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam aspernatur qui tenetur dicta, aperiam harum saepe, fuga quae distinctio corporis quas amet minima magnam, excepturi cupiditate at sunt sit cum.</div>
</body>
My suggestion is to use Bootstrap or for understanding you can do it like this also:
<html>
<head>
<style>
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 20vw;
height: 100%;
background-color: grey;
}
ul li {
text-align: center;
background-color: grey;
border-bottom: 1px solid black;
}
ul li a {
font-family: monospace;
color: white;
font-size: 23px;
text-decoration: none;
display: block;
padding: 10px;
pos
}
ul li a:hover {
background-color: white;
color: black;
}
ul li a:active {
background-color: cadetblue;
color: red;
}
div {
display: inline;
}
</style>
</head>
<body>
<div style="float: left; width: 20vw;">
<ul>
<li><a class="active" href="#home" target="_blank">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</div>
<div style="float: right;width: 75vw">
<div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsam aspernatur qui tenetur dicta, aperiam harum saepe, fuga quae distinctio corporis quas amet minima magnam, excepturi cupiditate at sunt sit cum.</div>
</div>
</body>
</html>
so basically I'm creating a fake Italian restaurant site and the images in the img-container wont fit the box, leaving a line below the image. Also, the img-container overflows past the image which I don't want it to do. Any help appreciated.
Here is my code
#import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;600;700;800&display=swap");
#import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght#400;700&display=swap");
/* CSS RESET */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Body styling */
body {
background-color: #dee7e7;
font-family: "Open Sans", sans-serif;
}
/* Nav */
nav {
margin-top: -35px;
height: 70px;
background-color: #fff;
margin: 0px 0px 35px 0px;
height: 60px;
padding: 20px;
}
nav a {
text-decoration: none;
}
nav a:visited {
color: #000;
}
nav a:hover {
cursor: pointer;
}
.nav-links {
float: right;
margin-top: -25px;
margin-bottom: 20px;
font-family: "Libre Baskerville", serif;
}
.nav-links .current {
font-weight: 700;
text-decoration: underline;
}
.nav-links a {
padding-right: 10px;
font-size: 16px;
text-decoration: none;
color: #000;
font-weight: 400;
}
.nav-links a:hover {
text-decoration: underline;
}
.nav-links a:visited {
color: #000;
}
header nav h3 {
font-family: "Libre Baskerville", serif;
font-size: 26px;
}
/* Showcase 1 */
.showcase {
display: grid;
grid-template-columns: 2fr 3fr;
grid-column-gap: 1em;
text-align: left;
margin-bottom: 20px;
}
.text-container {
place-items: center;
margin: 20px 30px 20px 60px;
font-size: 18px;
}
.text-container h1 {
margin-bottom: 20px;
font-family: "Libre Baskerville", serif;
}
.text-container p {
font-size: 16px;
padding-right: 10px;
}
.btn-primary {
width: 150px;
height: 40px;
margin-top: 20px;
border: none;
border-radius: 5px;
background: #06a77d;
color: #fff;
font-family: "Open Sans", sans-serif;
font-weight: 600;
box-shadow: 1px 1px 2px 1px grey;
}
.btn-primary:hover {
color: lightgrey;
text-decoration: underline;
cursor: pointer;
}
.img-container {
background: #c9d7d7;
}
.img-container img {
margin-left: 80px;
overflow: auto;
height: 500px;
}
/* Showcase 2 */
.showcase-2 {
display: grid;
grid-template-columns: 2fr 3fr;
grid-column-gap: 1em;
text-align: left;
margin-bottom: 30px;
background: #192534;
color: #fff;
}
.text-container-2 {
place-items: center;
margin: 20px 30px 20px 60px;
font-size: 16px;
order: 1;
}
.text-container-2 h1 {
margin-bottom: 20px;
font-family: "Libre Baskerville", serif;
}
.text-container-2 p {
font-size: 16px;
padding-right: 10px;
}
.btn-secondary {
width: 150px;
height: 40px;
margin-top: 20px;
border: none;
border-radius: 5px;
background: #cc224e;
color: #fff;
font-family: "Open Sans", sans-serif;
font-weight: 600;
box-shadow: 1px 1px 2px 1px black;
}
.btn-primary:hover {
color: lightgrey;
text-decoration: underline;
cursor: pointer;
}
.img-container-2 {
background: #3d5777;
padding-right: -300px;
order: 2;
}
.img-container-2 img {
margin-left: 80px;
max-width: 100%;
height: 510px;
}
.img-good-food img {
float: right;
max-width: 100%;
height: 130px;
margin-right: 20px;
}
.page-title {
text-align: center;
margin-bottom: 30px;
font-family: "Libre Baskerville";
}
.about-container {
place-items: center;
margin: 10px 30px 20px 60px;
font-size: 18px;
}
.text-container h1 {
margin-bottom: 20px;
font-family: "Libre Baskerville", serif;
}
.about-container p {
font-size: 16px;
padding-right: 10px;
margin-left: 20px;
}
.about-container button {
margin-left: 20px;
}
.menu-text {
text-align: center;
margin-left: 70px;
margin-right: 70px;
margin-bottom: 20px;
}
.menu-container {
display: flex;
justify-content: center;
background: #3d5777;
margin-left: 200px;
margin-right: 200px;
margin-bottom: 20px;
}
.fa-chevron-left {
font-size: 30px;
float: left;
margin-right: 200px;
margin-top: 300px;
color: #fff;
}
.fa-chevron-right {
font-size: 30px;
float: left;
margin-left: 200px;
margin-top: 300px;
color: #fff;
}
.menu-container img {
max-width: 100%;
height: 650px;
margin: 10px;
}
iframe {
margin-top: 40px;
float: right;
margin-right: 100px;
width: 600px;
box-shadow: 1px 1px 1px 1px grey;
}
.contact {
background: #3d5777;
width: 400px;
height: 200px;
color: #fff;
margin-left: 120px;
margin-top: 160px;
place-items: center;
justify-content: center;
padding-top: 30px;
}
.contact p {
margin-bottom: 5px;
}
.fas {
margin-bottom: 5px;
font-size: 16px;
}
/* Footer */
footer {
width: 100%;
text-align: center;
background: #192534;
padding: 10px;
}
footer h2 {
color: #fff;
font-size: 14px;
}
footer a {
color: #8abeff;
}
<header>
<nav>
<a href="">
<h3 class="logo">Chef Italia</h1>
</a>
<div class="nav-links">
<a class="current" href="index.html">Home</a>
About Us
Menu
Contact
</div>
</nav>
</header>
<div class="showcase">
<div class="img-container">
<img src="img/home-showcase.jpg" alt="Photo of Italian cheese on wooden board">
</div>
<div class="text-container">
<h1>Welcome to Chef Italia</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis voluptas inventore quae. Dolores sapiente officiis, reprehenderit fugiat aliquam veritatis, distinctio doloremque minima facere maxime voluptatibus sunt suscipit animi error molestias
adipisci. Officia, quae adipisci quas quod incidunt, dolores vero ipsa pariatur, necessitatibus ullam ea aspernatur eveniet quisquam eaque molestiae.</p>
<button class="btn-primary">Find out more</button>
</div>
</div>
</div>
<div class="showcase-2">
<div class="img-container-2">
<img src="img/authenic-italian.png" alt="Photo of 2 pizzas on plates with glasses of water and cutlery on a table">
</div>
<div class="text-container-2">
<h1>Authentic Italian Food</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis voluptas inventore quae. Dolores sapiente officiis, reprehenderit fugiat aliquam veritatis, distinctio doloremque minima facere maxime voluptatibus sunt suscipit animi error molestias
adipisci. Officia, quae adipisci quas quod incidunt, dolores vero ipsa pariatur, necessitatibus ullam ea aspernatur eveniet quisquam eaque molestiae.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt praesentium reiciendis accusamus reprehenderit saepe accusantium vero quas quam asperiores aliquam quia, laboriosam necessitatibus sequi autem aperiam maxime quidem temporibus adipisci
nemo minus doloremque possimus? Iste.</p>
<button class="btn-secondary">View Our Menu</button>
</div>
</div>
<div class="showcase">
<div class="img-container">
<img src="img/good-food-picture.jpeg" alt="Photo outside of resteraunt with green leaf tree covering one third of the yellow building">
</div>
<div class="text-container">
<h1>Good Food Awards Winner 2019</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis voluptas inventore quae. Dolores sapiente officiis, reprehenderit fugiat aliquam veritatis, distinctio doloremque minima facere maxime voluptatibus sunt suscipit animi error molestias
adipisci. Officia, quae adipisci quas quod incidunt, dolores vero ipsa pariatur, necessitatibus ullam ea aspernatur eveniet quisquam eaque molestiae.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt praesentium reiciendis accusamus reprehenderit saepe accusantium vero quas quam asperiores aliquam quia, laboriosam necessitatibus sequi autem aperiam maxime quidem temporibus adipisci
nemo minus doloremque possimus? Iste.</p>
<button class="btn-primary">Find Out More</button>
<div class="img-good-food">
<img src="img/good-food.png" alt="Good Food Awards Logo">
</div>
</div>
</div>
<footer>
<h2>© Chef Italia 2021. Designed and developed with 💙 by Tyler Lechowski</h2>
</footer>
Did you try to just add:
.img-container {
position:relative
}
.img-container img {
height: 100%;
width: 100%;
}
To define image size you can add for example:
.img-container {
position:relative;
width: 200px;
height: 200px;
}
but be sure you add it to .img-container, not .img-container img. In .img-container you define size in pixels but in .img-container img you make it 100% for width and height to fill whole container
Try adding this:
.img-container {
position: relative;
overflow: hidden;
}
.img-container img {
height: 100%;
min-width: 100%;
object-fit: cover;
position: absolute;
}
Oveflow hidden to hide any part of the picture that comes outside the container. Object-fit cover to make it cover the container. If you want smaller picture just specify height and width on the container.
I'm trying to show message within a div with icon on the left.
Expected result is icon should always adjacent to text and together they need to be aligned at bottom-center of div.
I'm using :after pseudo element. Keeping position: absolute of icon didn't help since that needs manually adjusting the icon position relative to text.
Here is the CSS.
.parent{
font-weight: 500;
height: 65px;
text-align: center;
padding: 15px 0 10px;
margin: auto;
display: block;
width: 80%;
font-size: 12px;
overflow: hidden;
position: relative;
}
.parent > div {
float: none;
/* display: table-cell; */
vertical-align: middle;
position: absolute;
bottom: 0;
width: 100%;
}
.msg:after {
content: '';
background: url(data:image/...);
height: 16px;
width: 16px;
display: block;
position: absolute;
top: 0;
padding-right: 5px;
left: 108px;
}
And markup:
<div class="parent">
<div class="msg">text goes here</div>
</div>
Flexbox can do that:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::before,
::after {
box-sizing: inherit;
}
.parent {
font-weight: 500;
margin: auto;
padding: 1em;
width: 80%;
font-size: 12px;
overflow: hidden;
position: relative;
border: 1px solid red;
}
.msg {
display: flex;
}
.msg p {
padding-left: 1em;
}
.msg:before {
content: "";
height: 16px;
flex: 0 0 16px;
background: red;
border-radius: 100%;
}
<div class="parent">
<div class="msg">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae numquam unde, eum sequi expedita fugiat ipsa exercitationem nesciunt libero repellendus aperiam excepturi, dolorem repudiandae eveniet alias perspiciatis, vero veniam tempora natus magnam
itaque quos. Nemo sit nisi, veniam mollitia fugit eaque reiciendis ex doloribus rem et suscipit debitis commodi sapiente.</p>
</div>
</div>
When I scale my site down or view on mobile/tablet, there is all of this margin/whitespace on right side and it cuts off text content in #main section. Why is this happening and how can I make it all scale correctly? I have tried overflow hidden on various parts which didn't solve anything and I have tried zeroing out margins and messing with padding. I'm unsure how to make it scale correctly and get rid of that extra margin/space on the right. There isnt much yet, only header, nav and #main section.
Thank you for your help in advance
html:
<body>
<header id="main-header">
<div class="container">
<h1 class="display-4">.Richardson</h1>
</div>
</header>
<nav id="navbar">
<div class="container">
<ul class="my-nav">
<li>Home</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</nav>
<section id="main">
<div class="container">
<div class="col-md-8" id="welcome-text">
<h1 class="display-4">Welcome</h1>
<hr class="rule">
<p><cite>"Discipline is the bridge between goals and accomplishments" ~ Jim Rohn</cite></p>
<p>Hey, I'm <span style="font-size: 24px; color: #FFFC31"><strong>Name!</strong></span> Congratulations on joining me in my path to becoming a highly valued, self-taught <span style="font-size: 24px; color:#FFFC31"><strong>Front-End Web Developer</strong></span>. My journey began with <span style="font-size: 24px; color: #FFFC31"><strong>Free Code Camp</strong></span> and the <span style="font-size: 24px; color: #FFFC31"><strong>Code Academy,</strong></span> as well as many youtube tutorials. I've learned <span style="font-size: 24px; color: #FFFC31"><strong>HTML, CSS and Javascript</strong></span> basics thus far. I aspire to put my coding skills to use by adding value and making a difference. Continually challenging myself and improving my craft. <span style="font-size: 24px; color: #FFFC31"><strong>I'm passionate</strong></span> about Nature, animals, traveling, serving the community, maintaining a healthy mind, body and spirit, and enjoying great food and craft beer with great people.</p>
</div>
</div>
</section>
<section>
<h1>Portfolio</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint recusandae, labore, cumque voluptas consequatur excepturi aut qui delectus error harum atque fuga voluptate voluptatibus rem, perferendis laboriosam, pariatur quae hic?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint recusandae, labore, cumque voluptas consequatur excepturi aut qui delectus error harum atque fuga voluptate voluptatibus rem, perferendis laboriosam, pariatur quae hic?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint recusandae, labore, cumque voluptas consequatur excepturi aut qui delectus error harum atque fuga voluptate voluptatibus rem, perferendis laboriosam, pariatur quae hic?</p>
</section>
css:
* {
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin:auto;
overflow: hidden;
}
img {
min-width: 100%;
margin: 0;
}
h1,h2,h3,h4,h5,h6 {
font-family: "Helvetica", "geneva", sans-serif;
}
p {
font-family: sans-serif;
font-size: 1.3rem;
line-height: 2.5rem;
}
a {
color: #4e0250;
}
a:hover {
text-decoration: none;
background-color: gray;
padding: 10px;
color: #D3D3D3;
border-radius: 20px;
}
#main-header {
background: #4E0250;
color: silver;
text-align: center;
position: sticky;
top: 0;
right: 0;
z-index: 1;
}
#navbar {
text-align: center;
background-color: #D3D3D3;
color: #4e0250;
font-size: 1.4rem;
z-index: 1;
}
#navbar ul {
padding-left: 65px;
}
#navbar ul li {
text-align: center;
list-style: none;
padding-right: 40px;
display: inline;
}
#navbar {
position: fixed;
width: 100%;
}
#navbar .my-nav {
margin: 15px;
}
#main {
padding-top: 5rem;
background: url('../img/headon3.jpg') center center no-repeat;
background-size: cover;
min-height: 757px;
overflow: hidden;
}
#main .container {
margin-top: 55px;
margin-left: 150px;
}
#main #welcome-text {
background-color: rgba(92, 92, 92, 0.9);
color: #D3D3D3;
padding: 0 20px;
border-radius: 10%;
padding-bottom: 5px;
min-width: 40%;
}
#main h1 {
padding-top: 20px;
}
.rule {
border-top: 1px solid floralwhite;
padding-bottom: 10px;
}
Your main issue is you're not letting bootstrap take care of margins padding with rows and columns properly. In order to fix this immediate issue you have two problems:
First,
http://getbootstrap.com/docs/3.3/css/#grid-media-queries
#main .container {
margin-top: 55px;
margin-left: 150px;
}
Is getting in the way. Let the .container class take care of itself. It uses media queries to accurately define the margin-left at different widths. What you've done here is hard code it to always be 150px, and on an iphone that is most of the screen.
Second,
http://getbootstrap.com/docs/3.3/css/#grid
Container > rows > columns.
You are missing a row class here:
<div class="container">
<div class="row">
<div class="col-md-8" id="welcome-text">
I hope you can give me a hand.
What I'm Trying to do in a mobile version it's to leve the menu bar always visible using position fixed to the visitor and it work's fine, the issue is that the second div called aside it shows behind the menu bar and I really do not know how to show it after the menu bar.
I'm working in a 500px mobile version.
How can I fix this ?
I hope you can help me
....
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<style type="text/css">
body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
height: 1000px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.container {
width: 95%;
margin-right: auto;
margin-left: auto;
background-color: #f1f1f1;
height: 1000px;
max-width: 950px;
}
header{
height: 150px;
border-color: red;
border-style: dotted;
margin-bottom: 5px;
}
aside{
height: 200px;
border-color: blue;
border-style: dotted;
margin-bottom: 5px;
}
section{
height: 200px;
border-color: yellow;
border-style: dotted;
margin-bottom: 5px;
}
article{
height: 200px;
border-color: deeppink;
border-style: dotted;
margin-bottom: 5px;
}
footer{
height: 200px;
background-color: green;
border-style: dotted;
}
nav{
width: 100%;
float: left;
}
nav ul{
list-style: none;
padding: 0;
overflow: hidden;
margin-top: 56px;
}
nav ul li{
padding: 10px;
display: inline-block;
overflow: hidden;
}
nav ul li a{
color: red;
}
.menu {
display: none;
}
#media screen and (max-width:700px){
.container{
background-color: deeppink;
}
}
#media screen and (max-width:500px){
body{
margin: 0;
}
.container{
background-color: #CCCCCC;
width: 100%;
}
header{
margin-bottom: 5px;
border-style:none;
height: auto;
}
.menu{
display: block;
background-color: black;
width: 100%;
height: auto;
margin-top: 0px;
position: fixed;
}
.menu .icon-menu{
color: #fff;
padding: 10px;
font-size: 28px;
}
.menu .menu_txt{
color: #fff;
float: right;
padding: 10px;
font-size: 18px;
margin-top: 5px;
margin-right: 5px;
}
nav{
background-color: #595959;
height: 100%;
position: fixed;
width: 90%;
display: none;
}
nav ul{
border-color: deeppink;
margin-top: 0px;
}
nav ul li{
background-color: #3E3E3E;
display: block;
margin-top: 0px;
width: 100%
}
aside{
margin-top: 0px;
}
}
</style>
<link href="fonts.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<header>
<div class="menu">
<div class="menu_txt">MENU</div>
<div class="icon-menu"></div>
</div>
<nav>
<ul>
<li>page</li>
<li>page</li>
<li>page</li>
<li>page</li>
<li>page</li>
</ul>
</nav>
</header>
<aside>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id excepturi nesciunt in modi ratione alias vero ipsam optio quod quaerat fugiat est nihil temporibus, earum, necessitatibus ducimus hic cumque inventore?</aside>
<section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, incidunt necessitatibus asperiores quibusdam voluptas eos doloremque vitae consectetur earum facilis repudiandae ullam quisquam perferendis tempora. Illo, officia atque natus itaque.</section>
<article>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis necessitatibus explicabo obcaecati cum minima mollitia quam assumenda perferendis dicta. Cumque placeat, aliquam itaque ad quia accusamus autem tempora ex fugit.</article>
<footer>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus at natus pariatur eligendi possimus ipsa corporis rem rerum omnis, perferendis, earum vero dolorum optio, nihil odit dolores autem asperiores recusandae!</footer>
</div>
</body>
</html>
In your media query, add margin top or padding top to your body to push the content below the menu then add top: 0; to your menu to make sure it stays at the top.
http://codepen.io/anon/pen/JWwRmN
#media screen and (max-width:500px){
body{
margin: 0;
margin-top: 50px;
}
.menu{
display: block;
background-color: black;
width: 100%;
height: auto;
margin-top: 0px;
position: fixed;
top: 0;
}