We Keep Coding

How can I get this blend mode effect on hero image and also fix the navigation menu opacity?

I am trying to achieve this blend mode effect on hero image and transparent navbar with that disolve into the hero image. I tried to make transparent navbar by giving a background color and some opacity, but it doesnt look same as what I want.
What I have so far is this:
and here's the code for that:
Any help would be greatly appreciated. Thank you.
.navbar {
background: #000000 0% 0% no-repeat padding-box;
opacity: 0.56;
padding-bottom: 1.5rem;
padding-top: 1.5rem;
#media screen and (max-width: 425px) {
padding-bottom: 0.5rem;
padding-top: 0.5rem;
}
}
&-collapse {
justify-content: flex-end;
#media screen and (max-width: 768px) {
background: #402808 0% 0% no-repeat padding-box;
.nav-item:last-child {
display: none;
}
}
}
&-nav {
align-items: center;
}
.nav-item {
margin-right: 4rem;
transition: all 0.2s;
&:hover {
.nav-link {
color: #f1cd9d !important;
}
}
#media screen and (max-width: 1366px) {
margin-right: 3rem;
}
#media screen and (max-width: 1200px) { margin-right: 1rem; }
#media screen and (max-width: 1024px) {
margin-right: 1rem;
}
}
}
.hero {
background: url("/assets/src/images/hero.png");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 100%;
height: 100vh;
overflow: hidden;
position: relative;
margin-bottom: 10rem;
.herowoman {
left: 79.4rem;
position: absolute;
top: 35.3rem;
}
.row1 {
margin-top: 18rem;
justify-content: center;
img {
width: 251px;
height: 192px;
}
#media screen and (max-width: 425px) {
img {
width: 155px;
height: 118px;
}
}
}
.row2 {
position: relative;
h1 {
&::after {
content: "";
display: block;
width: 0;
height: 2px;
background: #efefef;
width: 5.5%;
#media screen and (max-width: 425px) {
width: 10.5%;
}
}
}
p {
font-size: clamp(10rem, 24vw, 44rem);
text-align: center;
line-height: clamp(16rem, 22vw, 35rem);
font-weight: bold;
letter-spacing: 6.16px;
color: #ffffff;
opacity: 0.26;
}
.herowoman {
width: 371px;
height: 543px;
position: absolute;
top: -2.5rem;
left: 49.5rem;
}
button {
z-index: 99;
position: fixed;
right: 0rem;
top: 56rem;
width: 214px;
}
#media screen and (max-width: 425px) {
h1 {
font-size: 1.8rem;
line-height: 6.5rem;
}
p {
font-size: 11.3rem;
line-height: 11.5rem;
}
}
}
.row3 {
justify-content: center;
position: relative;
img {
width: 371px;
height: 543px;
position: absolute;
top: -12rem;
left: 49.5rem;
}
p {
font: normal normal bold 440px/457px Poppins;
letter-spacing: 6.16px;
color: #ffffff;
opacity: 0.26;
}
}
}
<nav class="navbar navbar-expand-lg fixed-top">
<div class="container">
<a class="navbar-brand" href="/html/index.php"><img src="/assets/src/images/logo.png" alt=""
class="img-fluid"></a>
<button class="navbar-toggler x" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto me-auto">
<li class="nav-item">
<a class="nav-link navmenu-text" aria-current="page" href="/html/index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link navmenu-text" href="/html/about.php">About</a>
</li>
<li class="nav-item ">
<a class="nav-link navmenu-text" href="/html/services.php">services</a>
</li>
<li class="nav-item">
<a class="nav-link navmenu-text" href="/html/rooms.php">rooms</a>
</li>
<li class="nav-item">
<a class="nav-link navmenu-text" href="/html/gallery.php">gallery</a>
</li>
<li class="nav-item">
<a class="nav-link navmenu-text" href="/html/contact.php">Contact</a>
</li>
</ul>
<li class="nav-item-last">
<a href="#" class=" d-flex">
<img src="../assets/src/images/location.svg" alt="" class="img-responsive">
<p class="nav-text">BHAIRAHAWA, RUPANDEHI</p>
</a>
<a href="#" class=" d-flex">
<img src="../assets/src/images/phone.svg" alt="" class="img-responsive">
<p class="nav-text">(718)432-6687</p>
</a>
</li>
</div>
</div>
</nav>
<section class="hero">
<div class="container">
<div class="row row1">
<img src="/assets/src/images/logo.svg" alt="" class="img-responsive">
</div>
<div class="row row2">
<h1>A Superior Budget</h1>
<p class="">HOTEL</p>
<button class="btn btn-primary btn-text" onclick="window.location.href='/html/booknow.php'">BOOK
NOW</button>
</div>
</div>
<img src="/assets/src/images/herowoman.png" alt="" class="img-responsive herowoman">
</section>

