I've successfully made an hamburger menu that only appears after a certain width, but the problem is that I would like the nav links to be centered, to occupy the whole page (here it stops once the links in the menu are done) and to have a different background color. Here's an example how the layout I'd like: 
I've used CSSS and HTML only and would like to stick to these if possible.
Here's the code:
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="stylenav.css">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="css/font-awesome.min.css" rel="stylesheet"/>
<link rel='icon' href='FAVICON.jpg' type='image/x-icon'/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>AURORA CATERA 2020</title>
</head>
<body>
<header class="header">
<a href="index.html"><img src="img/AURORA-YLOW-FIN copy.png" class="logo"></a>
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn"><span class="nav-icon"></span></label>
<ul class="menu">
<li><a href="#dont">ALL</a></li>
<li><a href="#forget">STUFF</a></li>
<li><a href="#subscribe">ABOUT</a></li>
<li><a href="#comment">CONTACT</a></li>
<li><a href="https://www.instagram.com/auroracatera" target="_blank"><i class="fa fa-instagram"></li></i></a>
</ul>
</header>
</body>
</html>
@import url('https://fonts.googleapis.com/css?family=Poppins:900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond:300&display=swap');
@import url('https://fonts.googleapis.com/css?family=Raleway:500&display=swap');
@import url('https://fonts.googleapis.com/css?family=Work+Sans:100,200,300,400,600&display=swap');
@import url('https://fonts.googleapis.com/css?family=Rajdhani:400&display=swap');
body{
margin:0;
background-color:#000;
}
a{
color:#F8E315;
font-family: Rajdhani, sans-serif;
}
.header{
background-color:rgb(153, 57, 57);
position:fixed;
width:100%;
z-index:3;
}
.header ul{
margin:0;
padding: 20px 30px 0 0;
list-style:none;
overflow:hidden;
background-color:rgb(0, 0, 0);
}
.header ul a{
display:block;
padding:20px;
text-decoration:none;
}
.header ul a:hover{
color:#c7c7c7;
}
.header .logo{
float:left;
display:block;
height: 62px;
padding: 30px 0 0 40px;
}
.header .menu{
clear:both;
max-height:0;
transition:max-height .2s ease-out;
}
.header .menu-icon{
padding: 58px 20px;
position:relative;
float:right;
cursor: pointer;
}
.header .menu-icon .nav-icon{
background:#F8E315;
display:block;
height:2px;
width:30px;
border-radius: 2px;
position:relative;
transition:background;
}
.header .menu-icon .nav-icon:before{
background: #F8E315;
content:"";
display:block;
height:100%;
width:100%;
border-radius: 2px;
position:absolute;
top:10px;
}
.header .menu-icon .nav-icon:after{
background:#F8E315;
content:"";
display:block;
height:100%;
width:100%;
border-radius: 2px;
position:absolute;
top:-10px;
}
.header .menu-btn{
display:none;
}
.header .menu-btn:checked ~ .menu{
max-height:240px;
}
.header .menu-btn:checked ~ .menu-icon .nav-icon{
background:transparent;
}
.header .menu-btn:checked ~ .menu-icon .nav-icon:before{
transform: rotate(-45deg);
top:0;
}
.header .menu-btn:checked ~ .menu-icon .nav-icon:after{
transform: rotate(45deg);
top:0;
}
@media (min-width:48em){
.header li{
float:left;
}
.header .menu{
clear:none;
float:right;
max-height:none;
}
.header .menu-icon{
display:none;
}
}
Aucun commentaire:
Enregistrer un commentaire