So I have been trying to make my navbar not collapse with other elements but it seemed like it will not work at all. At the same time, I have to do it Because I have designed my navbar to collapse and expand when clicked on the bars (to make it responsive using media query).
I'm trying to Not make my navbar collapse with other sections (My navbar is collapsing with my About us )I tried doing it position:fixed; but then When the media query for navbar activates the bar image cannot be seen.
Codepen: https://codepen.io/Pawan_Dev_World/pen/wvqZYpw
$(document).ready(function(){
$('.list').click(function(){
$('nav').toggleClass('active')
})
})@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Allura&family=Josefin+Sans:wght@300&display=swap');
body {
margin: 0%;
padding: 0%;
overflow:hidden;
}
/* NavBar */
nav {
background-color: #E5E5E5;
width: 100%;
position: absolute;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: right;
padding: 2%;
font-family: 'Poppins', sans-serif;
color: #ff812c;
transition: .3s;
}
a {
text-decoration: none;
display: block;
color: #ff812c;
transition: .3s;
}
ul > li:hover {
background-color: #ff812c;
}
ul > li:hover a{
color: rgb(223, 223, 223);
}
.list {
width:20px;
display:none;
top: 2%;
float: right;
padding: 20px;
background: #E5E5E5;
padding-left: 100%;
cursor: pointer;
}
@media screen and (max-width:700px){
nav {
width: 100vw;
height: 100vh;
left: -150%;
top: 60px;
transition: 0.5s;
}
nav.active {
left: 0%;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.list {
display: block;
}
#ul-nav li:first-child{
order: 4;
}
#ul-nav li:nth-child(2){
order: 3;
}
#ul-nav li:nth-child(3){
order: 2;
}
#ul-nav li:nth-child(4){
order: 1;
}
}
/* Accordin */
.container {
background-color:rgb(223, 223, 223) ;
padding: 20px;
}
.acc-h1 {
font-family: 'Allura', cursive;
}
.acco{
display: flex;
}
.acco-tabs{
background-color: #ff812c;
padding: 20px;
margin: 10px;
flex: 1 1 0;
}
@media screen and (max-width:600px) {
.mvc {
display: flex;
flex-wrap: wrap;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- NavBar -->
<nav class="active">
<ul id="ul-nav" >
<li><a href="" class="a-f">About</a></li>
<li><a href="" class="a-f">Contact</a></li>
<li><a href="" class="a-f">Products</a></li>
<li><a href="#" class="a-f">Home</a></li>
</ul>
</nav>
<img src="bars-solid.svg" alt="navbar-list" class="list" >
<!-- About us -->
<div class="container" id="about-us">
<h1 class="acc-h1">About Us</h1>
<div class="acco">
<div class="acco-tabs">
<h3 class="heading-acco">Our Vision</h3>
<p class="para-acco">Our Vision “Advancing pharmaceutics to enhance human lives” constantly motivates
us to listen carefully to the customer needs and be acquainted with global needs in
pharmaceutical and health care sector to produce and deliver outstanding cost effective
quality products and services that advances human lives.</p>
</div>
<div class="acco-tabs">
<h3 class="heading-acco">Our Mision</h3>
<p class="para-acco">Our Mission “to do the right things” drives our endeavors to work efficiently at every
nano level to address today’s challenges in improving health through quality medicines
by mastering science with advanced technologies.</p>
</div>
<div class="acco-tabs">
<h3 class="heading-acco">Our Core Values</h3>
<p class="para-acco">Trust… Transparency… Integrity... Accountability.</p>
</div>
</div>
<br>
<p>Vishaura is anchored by a strong and sustainable management that completely
understands the value of customers and serves beyond their expectations. Known for its
customer centric approach</p>
</div>