You'll have to add alpha value to the background color.
Example:
.navbar {
background: rgba(0, 0, 0, 0.8);
padding-bottom: 1.5rem;
padding-top: 1.5rem;
backdrop-filter: blur(13px);
}
But backdrop filter is not supported in IE and Firefox.
To get around you can use #support and add a fallback property
.navbar {
background: rgba(0, 0, 0, 0.8);
padding-bottom: 1.5rem;
padding-top: 1.5rem;
backdrop-filter: blur(13px);
#supports (
(-webkit-backdrop-filter: blur(13px)) or (backdrop-filter: blur(13px))
) {
background: rgba(0, 0, 0, 0.0);
backdrop-filter: blur(13px);
-webkit-backdrop-filter: blur(13px);
}
}

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>

I have problem with scroll down navbar function

I want to have on top of the site menu like this down here. When the user scrolls down it should change the background and show another logo.
Why does this function not work? It just shows a black background all the time. I want it to be shown while scrolled down by some px.
https://codepen.io/anon/pen/XJdVYr - i want to do this
$(document).ready(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 50) {
$('#menu-logo').slideDown(500);
}
if ($(window).scrollTop() < 50) {
$('#menu-logo').slideUp(500);
}
});
});
.navbar {
width: 950px;
position: fixed;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
display: flex;
}
.navbar .navbar-brand {
position: absolute;
left: 0;
}
.navbar .collapse {
padding-top: 40px;
margin-left: 225px;
}
.navbar a {
text-decoration: none;
border-right: 1px solid rgb(153, 153, 153);
font-size: 14px;
font-family: 'Mada', sans-serif, Regular;
color: #000000;
padding: 10px 40px;
}
.navbar a:last-child {
border-right: none;
}
.navbar #menu-logo {
background: rgba(51, 51, 51);
width: 950px;
position: fixed;
height: 95px;
right: 0;
left: 0;
margin-right: auto;
margin-left: auto;
padding-bottom: 95px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-expand-md navbar-light bg-light">
<img class="navbar-brand" id="logo" src="images/img2-logo.png" alt="">
<img id="menu-logo" src="images/img-menu.png" alt="">
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<a class="nav-item nav-link" href="#mission">MISSION</a>
<a class="nav-item nav-link" href="#clients">CLIENTS</a>
<a class="nav-item nav-link" href="#products">PRODUCTS</a>
<a class="nav-item nav-link" href="#contact">CONTACT</a>
</div>
</nav>

