We Keep Coding

how to the make animation happen at the same time?

Hi I have created a collapsable sidebar the expanding animation works fine I mean as you can see when you expand the sidebar it goes smoothly but the problem comes when I am collapsing the sidebar like first the dark blue chevron comes and sticks to the left side and then the sidebar collapses with a jerk.
So can anyone tell me why its happening? and how can I correct it make the sidebar and the icon go at the same time.
Help is highly appreciated!
let expandIcon = document.querySelector('.epnd-clpse-icon')
expandIcon.addEventListener('click', function() {
$('.sidebar-container').toggleClass('sidebar-container-clpse')
$('.epnd-clpse-icon').toggleClass('epnd-clpse-icon-trn')
console.log("I am clicked")
})
.sidebar-container {
background: #ccc;
}
.epnd-clpse-icon {
background: white;
color: white;
}
a {
text-decoration: none;
}
.sidebar-icon i {
color: #06d6a0;
width: 30px;
}
ul {
padding-left: 0;
}
.sidebar-container {
width: 100%;
max-width: 15%;
min-width: 250px;
transition: all 0.5s linear;
position: relative;
border-left: 20px solid var(--primary-light);
overflow-x: hidden;
}
.sidebar-container-clpse {
min-width: 80px !important;
width: 80px !important;
overflow-x: hidden;
transition: all 0.5s linear;
}
.epnd-clpse-icon {
position: absolute;
/* bottom: 100px;
left: 10px; */
top: 50%;
right: -10px;
transition: all 0.5s linear;
cursor: pointer;
background-color: #001846;
padding: 0.8rem;
border-radius: 10px;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.epnd-clpse-icon-trn {
/* transform: rotateY(180deg); */
transition: all 0.5s linear;
left: 0px;
}
.sidebar .nav-link {
display: flex !important;
padding: 0.6rem 1rem;
align-items: center;
}
.sidebar ul li {
position: relative;
width: 100%;
list-style: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="sidebar-container bg-primary-ex-lgt">
<div class="sidebar min-100-vh py-5 d-flex flex-column justify-content-between">
<ul class="dash-links-icon">
<div class="dash-res-close-icon px-2 mb-5">
<i class="fa-solid fa-chevron-right"></i>
</div>
<li class="links-icon my-2 <?php if($page=='home'){echo 'sdbr-active';}?>">
<a class="nav-link" href="user-dashboard.php">
<span class="sidebar-icon">
<i class="fa-solid fa-house"></i>
</span>
<span class="sidebar-text">Dashboard</span>
</a>
</li>
<li class="links-icon my-2 <?php if($page=='quiz'){echo 'sdbr-active';}?>">
<a class="nav-link" href="quiz.php">
<span class="sidebar-icon">
<i class="fa-solid fa-lightbulb"></i>
</span>
<span class="sidebar-text">Quiz</span>
</a>
</li>
<li class="links-icon my-2">
<a class="nav-link" href="#">
<span class="sidebar-icon">
<i class="fa-solid fa-book"></i>
</span>
<span class="sidebar-text">Blog</span>
</a>
</li>
</ul>
<div class="epnd-clpse-icon">
<i class="fa-solid fa-chevron-right"></i>
</div>
</div>
</div>

In your JavaScript you add the class epnd-clpse-icon-trn. Which adds a left:0px;
.epnd-clpse-icon-trn{
/* transform: rotateY(180deg); */
transition: all 0.5s linear;
left: 0px;
}
Because the original element does not have a left: property, CSS cannot compute a transition of the value and thus will 'pop' the element to the left.
How to fix:
To fix this, you'll have to either position the original element by using left: so CSS can calculate it's position transition.
Alternatively, position the element position:absolute within it's parent element. This way, if you move the parent, the element will shift accordingly. In your code, you've already done this, so changing the CSS related to .epnd-clpse-icon-trn would be sufficient:
.epnd-clpse-icon-trn {
/* transform: rotateY(180deg); */
// transition: all 0.5s linear;
// left: 0px;
}
Ironically, by removing the styling related to .epnd-clpse-icon-trn, you'll do exactly what you're trying to manifest.

how to make a collapsible search box to cover navbar items on click

I want to put a search box on the right-hand side of my bootstrap navbar, and I want to make it expand and cover all the items in the navbar except the navbar-brand once the user clicks on it.
Here is what I have tried so far:
<div class="d-flex pt-3 mb-1 pb-0 align-self-end" style="background-color: transparent;" >
<div class="container-search">
<form class="searchbar" action="{% url 'search' %}">
<input type="search" placeholder="Search" name="search" class="searchbar-input" value="{{ values.keywords}}" onkeyup="buttonUp();" required>
<input type="submit" class="searchbar-submit" value="GO">
<span class="searchbar-icon"><i class="fa fa-search" aria-hidden="true"></i></span>
</form>
</div>
</div>
CSS:
<style>
.container-search {
max-width: 600px;
}
.searchbar {
position: relative;
min-width: 50px;
width: 0%;
height: 50px;
float: right;
overflow: hidden;
-webkit-transition: width 0.3s;
-moz-transition: width 0.3s;
-ms-transition: width 0.3s;
-o-transition: width 0.3s;
transition: width 0.3s
}
.searchbar-input {
top: 0;
right: 0;
border: 0;
outline: 0;
background: #c5c5c5;
width: 80vw;
height: 50px;
margin: 0;
/* padding: 0px 55px 0px 20px; */
font-size: 20px;
color: #fff;
overflow: hidden;
}
.searchbar-input::-webkit-input-placeholder {
color: #fff
}
.searchbar-input:-moz-placeholder {
color: #fff
}
.searchbar-input::-moz-placeholder {
color: #fff
}
.searchbar-input:-ms-input-placeholder {
color: #fff
}
.searchbar-icon,
.searchbar-submit {
width: 50px;
height: 50px;
display: block;
position: absolute;
top: 0;
font-family: verdana;
font-size: 22px;
right: 0;
padding: 0;
margin: 0;
border: 0;
outline: 0;
line-height: 50px;
text-align: center;
cursor: pointer;
color: #fff;
background: #c2c2c2;
border-left: 1px solid white
}
.searchbar-open {
width: 100%;
}
</style>
JS:
<script>
$(document).ready(function(){
var submitIcon = $('.searchbar-icon');
var inputBox = $('.searchbar-input');
var searchbar = $('.searchbar');
var isOpen = false;
submitIcon.click(function(){
if(isOpen == false){
searchbar.addClass('searchbar-open');
inputBox.focus();
isOpen = true;
} else {
searchbar.removeClass('searchbar-open');
inputBox.focusout();
isOpen = false;
}
});
submitIcon.mouseup(function(){
return false;
});
searchbar.mouseup(function(){
return false;
});
$(document).mouseup(function(){
if(isOpen == true){
$('.searchbar-icon').css('display','block');
submitIcon.click();
}
});
});
function buttonUp(){
var inputVal = $('.searchbar-input').val();
inputVal = $.trim(inputVal).length;
if( inputVal !== 0){
$('.searchbar-icon').css('display','none');
} else {
$('.searchbar-input').val('');
$('.searchbar-icon').css('display','block');
}
}
</script>
For example, I want to make something like the one in the bosch website.
The problem with my code is that after expansion, the input box expands towards the right and goes out of screen. Instead, I want it to expand inside the navbar, and cover the menu items.

Keeping things simple. So, below is simple code using only CSS and bootstrap.
.navbar-nav{
position: relative;
}
.search:focus{
position: absolute;
width: 100%;
right:0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" href="#">Logo</a>
<!-- Links -->
<ul class="navbar-nav flex-grow-1 justify-content-end">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<input class="search" type="text" placeholder="Search"/>
</li>
</ul>
</nav>

Viewport scaling is not working on a mobile device

I am still quite new to making websites and this website I am currently working on is in early sstage of development, but I would like to make it responsive for mobile devices. I added this meta tag <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> but it doesnt seem to be working, the only thing that is working is user-scalabel=no. I tried different variations of the scale and bunch of different arguments but the result is still the same. There is probably issue with the css. Any ideas? Thank you.
function anim() {
$(".slider").delay(1000).animate({
width: 'show',
}, 1000);
}
$(document).ready(function () {
$('.carousel').carousel({
pause:"false"
})
})
body {
overflow-y: scroll;
overflow-x: hidden;
background-color: moccasin;
}
.secondpic {
margin-top: 10%;
display: block;
width: 100%;
overflow: hidden;
height: auto;
position: relative;
}
.arrow {
margin-top: 10%;
overflow: hidden;
display: block;
margin-left: auto;
margin-right: auto;
width: 30%;
height: auto;
position: relative;
}
#text {
overflow: hidden;
position: relative;
text-align: center;
bottom: 5vw;
transform: rotate(-2deg);
font-size: 1.9vw;
color: #634731;
font-weight: bold;
}
.slider {
display: none;
position: absolute;
right: -60px;
top: 0;
}
.container {
margin-right: 0;
}
.navbar {
top: -100px;
white-space: nowrap !important;
padding-top: 100px !important;
float: right;
background-color: transparent;
padding-bottom: 0 !important;
border-bottom: 0 !important;
z-index: 10;
right: 0;
padding-right: 0;
position: fixed;
opacity: 1;
margin: 0;
}
.buttons {
padding-bottom: 0;
margin-bottom: 0px !important;
margin-right: -1px;
-moz-transition: 0.2s linear;
-ms-transition: 0.2s linear;
-o-transition: 0.2s linear;
-webkit-transition: 0.2s linear;
transition: 0.2s linear;
}
.logo {
padding-top: 10px !important;
padding-bottom: 10px !important;
}
.text-white {
padding-top: 15px !important;
padding-bottom: 5px !important;
}
.bg-secondary {
background-color: rgba(225, 159, 113, 1) !important;
}
.buttons a:hover {
background-color: orange !important;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Prosatin</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script defer src="js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<script src="website.js"></script>
</head>
<header>
<div class="">
<nav class="navbar navbar-expand-lg navbar-light slider">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav buttons">
<a type="button" class="nav-link p-3 mb-2 bg-secondary text-white buttons " href="#">FOTOGALERIE</a>
<a type="button" class="nav-link p-3 mb-2 bg-secondary text-white buttons" href="#">AKCE</a>
<a type="button" class="nav-link p-3 mb-2 bg-secondary text-white buttons " href="#">O NAS</a>
<a type="button" class="nav-link p-3 mb-2 bg-secondary text-white buttons " href="#">ZPEVNIK</a>
<a type="button" class="nav-link p-3 mb-2 bg-secondary text-white buttons" href="#">KONTAKTY</a>
<a type="button" class="nav-link p-3 mb-2 bg-secondary buttons logo"
href="https://www.facebook.com/letnistanovytaborProsatin/"><img src="facebook.png"> </a>
</div>
</div>
</nav>
</div>
</header>
<body onload="anim()">
<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://i.ibb.co/sjngKLM/tabor.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://i.ibb.co/JHYhT9Z/DSC-7364.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://i.ibb.co/yS42F7s/im2.png" alt="Third slide">
</div>
</div>
</div>
<div>
<img class="arrow" src="https://i.ibb.co/VM1v7kD/Image-5.png">
<p class="" id="text">NEJNOVEJSI FOTOGRAFIE</p>
<img class="secondpic" src="https://i.ibb.co/NjpppGn/Image-4.png">
</div>
</body>
</html>
JSfiddle
Incorrect layout on a phone
I cant get the snippet and JSfiddle working properly, but it should give you the idea.

you need to use Media Query like this:
#media only screen and (max-width: 600px) {
body {
// css
}
}

I'm seeing that you have a markup issue. You've a <header> inside the <html> and that's wrong. The <html> tag only has 2 children: <head> and <body>. So, the <header> should be inside the <body> and maybe that's the problem because your meta tags are fine.
You could read more about the anatomy of an HTML document here (scroll a little)

Bootstrap navbar, full height navbar-collapse but with weird animation

I managed to have the div containing the expanded menu, covering the whole view (with 100vh). I noted that the cool animation, while it is expanding itself, is working only till the end of the li content (last menu link), then the speed increases or simply the animation stops working and the navbar-collapse finally reach the end of the view port, but not in a nice way.
Do you know why? Is it a bootstrap javascript functionality? Do you know how to fix it?
I copied the code in this fiddle
body {
padding-top: 53px;
}
.pids-navbar{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
z-index: 99999;
}
.pids-navbar-toggle .pids-icon-bar {
display: block;
width: 16px;
height: 1px;
border-radius: 1px;
}
.pids-navbar-toggle {
margin-top: 14px;
margin-bottom: 14px;
margin-right: 0px;
float: left;
}
.pids-navbar-nav {
margin: 0px -15px;
font-weight: lighter;
}
.pids-navbar-collapse {
border: 0px;
height: calc(100vh - 60px);
}
.full-height {
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<nav class="navbar navbar-default navbar-static-top pids-navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle pids-navbar-toggle" data-toggle="collapse" data-target="#pids-bs-navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar pids-icon-bar"></span>
<span class="icon-bar pids-icon-bar"></span>
<span class="icon-bar pids-icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse pids-navbar-collapse" id="pids-bs-navbar">
<ul class="nav navbar-nav pids-navbar-nav full-height">
<li class="active">
Home 1
</li>
<li class="">
Home 2
</li>
<li class="">
Home 3
</li>
</ul>
</div>
</div>
</nav>
Thanks!

I had exactly the same problem and what worked for me is to set the height of the ul to 100vh, not the height of the whole navbar-collapse. See code:
.navbar-collapse ul {
height: 100vh;
}
note: I am using bootstrap 4.

<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Lato', sans-serif;
}
.overlay {
height: 0%;
width: 100%;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
overflow-y: hidden;
transition: 0.5s;
}
.wrap {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
#media screen and (max-height: 450px) {
.overlay {overflow-y: auto;}
.overlay a {font-size: 20px}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
</style>
</head>
<body>
<div id="myNav" class="overlay">
×
<div class="wrap">
Home
Home 1
Home 2
Home 3
</div>
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<script>
function openNav() {
document.getElementById("myNav").style.height = "100%";
}
function closeNav() {
document.getElementById("myNav").style.height = "0%";
}
</script>
</body>
</html>

insert text (menu) near navigation bar

I am using bootsrap 4 alpha 6, and midnight.js to change the color of navigation menu toggler. I want to insert a text (MENU) next to it. Example in the Capture. For text toggler I use fontawesome.
Thanks your time and help!
the source html
<div class="navigation-button">
<button class="navbar-toggler navbar-toggler-right fixed-top" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="fa fa-bars fa-2x"></span>
</button>
</div>
using midnight.js, will looks like this
<div class="navigation-button">
<button class="navbar-toggler navbar-toggler-right fixed-top" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation" style="position: fixed; top: 0px; left: 0px; right: 0px; overflow: hidden; height: 40px;"><div class="midnightHeader white-menu" style="position: absolute; overflow: hidden; top: 0px; left: 0px; right: 0px; bottom: 0px; transform: translateY(110%) translateZ(0px);"><div class="midnightInner" style="position: absolute; overflow: auto; top: 0px; left: 0px; right: 0px; bottom: 0px; transform: translateY(-110%) translateZ(0px);">
<span class="fa fa-bars fa-2x"></span>
</div></div><div class="midnightHeader blue-menu" style="position: absolute; overflow: hidden; top: 0px; left: 0px; right: 0px; bottom: 0px; transform: translateY(0%) translateZ(0px);"><div class="midnightInner" style="position: absolute; overflow: auto; top: 0px; left: 0px; right: 0px; bottom: 0px; transform: translateY(0%) translateZ(0px);">
<span class="fa fa-bars fa-2x"></span>
</div></div></button>
</div>
It works ok, only I want to add a text to it.
now it looks like:
and I want
I tried
MENU<span class="fa fa-bars fa-2x"></span>
it looks

Try by adding display:inline; to your icon:
<span class="fa fa-bars fa-2x" style="display:inline;"></span>

Try doing this
MENU<span class="fa fa-bars fa-2x" style="display:inline;"></span>
This will make the icon an inline element (same as the text)
Also check to see if something is restricting the width of the element, also check the parent elements for this too. This may prevent the next from displaying inline with the icon.

I've manipulated some code which I answered here some time ago. Tested with my phone and it works. Its on Bootstrap. I am answering this question and drinking some wine. So, I will just close my computer soon after posting this answer. Hope is what you want.
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
</script>
<style>
.navbar {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
}
.navbar-default .navbar-nav {
font-size: 15px;
}
.navbar-fixed-top {
min-height: 80px;
}
.navbar-nav>li {
position: relative;
}
.navbar-nav>li>a {
padding-top: 0px;
padding-bottom: 0px;
line-height: 80px;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #fff;
background-color: #b4a28f;
}
.navbar-default .navbar-nav .dropdown-menu {
left: 0;
right: auto;
}
.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus {
color: #ffffff;
text-decoration: none;
outline: 0;
background-color: #b4a28f;
}
#media (min-width: 768px) {
.navbar-nav>li>.nav-line {
position: absolute;
bottom: -1px;
left: 0;
background-color: #3178b9;
height: 3px;
width: 0%;
}
.navbar-nav>li:hover>.nav-line {
background-color: #3178b9;
height: 3px;
width: 100%;
-webkit-transition: all 200ms ease-in;
-moz-transition: all 200ms ease-in;
-o-transition: all 200ms ease-in;
transition: all 200ms ease-in;
}
.navbar-nav>li.active>.nav-line {
background-color: transparent;
}
}
#media (max-width: 767px) {
.navbar-nav > li > a {
line-height: 30px;
padding-top: 10px;
padding-bottom: 10px;
}
#footer {
color: #2e2e2e;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<div class="row">
<div class="col-sm-10 visible-sm visible-md visible-lg">
<a class="navbar-brand" href="">
<img class="img img-responsive" src="www/images/srs.png" alt="SRS Constructions">
</a>
</div>
<div class="col-xs-7 visible-xs">
<a class="navbar-brand" href="">
<img class="img img-responsive" src="www/images/srs.png" alt="SRS Constructions">
</a>
</div>
<div style="margin-top:15px;text-align:right;" class="col-xs-3 visible-xs">
<strong>Menu</strong>
</div>
<div class="col-xs-2">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
</div>
<div class="collapse navbar-collapse navbar-right" id="collapse">
<ul class="nav navbar-nav">
<li class="active"><a class="main" href="#main">Home <span class="sr-only">(current)</span></a>
<div class="nav-line"></div>
</li>
<li class="dropdown" id="nav-about">
<a href="#about" class="dropdown-toggle main" role="button" aria-haspopup="true" aria-expanded="false">About
</a>
<ul class="dropdown-menu">
<li>The Founder</li>
<li role="separator" class="divider"></li>
<li>HSE Policy</li>
<li>Quality Policy</li>
</ul>
<div class="nav-line"></div>
</li>
<li><a class="main" href="#services">Services</a>
<div class="nav-line"></div>
</li>
<li><a class="main" href="#projects">Our Projects</a>
<div class="nav-line"></div>
</li>
<li><a class="main" href="#whyus">Why Us</a>
<div class="nav-line"></div>
</li>
<li><a class="main" href="#contact">Contact</a>
<div class="nav-line"></div>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>