Whenever the browser is resized, the div elements end up overlapping each other.
To view the HTML file mentioned in this post, you can visit the following URL: http://codepen.io/SanjeetSk/pen/ZQBBaz
I'm seeking a genuine solution directly related to the issue at hand, rather than recommending solutions like min-width and overflow hidden. That's why I've included the link to the codepen in this post. Once again, here's the link for your reference: http://codepen.io/SanjeetSk/pen/ZQBBaz
.home-area, .work-area, .contact-area {
padding: 80px 20px 80px 20px;
position: relative;
height: 100vh;
/* overflow: hidden; */
}
.navbar-toggle{
width: 42px;
height: 38px;
float: right;
margin-top: 10px;
}
.navbar-toggle * {
-ms-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.navbar-toggle span {
width: 20px;
height: 2px;
margin-bottom: 3px;
background-color: green;
display: block;
}
<!-- Codepen styling, not required for use -->
.navbar-toggle span.bar1 {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-ms-transform-origin: 1px 3px;
-webkit-transform-origin: 1px 3px;
-moz-transform-origin: 1px 3px;
-o-transform-origin: 1px 3px;
transform-origin: 1px 3px;
width: 24px;
}
.navbar-toggle span.bar2 {
-ms-transform: rotate(-360deg) scale(0);
-webkit-transform: rotate(-360deg) scale(0);
-moz-transform: rotate(-360deg) scale(0);
-o-transform: rotate(-360deg) scale(0);
transform: rotate(-360deg) scale(0);
}
.navbar-toggle span.bar3 {
-ms-transform: rotate(360deg) scale(0);
-webkit-transform: rotate(360deg) scale(0);
-moz-transform: rotate(360deg) scale(0);
-o-transform: rotate(360deg) scale(0);
transform: rotate(360deg) scale(0);
}
.navbar-toggle span.bar4 {
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
-ms-transform-origin: 2px 0px;
-webkit-transform-origin: 2px 0px;
transform-origin: 2px 0px;
width: 24px;
}
.navbar-toggle.collapsed span.bar1,
.navbar-toggle.collapsed span.bar2,
.navbar-toggle.collapsed span.bar3,
.navbar-toggle.collapsed span.bar4 {
-ms-transform: none;
-webkit-transform: none;
transform: none;
width: 20px;
}
.footer{
height: 50px;
background-color: #ffc04c;
}
.copyright{
padding-top: 10px
}<html lang="en">
<html>
<head>
<!-- Designed and Developed by DigitalSrishti inc -->
<!-- DigitalSrishti :- Your Digital partner for sustainable future -->
<title>My Portfolio</title>
</head>
<body data-spy="scroll" data-target="#navbar">
<div class="navbar navbar-default navbar-fixed-top bs-dos-nav " role="navigation">
<div class="container">
<div class="navbar-header">
<div class="navbar-toggle collapsed target" data-toggle="collapse" data-target="#navbar" id="rotate">
<span class="bar1"></span>
<span class="bar2"></span>
<span class="bar3"></span>
<span class="bar4"></span>
</div>
<a href="#" class="navbar-brand">Your Logo</a>
</div>
<nav id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right main-navigation text-uppercase ">
<li><a href="#home">Home</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#resume">Resume</a></li>
<li class="disabled"><a href="#social">Social</a></li>
</ul>
</nav>
</div>
</div>
<!-- <a href = "_http://themes.getbootstrap.com/products/application"> click here I liked the friends and enemy :-) profile</a> -->
<!-- Start Home -->
<div id="home">
<div class="home-area">
<div class="container">
<h1><strong>Sanjeet Shukla</strong></h1>
<p>Have a look at some <strong>Works</strong> I have done so far, it <strong>BI Designer</strong> creating modern and responsive reports for <strong>Web</strong> and <strong>Mobile</strong>. You can view my<strong>Profile</strong> and <strong>resume</strong> and also find a link to become my friend or enemy on social sites, it is cool.. right?</br> Let us work together. Thank you.</p>
<a href="#work" class="btn btn-default">Let's Begin</a>
</div>
</div>
</div>
<!-- End Home -->
<!-- Start Work -->
<div id="work">
<div class="work-area">
<div class="container">
<h1>My <strong>Work</strong></h1> Have a look at some of my <strong>Works</strong> It may help you choose best partner for your work ;-)
<diV class="row">
<div class="col-md-3">
<h4>Mobile Dict</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
</div>
<div class="col-md-3">
<h4>HTML Template</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. </p>
</div>
<div class="col-md-3">
<h4>tic-toe Game</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
</div>
<div class="col-md-3">
<h4>Pathshala(ERP)</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
</div>
</div>
</div>
</div>
</div>
<!-- End Work -->
<!-- Start Contact -->
<div id="contact">
<div class="contact-area">
<div class="container">
<h1>Contact <strong>Me</strong></h1>
</div>
</div>
</div>
<!--End Contact-->
<div class="footer navbar-fixed-bottom" id="footer" align="center">
<div class="copyright p">© 2016 <a href="www.sanjeetshukla.me">Sanjeet Shukla</a></div>
</div>
</body>
</html>