See this code to over come this issue. as you wish css will changed while scrolling
$(document).ready(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 500) {
console.log($(window).scrollTop());
$('#datacss').css("background-color", "black");
}
if ($(window).scrollTop() < 500) {
console.log($(window).scrollTop());
$('#datacss').css("background-color", "white");
}
});
});
.too-height {
min-height: 2500px;
}
.navbar {
width: 950px;
position: fixed;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
display: flex;
height: 100em;
}
.navbar .navbar-brand {
position: absolute;
left: 0;
}
.navbar .collapse {
padding-top: 40px;
margin-left: 225px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="too-height" id="datacss">
<nav class="navbar navbar-expand-md navbar-light bg-light">
<img class="navbar-brand" id="logo" src="images/img2-logo.png" alt="">
<img id="menu-logo" src="images/img-menu.png" alt="">
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<a class="nav-item nav-link" href="#mission">MISSION</a>
<a class="nav-item nav-link" href="#clients">CLIENTS</a>
<a class="nav-item nav-link" href="#products">PRODUCTS</a>
<a class="nav-item nav-link" href="#contact">CONTACT</a>
</div>
</nav>
</div>

Centering a div and having issues

I am having issues centering this div which is being activated in JavaScript to show onclick of an <a> tag. It can be found at the bottom of the page with the text "This is a test" with a small padding background. Usually it would only appear with an onclick but I have disabled that for now.
I have tried justify-content and all the usuals (I think). I have a feeling that a parent tag is interfering with it and giving it CSS that I don't want it to. I have used Inspect Element to no avail in finding this, if it is the case.
Any advice would be appreciated.
Thanks.
var mouseFollowX = 0,
mouseFollowY = 0,
x = 0,
y = 0,
friction = 2 / 30;
function backgroundMover() {
x += (mouseFollowX - x) * friction;
y += (mouseFollowY - y) * friction;
translate = 'translate(' + x + 'px, ' + y + 'px) scale(1.3)';
$('.bg').css({
'-webit-transform': translate,
'-moz-transform': translate,
'transform': translate
});
window.requestAnimationFrame(backgroundMover);
}
$('.wrap').on('mousemove click', function(e) {
var lMouseX = Math.max(-100, Math.min(100, $(window).width() / 2 - e.clientX));
var lMouseY = Math.max(-100, Math.min(100, $(window).height() / 2 - e.clientY));
mouseFollowX = (20 * lMouseX) / 100; // 100 : 12 = lMouxeX : lFollow
mouseFollowY = (10 * lMouseY) / 100;
});
backgroundMover();
function showDevFunction() {
var getDev = document.getElementById("showDev");
if (getDev.style.display === "block") {
getDev.style.display = "none";
} else {
getDev.style.display = "block";
}
}
#mainnav {
background-color: #FBFBFB;
}
h1 {
margin-bottom: 0;
padding: 0;
}
.header-brand {
margin-bottom: -8px;
margin-top: 0;
margin-right: 20px;
}
h1.header-brand {
margin-right: 25px;
margin-top: -10px;
margin-left: 20px;
}
.nav-bg {
padding: 33px;
margin: 0;
background: url("../img/home/main-img-header-2.jpg") no-repeat center bottom;
}
h1.hero-heading {
color: white;
position: absolute;
padding-left: 15%;
top: 0.70em;
left: -0.75em;
line-height: 0.8;
font-family: Roboto, sans-serif;
font-size: 10vh;
font-weight: bold;
font-style: italic;
text-transform: uppercase;
text-shadow: 3px 3px 5px black;
}
.hero-heading span {
padding-left: 0.5em;
}
h3.hero-content {
color: white;
position: absolute;
background-color: rgba(53, 79, 92, 0.50);
padding: 0.75em 0.75em 0.75em 15%;
top: 11em;
left: -0.75em;
line-height: 1.5em;
max-width: 76%;
font-family: Roboto Slab, serif;
font-size: 2.5vh;
font-weight: lighter;
font-style: normal;
}
.wrap {
width: 100%;
height: 55vh;
position: relative;
overflow: hidden;
margin-bottom: 35px;
}
.bg {
z-index: -1;
position: static;
background: url("../img/home/main-img-header-2.jpg") no-repeat center bottom;
width: 100%;
height: 55vh;
transform: scale(1.3);
}
.cta {}
img.cta {
opacity: 100;
background: white;
-o-transition: opacity .2s ease-out;
-ms-transition: opacity .2s ease-out;
-moz-transition: opacity .2s ease-out;
-webkit-transition: opacity .2s ease-out;
/* ...and now override with proper CSS property */
transition: opacity .2s ease-out;
}
img.cta:hover {
opacity: 0;
}
.cf {}
.cf img {
position: absolute;
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-o-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
.cf img.top:hover {
opacity: 0;
}
.cta-sub {
position: relative;
margin-top: 200px;
}
.show-more {
width: 80%;
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: lightblue;
position: absolute;
margin: 275px 0 0 0;
}
#showDev {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<title>Bootstrap Layouts</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- Custom CSS -->
<link rel="stylesheet" href="styles/main.css" type="text/css">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700" rel="stylesheet">
</head>
<body>
<header class="navbar-inverse" role="banner">
<div id="mainnav">
<!-- Can change class="navbar-static-top", to class="navbar-fixed-top" to have nav stuck top -->
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="index.html">
<a class="header-brand" href="index.html"><img src="img\main\logo-text-web.png" height="100" width="408"></a>
<!-- <h1 class="header-brand">David Olijnyk <br>Webmaster Services</h1> -->
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link nav-bg" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
</div>
</header>
<div class="wrap">
<div class="bg"></div>
<h1 class="hero-heading"> your <br> <span>solution</span></h1>
<div class="hero-content-box">
<h3 class="hero-content">Keep your most important business services in one place, with easy and frequent communication. Having an online presence has never been so easy and impactful. </h3>
</div>
</div>
<div class="container">
<div class="row">
<a href="#" class="cf col-4 d-flex justify-content-center" onclick="showDevFunction()">
<img class="cta bottom rounded" src="img/home/dev-more.png">
<img class="cta top rounded" src="img/home/development.png">
</a>
<div class="show-more" id="showDev">
This is a test
</div>
<a href="#" class="cf col-4 d-flex justify-content-center" onclick="showDev">
<img class="cta bottom rounded" src="img/home/photo-more.png">
<img class="cta top rounded" src="img/home/photo.png">
</a>
<a href="#" class="cf col-4 d-flex justify-content-center">
<img class="cta bottom rounded" src="img/home/dev-more.png">
<img class="cta top rounded" src="img/home/development.png">
</a>
</div>
<div class="row cta-sub">
<h3 class="cf col-4 d-flex justify-content-center">Webmaster</h3>
<h3 class="cf col-4 d-flex justify-content-center">Photography</h3>
<h3 class="cf col-4 d-flex justify-content-center">Graphic Design</h3>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="scripts/main.js"></script>
</body>
</html>

The only block with position:relativeis the .wrap so #showDev is positioned relatively to the body.
Add the following position:relative to the .container element and #showDev will do 80% of this block.

I would use margin:auto and text-align: center.
.nameOfTheDiv{
margin: auto;
text-align: center;
}
This will help to position your div in the center.

In your show-more class you are using margin-left: auto; and margin-right: auto;. But again you have used margin: 275px 0 0 0;
which is manipulating the previously set values. Additionally, you have to add left: 0; and right: 0; with it.
So, change it like below:
.show-more {
width: 80%;
margin-left: auto;
margin-right: auto;
text-align: center;
background-color: lightblue;
position: absolute;
margin-top: 275px;
left: 0;
right: 0;
}

In case you are looking for something to center the div like an alert box
div {
position: absolute;
margin: auto;
max-width: 300px;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

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>