I have a website coded in html and css which works very well except that the navigation bar does not adapt to the width of small phones! it always overflows regardless of my effort!
here is the code of my navigation bar
that is my html code:
<div class="nav-h">
<input type="checkbox" id="nav-check">
<div class="nav-header">
<div class="nav-title"><img src="images/ca.svg"><span><a class="c"
<a href="#">CAMER</a><a class="s" href="#">-AUTOPRIX</a></span>
</div>
</div>
<div class="nav-btn">
<label for="nav-check">
<span></span>
<span></span>
<span></span>
</label>
</div>
<div class="nav-links">
<ul>
<li><a class="feat" href="index.php" target="_self">ACCEUIL</a></li>
<li><a class="feat" href="../html/apropos.php" target="_self">A PROPOS</a></li>
<li><a class="feat" href="../html/contact.php" target="_self">CONTACT</a></li>
<li> <input class="s-search" type="text" name="search0" placeholder="Recherche"><button type="submit" class="searchButton"><i class="fa fa-search"></i></button></li>
</ul>
<div class="containers">
<input type="text" placeholder="Recherche...">
<div class="search"></div>
</div>
</div>
</div>
that is my css code:
.nav-h {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 0;
z-index: 10000;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
height: auto;
background-color:transparent;
padding: 20px 30px;
-webkit-transition: all ease-out .5s;
-moz-transition: all ease-out .5s;
-o-transition: all ease-out .5s;
transition: all ease-out .5s;
background-color: rgba(0, 0, 0, 0.4);
}
.nav-h > .nav-header {
display: inline;
}
.nav-h > .nav-header > .nav-title {
display: inline-block;
font-size: 22px;
color: #fff;
font-family: 'Black Han Sans';
font-weight: bolder;
padding: 10px 10px 10px 10px;
}
.nav-h > .nav-btn {
display: none;
}
.nav-h ul li {
display: inline-block;
}
.nav-h ul li a {
color: #FFF;
text-decoration: none;
display: block;
padding: 10px;
font-family: 'Basic';
transition: 0.3s;
font-family: 'Basic';
font-weight: bolder;
transition: 0.3s;
}
.nav-h > .nav-links {
display: inline;
float: right;
margin-right:310px;
}
.nav-h img{
width: 50px;
margin-left: -10px;
margin-right: 10px;
margin-top: -10px;
}
.nav-h > .nav-links > a {
display: inline-block;
padding: 13px 10px 13px 10px;
text-decoration: none;
color: #FFF;
float: right;
}
how to modify my code to adapt my navigation bar to small screens? I remember that apart from my navigation bar all the rest of the code works very well on small screens!
here is my css code for phone screens:
@media (max-width:700px) {
.nav-h > .nav-btn {
display: inline-block;
position: absolute;
right: 0px;
top: 0px;
}
.nav-h > .nav-btn > label {
display: inline-block;
width: 50px;
height: 50px;
padding: 13px;
}
.nav-h > .nav-btn > label:hover,.nav-h #nav-check:checked ~ .nav-btn > label {
background-color: rgba(0, 0, 0, 0.3);
}
.nav-h > .nav-btn > label > span {
display: block;
width: 25px;
height: 10px;
border-top: 2px solid #eee;
}
.nav-links ul li{
display: block;
font-size: 15px;
padding: 0, 20px;
}
.nav-h >.nav-links{
position: absolute;
display: inline;
width: 100%;
background-color: #333;
height: 0px;
transition: all 0.3s ease-in;
overflow-y: hidden;
top: 50px;
}
.nav-h > .nav-links > a {
display: block;
width: 100%;
}
.nav-h > #nav-check:not(:checked) ~ .nav-links {
height: 0px;
overflow-y: hidden;
overflow: hidden;
overflow-x: hidden;
}
.nav-h > #nav-check:checked ~ .nav-links {
height:200px;
overflow-y: hidden;
overflow: hidden;
overflow-x: hidden;
}
