I found this code example of a responsive sidebar menu in this link.
This example is excellent because is totally responsive but
the menu bar elements (Home, News, Contact, About) are always positioned in left part of the menu, i am looking for to position these elements at the top-center in big screen of the page, just like this example
but i was not able to succeed, i am a beginner in css, so i ask for help here, any help is appreciated, thank you very much, here is the code :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
font-family: "Lato", sans-serif;
}
.sidebar {
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
.sidebar a {
display: block;
color: black;
padding: 16px;
text-decoration: none;
}
.sidebar a.active {
background-color: #04AA6D;
color: white;
}
.sidebar a:hover:not(.active) {
background-color: #555;
color: white;
}
div.content {
margin-left: 200px;
padding: 1px 16px;
height: 1000px;
}
#media screen and (max-width: 700px) {
.sidebar {
width: 100%;
height: auto;
position: relative;
}
.sidebar a {float: left;}
div.content {margin-left: 0;}
}
#media screen and (max-width: 400px) {
.sidebar a {
text-align: center;
float: none;
}
}
</style>
</head>
<body>
<div class="sidebar">
<a class="active" href="#home">Home</a>
News
Contact
About
</div>
<div class="content">
<h2>Responsive Sidebar Example</h2>
<p>This example use media queries to transform the sidebar to a top navigation bar when the screen size is 700px or less.</p>
<p>We have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.</p>
<h3>Resize the browser window to see the effect.</h3>
</div>
</body>
</html>
First, you have to change the html "sidebar" div, Add another div "a-holder"
<div class="sidebar">
<div class="a-holder">
<a class="active" href="#home">Home</a>
News
Contact
About
</div>
</div>
then in the css, add a-holder with parameters like these:
#media screen and (max-width: 700px) {
.sidebar {
width: 100%;
height: auto;
position: relative;
}
.sidebar a {float: left;}
div.content {margin-left: 0;}
.a-holder {
margin: auto;
align-self: center;
width: 80%;
}
}
Then the full code will be
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
font-family: "Lato", sans-serif;
}
.sidebar {
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
}
.sidebar a {
display: block;
color: black;
padding: 16px;
text-decoration: none;
}
.sidebar a.active {
background-color: #04AA6D;
color: white;
}
.sidebar a:hover:not(.active) {
background-color: #555;
color: white;
}
div.content {
margin-left: 200px;
padding: 1px 16px;
height: 1000px;
}
#media screen and (max-width: 700px) {
.sidebar {
width: 100%;
height: auto;
position: relative;
}
.sidebar a {float: left;}
div.content {margin-left: 0;}
.a-holder {
margin: auto;
align-self: center;
width: 80%;
}
}
#media screen and (max-width: 400px) {
.sidebar a {
text-align: center;
float: none;
}
}
</style>
</head>
<body>
<div class="sidebar">
<div class="a-holder">
<a class="active" href="#home">Home</a>
News
Contact
About
</div>
</div>
<div class="content">
<h2>Responsive Sidebar Example</h2>
<p>This example use media queries to transform the sidebar to a top navigation bar when the screen size is 700px or less.</p>
<p>We have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.</p>
<h3>Resize the browser window to see the effect.</h3>
</div>
</body>
</html>
As of the image provided in the question and the link provided to the template. I believe you have to add an image at the top of side navigations. As of solution to the link provided in the question.
#media screen and (min-width: 767) {
.sidebar{
text-align:center;
margin: 0;
padding: 0;
background-color: #f1f1f1;
height: 100%;
overflow: auto;
}
.sidebar a {
display: inline-block;
color: black;
padding: 16px;
text-decoration: none;
}
}
Simply swap the properties of sidebar from #media screen and (max-width: 700px) to regular one
Here is a sample
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
font-family: "Lato", sans-serif;
}
.sidebar {
margin: 0;
padding: 0;
background-color: #f1f1f1;
overflow: auto;
width: 100%;
height: auto;
position: relative;
}
*{box-sizing: border-box;}
.sidebar::after {content: ''; clear: both; display: table;}
.sidebar .logo {float: left; width: 120px; padding-left: 10px; padding-top: 15px;}
.sidebar .social_links{float: right; width: 100px;}
.sidebar .social_links ul li{list-style:none; display: inline-block;}
.sidebar .social_links ul{margin: 0;}
.sidebar .social_links ul li a {padding: 15px 5px}
.sidebar .menu {float: left; width: calc(100% - 220px); text-align:center;}
.sidebar a {
display: inline-block;
color: black;
padding: 16px;
text-decoration: none;
}
.sidebar a.active {
background-color: #04AA6D;
color: white;
}
.sidebar a:hover:not(.active) {
background-color: #555;
color: white;
}
div.content {
padding: 1px 16px;
}
#media screen and (max-width: 700px) {
.sidebar {
width: 200px;
position: fixed;
height: 100%;
}
.sidebar a {float: none;}
.sidebar .logo {float: none; display: block; width: 100%; text-align: center; margin-bottom: 20px;}
.sidebar .menu, .sidebar .social_links {float: none; width: 100%;}
.sidebar .menu a{display: block; }
.sidebar .social_links li {float: none; text-align:center;}
.sidebar .social_links ul{padding-left: 0; width: 100%; text-align:center;}
div.content {margin-left: 0; height: 1000px; margin-left: 200px;}
}
#media screen and (max-width: 400px) {
.sidebar a {
text-align: center;
float: none;
}
}
</style>
</head>
<body>
<div class="sidebar">
<div class="logo">LOGO HERE</div>
<div class="menu">
<a class="active" href="#home">Home</a>
News
Contact
About
</div>
<div class="social_links">
<ul>
<li>fb</li>
<li>in</li>
</ul>
</div>
</div>
<div class="content">
<h2>Responsive Sidebar Example</h2>
<p>This example use media queries to transform the sidebar to a top navigation bar when the screen size is 700px or less.</p>
<p>We have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.</p>
<h3>Resize the browser window to see the effect.</h3>
</div>
</body>
</html>
This code is also responsive when screen size shrinks below 700px
PS: Run the code in full page to see how it looks like in desktop view
body {
margin: 0;
font-family: "Lato", sans-serif;
}
.sidebar {
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
position: fixed;
height: 100%;
overflow: auto;
display: flex;
justify-content: center;
}
.sidebar a {
display: block;
color: black;
padding: 16px;
text-decoration: none;
}
.sidebar a.active {
background-color: #04AA6D;
color: white;
}
.sidebar a:hover:not(.active) {
background-color: #555;
color: white;
}
div.content {
margin-left: 200px;
padding: 1px 16px;
height: 1000px;
}
#media screen and (max-width: 700px) {
.sidebar {
width: 100%;
height: auto;
position: relative;
}
.sidebar a {float: left;}
div.content {margin-left: 0;}
}
#media screen and (max-width: 400px) {
.sidebar a {
text-align: center;
float: none;
}
}
<div class="sidebar">
<a class="active" href="#home">Home</a>
News
Contact
About
</div>
<div class="content">
<h2>Responsive Sidebar Example</h2>
<p>This example use media queries to transform the sidebar to a top navigation bar when the screen size is 700px or less.</p>
<p>We have also added a media query for screens that are 400px or less, which will vertically stack and center the navigation links.</p>
<h3>Resize the browser window to see the effect.</h3>
</div>
Related
So, right now my header doesn´t look good on mobile. - The words overlap. They should remain in the same order... I tried to use line-height, which did not really change anything. Maybe you have some suggestions on how I can fix this problem. I am thankful for every suggestion!
[enter
.header {
width: 100%;
height: 7vh;
padding: 0 5%;
color: white;
font-size: larger;
background-color: black;
z-index:100;
position: sticky;
top: 0;
display: flex;
justify-content: space-between;
overflow: hidden;
line-height: 10px;
}
nav {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 0;
}
nav ul li {
display: inline-block;
list-style: none;
margin: 10px 30px;
}
nav ul li a {
text-decoration: none;
color: white;
}
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.Menü {
color: white;
text-decoration: none;
margin-left: 40px;
}
<div class="header" >
<nav>
<div>
<Button class="ImageButton"> <input class="ImageButton" type="image" src="/Images/Camellion Logo Website.png"></Button>
</div>
<ul>
<a class="Menü" href="/Galerie/Galerie.html">Galerie</a>
<a class="Menü" href="#Leistungen">Leistungen</a>
<a class="Menü" href="#Kontakt">Kontakt & Standort <i class="fa-solid fa-location-dot"></i></a>
</ul>
</nav>
</div>
There is a thing in CSS called media queries. With media queries you can write for example CSS that only takes effect if screen is certain size.
For example
#media only screen and (min-width: 360px) and (max-width: 800px) {
.header {
height: 60px;
}
}
Will set header height to 60px if the device that the page is opened on has screen width more then 360px and less then 800px.
Here is your code with couple adjustments
* { padding: 0; margin: 0; box-sizing: border-box; }
.header {
width: 100%;
padding: 0 20px;
color: white;
background-color: black;
position: sticky;
z-index:100;
top: 0;
}
.navigation {
margin: auto;
max-width: 1200px;
height: 80px;
display: flex;
align-items: center;
justify-content: space-between;
}
.menu-icon { /* CSS to just to simulate Icon */
height: 40px;
width: 40px;
background-color: white;
border-radius: 10px;
}
.menu {
display: flex;
align-items: center;
gap: 40px;
}
.menu-item {
color: white;
text-decoration: none;
white-space: nowrap; /* Will not let words to break to next line */
font-size: 20px;
font-weight: 700;
}
#media(max-width: 600px) {
.header { padding: 0 10px; }
.navigation { height: 60px; }
.menu { gap: 20px;}
.menu-item { font-size: 14px; }
}
#media(max-width: 400px) {
.menu { gap: 10px;}
.menu-item { font-size: 12px; }
}
<header class="header" >
<nav class="navigation">
<div class="menu-icon" title="Menu icon / hamburger icon"></div>
<div class="menu">
<a class="menu-item" href="/Galerie/Galerie.html">Galerie</a>
<a class="menu-item" href="#Leistungen">Leistungen</a>
<a class="menu-item" href="#Kontakt">Kontakt & Standort <i class="fa-solid fa-location-dot"></i></a>
</div>
</nav>
</header>
You can adjust your css even further. It's very popular to have icons with menu elements and on mobile view they become a bottom navigation bar with big icons and tiny text.
#media (max-width:767px) {
* {
box-sizing: border-box;
}
nav {
flex-direction: column;
}
nav .Menu {
margin-inline: 9px
}
}
good luck
I've literally tried everything at this point, but something in my code is making my website act funny. I've set it up to accept a picture with a very tall resolution to fill the center column of my CSS grid with the other two acting as margins. When I do this with my current code, the picture overflows the grid and when I scroll the margins just stop half way down the page. The container grows to size with the height of the photo but my margins don't.
Here's a picture of my website scrolled down half way, the cream colored part is the container and the black part is where the margins stop.
Picture of website:
Thanks for any advice if someone has some!
body {
margin: 0;
width: 100vw;
height: 100vh;
font-family: Arial, Helvetica, sans-serif;
}
.content {
width: 70vw;
height: 100vh;
background-color: #252525;
}
.margin {
width: 15vw;
height: 100vh;
background-color: #000000;
}
table{
table-layout: fixed;
border-collapse: collapse;
width: 100%;
}
tr {
vertical-align: top;
}
p {
color: #45d163;
font-size: 2.5vh;
}
.fixed {
position: fixed;
}
.grid-container {
display: grid;
grid-template-columns: 15% 70% 15%;
background-color: #fceee3;
width: 100vw;
height: 100vh;
min-width: 0;
min-height: 100vh;
}
.grid-item {
background-color: #000000;
font-size: 5px;
text-align: left;
color: #f1f1f1;
min-height: 100vh;
margin-top: 0%;
}
.grid-center {
background-color: #252525;
color: blue;
font-size: 30vh;
text-align: left;
min-height: 100vh;
margin-top: 0%;
}
<!DOCTYPE html>
<html lang="en" >
<!-- partial:index.partial.html -->
<head>
<meta charset="UTF-8">
<title>Keyboard Mechanic</title>
<link rel="stylesheet" href="style.css"> </link>
<style>
.header {
overflow: hidden;
background-color: #171615;
padding: 1% 1%;
width: 100%;
position: fixed;
}
.header a {
float: left;
color: #f1f1f1;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
width: 8vw;
margin-right: 10px;
}
.header a.active {
background-color: dodgerblue;
color: white;
width: 8vw;
margin-right: 10px;
}
.header a.logo {
all: unset;
}
.login {
background-color: dodgerblue;
color: white;
width: 8vw;
margin-right: 10px;
}
.header a:hover {
background-color: #ddd;
color: black;
}
.header-right {
float: right;
}
#media screen and (max-width: 100%) {
.header a {
float: none;
display: block;
text-align: left;
}
}
</style>
<style>
.wrapper {
display: grid;
grid-template-columns: auto fit-content(70%) auto;
background-color: #fceee3;
width: 100vw;
height: 100%;
overflow: scroll;
}
.grid-item {
background-color: #000000;
font-size: 5px;
text-align: left;
color: #f1f1f1;
height: auto;
margin-top: 0%;
}
.grid-center {
background-color: #252525;
height: auto;
margin-top: 0%;
}
</style>
</head>
<body>
<div class="header">
<img src="images/cornerlogo.png" height="50px">
<div class="header-right">
<a class="active" href="newLook.html">Home</a>
<a class="active" href="games.html">Games</a>
<a class="active" href="webprojects.html">Web Projects</a>
<a class="login" href="login.html">Login</a>
Contact
About
</div>
</div>
<div class="wrapper">
<div class="grid-item"></div>
<div class="grid-center">
<img src="images/homepageFour.png" width="100%"> </img>
</div>
<div class="grid-item"></div>
</div>
</body>
</html>
<!-- partial -->
The second selector is valid because the specificity value of the selector named ".header a" is lower than the specificity value of the selector named ".header a.active".
If you want to almost maximize the specificity value, you have to: use !important.
.header a {
width: max-content !important;
}
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<header>
Header
</header>
<nav>
Nav
</nav>
<article>
Article
</article>
<div>
<aside>
Aside
</aside>
<section>
Section
</section>
</div>
<footer>
Footer
</footer>
<body>
</body>
</html>
CSS Code:
header {
background-color: cornflowerblue;
height: 60px;
padding: 0px;
margin: 0px;
text-align: center;
width: 100%;
}
nav {
background-color: khaki;
height: 50px;
padding: 0px;
margin: 0px;
text-align: center;
width: 100%;
}
article {
background-color: darkseagreen;
height: 180px;
padding: 0px;
margin: 0px;
width: 70%;
display: inline-block;
text-align: center;
}
div {
padding: 0px;
margin: 0px;
float: right;
display: inline-block;
width: 30%;
}
aside {
background-color: goldenrod;
height: 90px;
padding: 0px;
margin: 0px;
text-align: center;
}
section {
background-color: lightsteelblue;
height: 90px;
padding: 0px;
margin: 0px;
text-align: center;
}
footer {
background-color: lemonchiffon;
height: 40px;
padding: 0px;
margin: 0px;
text-align: center;
width: 100%;
}
body {
background-color: black;
font-size: 2em;
height: 60px;
padding: 0px;
margin: 0px;
text-align: center;
width: 100%;
}
Very basic coding, just trying to understand how to make a responsive page.
Im trying to make it so when the device width is less than 800 px, all elements should stack above each other
And when the device is less than 500px all elements should stack above each other but the Aside and Section elements should disappear.
I figured I need to use viewport, and found a tutorial with code like this:
#media only screen and (min-width: 600px) {
/* For tablets: */
.col-s-1 {width: 8.33%;}
.col-s-2 {width: 16.66%;}
.col-s-3 {width: 25%;}
.col-s-4 {width: 33.33%;}
.col-s-5 {width: 41.66%;}
...continued
}
Not sure if that's the type of code I need to add to my CSS page or if I'm just over complicating it which I do often.
Okey I think,You should try it
#media only screen (min-width:500px) and (max-width: 800px) {
aside {
display:none
}
section {
display:none
}
}
and this may be help you https://www.w3schools.com/bootstrap4/bootstrap_grid_system.asp
I am trying to create a navbar with a logo in the middle with the navbar item being the same distance from each other. Like this:
However, I am having a problem making my navbar responsive. As you can see from the screenshot the distance between the logo and links were not equal.
header {
width: 100%;
margin: 0 auto;
}
#logo {
text-align: center;
}
.nav {
text-align: center;
}
.nav li {
display: inline;
margin-left: 7em;
margin-right: 7em;
}
/* use media query to change the layout */
#media (min-width: 768px) {
body {
background-color: #f2f2f2;
}
.nav {
margin-top: -42px;
}
.nav li:nth-child(1), .nav li:nth-child(2) {
float: none;
}
.nav li:nth-child(3), .nav li:nth-child(4) {
float: none;
}
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
#media (min-width: 768px) {
.container {
width: 750px;
}
}
#media (min-width: 992px) {
.container {
width: 970px;
}
}
#media (min-width: 1200px) {
.container {
width: 1170px;
}
}
<header>
<div class="container">
<h2 id="logo">Logo</h2>
<ul class="nav">
<li>Work</li>
<li>About</li>
<li>Contact</li>
<li>Social</li>
</ul>
</div>
</header>
You can use flexbox, checkout the basics of flexbox here
I've updated your code to work with flexbox.
I've moved the logo into the ul element.
<header>
<div class="container">
<ul class="nav">
<li>Work</li>
<li>About</li>
<li><h2 id="logo">logo</h2></li>
<li>Contact</li>
<li>Social</li>
</ul>
</div>
</header>
I've updated your css to use flexbox, notice .nav has a display:flex on there now.
header {
width: 100%;
}
#logo {
text-align: center;
margin-top:0;
}
.nav {
text-align: center;
display:flex;
}
.nav li {
flex: 1;
display: inline;
}
/* use media query to change the layout */
#media (min-width: 768px) {
body {
background-color: #f2f2f2;
}
.nav {
}
.nav li:nth-child(1), .nav li:nth-child(2) {
float: none;
}
.nav li:nth-child(3), .nav li:nth-child(4) {
float: none;
}
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
#media (min-width: 768px) {
.container {
width: 750px;
}
}
#media (min-width: 992px) {
.container {
width: 970px;
}
}
#media (min-width: 1200px) {
.container {
width: 1170px;
}
}
That should be enough to get you going. Heres the codepen
Updated the following CSS and kept header in the ul
header {
width: 100%;
margin: 0 auto;
}
.nav {
text-align: center;
display: flex;
justify-content: space-between;
}
.nav li {
display: inline;
}
h2 {
margin-top: 0;
}
header {
width: 100%;
margin: 0 auto;
}
.nav {
text-align: center;
display: flex;
justify-content: space-between;
}
.nav li {
display: inline;
}
h2 {
margin-top: 0;
}
/* use media query to change the layout */
#media (min-width: 768px) {
body {
background-color: #f2f2f2;
}
.nav li:nth-child(1), .nav li:nth-child(2) {
float: none;
}
.nav li:nth-child(3), .nav li:nth-child(4) {
float: none;
}
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
#media (min-width: 768px) {
.container {
width: 750px;
}
}
#media (min-width: 992px) {
.container {
width: 970px;
}
}
#media (min-width: 1200px) {
.container {
width: 1170px;
}
}
<header>
<div class="container">
<ul class="nav">
<li>Work</li>
<li>About</li>
<li><h2 id="logo">Logo</h2></li>
<li>Contact</li>
<li>Social</li>
</ul>
</div>
</header>
Instead of flex-box you can also use grid;
.header {
width: 100%;
}
.container {
width: 75%;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
.container div {
grid-column: auto / span 1;
text-align: center;
}
#media (min-width: 768px) {
.container {
width: 750px;
}
}
#media (min-width: 992px) {
.container {
width: 970px;
}
}
#media (min-width: 1200px) {
.container {
width: 1170px;
}
}
<header class="header">
<div class="container">
<div>Work</div>
<div>About</div>
<div><h2 id="logo">Logo</h2></div>
<div>Contact</div>
<div>Social</div>
</div>
</header>
Now it doesn't matter how you set the width of the header all the items keep the same width.
Here you have a simple example using position: absolute to center the logo:
Here is the HTML
<header>
<h2 id="logo">Logo</h2>
<ul class="nav">
<li>Work</li>
<li>About</li>
<li>Contact</li>
<li>Social</li>
</ul>
</header>
And here the CSS
* { /*Replace this to enable margin and padding*/
margin: 0;
padding: 0;
}
header {
width: 100%;
height: 70px;
position: relative;
}
#logo {
position: absolute;
text-align: center;
width: 100%;
height: 70px;
line-height: 70px;
top: 0;
left: 0;
}
.nav {
width: 100%;
height: 70px;
}
.nav li {
width: 25%;
float: left;
box-sizing: border-box;
text-align: center;
list-style: none;
line-height: 70px;
}
If the logo is an image (as I suppose) you can use this little trick:
#logo {
position: absolute;
top: 50%;
left: 50%;
margin-top: -20px; /*If logo height is 40px*/
margin-left: -30px; /*If logo width is 60px*/
}
As you can see I use top and left to place the logo in the center and then rest the half of the width and height of the image to the margin-top and margin-left.
Here is an example if your logo is an image: https://codepen.io/Nacorga/pen/yEXaQO
I have a simple flexbox layout for a new website.
It has a header, a nav, a cover that is out of container in full screen and the a content and an aside.
#container {
margin: 0 auto;
max-width: 1080px;
}
#columns {
display: -ms-flex;
display: -webkit-flex;
display: flex;
flex-flow: row wrap;
}
header {
padding: 3%;
background-color: #6495ED;
}
#cover {
max-width: 1350px;
margin: 0 -135px;
padding: 3%;
background-color: #6495ED;
}
header #title {
font-size: 50px;
color: #fff;
}
nav {
width: 97%;
background-color: #6495ED;
padding: 0 1.5% 0 1.5%;
}
nav ul li {
display: inline-block;
padding: 15px 1.5% 15px 1.5%;
}
nav ul li a {
text-decoration: none;
color: #ffffff;
font-size: 1.2em;
}
nav ul li a:hover {
color: #000000;
text-decoration: none;
}
/* Content After
--------------------------------------------- */
#columns>#content {
padding: 3%;
width: 64%;
}
#columns>aside {
padding: 3%;
min-width: 24%;
background-color: #eee;
}
footer {
width: 94%;
padding: 3%;
background-color: #6495ED;
border-top: 5px solid black;
color: #fff;
text-align: center;
}
#media all and (max-width: 1350px) {
#cover {
max-width: 1080px;
margin: 0;
}
}
#media all and (max-width: 768px) {
header {
text-align: center;
}
nav {
text-align: center;
}
#columns {
-webkit-flex-flow: column wrap;
flex-flow: column wrap;
}
#columns>#content {
width: 94%;
padding: 3%;
}
#columns>#sidebar {
width: 94%;
padding: 3%;
border-top: 3px solid #E64A19;
}
}
#media all and (max-width: 330px) {
nav ul li {
display: block;
width: 94%;
}
}
<div id="container">
<!-- header -->
<header id="header">
<h1 id="title">Two Column</h1>
</header>
<!-- Navigation -->
<nav id="menu" class="clearfix">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</nav>
<section id="cover">
</section>
<section id="columns">
<!-- Main Content area -->
<section id="content">
<!-- your content here -->
</section>
<!-- Sidebar -->
<aside id="sidebar">
<!-- your content here -->
</aside>
</section>
<footer id="footer" class="clearfix">
Copyright © Booo
</footer>
</div>
https://codepen.io/anon/pen/YQzWNe
The width of the aside column fixed for desktop and tablet, 360px, then when I go under 768 px of viewport the column disappear.
I try to replace the width in percentage with min-width:360px but I broke the layout.
How can I fix it?
You mention the aside "disappearing" but I see it re-flowing below #content on smaller viewports.
If you need aside to be 360px and have #content fill the remaining space set flex-grow: 1; for #content and tell #sidebar to be 360px.
#container {
margin: 0 auto;
max-width: 1080px;
}
#columns {
display: -ms-flex;
display: -webkit-flex;
display: flex;
}
#header,
#cover,
#footer {
padding: 3%;
background-color: #6495ED;
}
#cover {
max-width: 1350px;
margin: 0 -135px;
}
#title {
font-size: 50px;
color: #fff;
}
#menu {
background-color: #6495ED;
padding: 0 1.5%;
}
#menu ul {
margin: 1rem;
padding: 0;
}
#menu li {
display: inline-block;
padding: 15px 1.5%;
}
#menu a {
text-decoration: none;
color: #fff;
font-size: 1.2rem;
}
#menu a:hover {
color: #000;
}
/* Content After
--------------------------------------------- */
#content,
#sidebar {
padding: 3%;
}
#content {
flex-grow: 1;
}
#sidebar {
min-width: 360px;
background-color: #eee;
}
#footer {
border-top: 5px solid black;
color: #fff;
text-align: center;
}
#media all and (max-width: 1350px) {
#cover {
max-width: 1080px;
margin: 0;
}
}
#media all and (max-width: 768px) {
#header,
#menu {
text-align: center;
}
#columns {
-webkit-flex-direction: column;
flex-direction: column;
}
#sidebar {
border-top: 3px solid #E64A19;
}
}
#media all and (max-width: 330px) {
#menu li {
display: block;
padding: 0 3%;
}
}
<div id="container">
<!-- header -->
<header id="header">
<h1 id="title">Two Column</h1>
</header>
<!-- Navigation -->
<nav id="menu" class="clearfix">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</nav>
<section id="cover">
</section>
<section id="columns">
<!-- Main Content area -->
<section id="content">
<!-- your content here -->
</section>
<!-- Sidebar -->
<aside id="sidebar">
<!-- your content here -->
</aside>
</section>
<footer id="footer" class="clearfix">
Copyright © Booo
</footer>
</div>
Note: Improved the CSS a little.