Align two elements with CSS - html

I have two elements menu and header/ribbon with user information. menu looks good but ribbon with username not fit into a page very well. Please see my code:
JSFiddle
jQuery(document).ready(function() {
jQuery('.toggle-nav').click(function(e) {
jQuery(this).toggleClass('active');
jQuery('.menu ul').toggleClass('active');
e.preventDefault();
});
});
body{
width:100%;
margin: 0 auto;
}
.menu {
width: 100%;
position:relative;
display:inline-block;
}
.menu ul.active {
display:none;
}
.menu ul {
position:absolute;
top:90%;
left:0px;
padding:10px 10em 0em 2em; /* menu width */
border-radius:7px;
background:#4CAF50;
}
.menu ul:after { /* black triangle position */
width:0px;
height:0px;
position:absolute;
top:0%;
left:22px;
content:'';
transform:translate(0%, -100%);
border-left:7px solid transparent;
border-right:7px solid transparent;
border-bottom:7px solid #303030;
}
.menu li {
margin:5px -100px 5px 0px; /* text inside menu width */
float:none;
display:block;
}
.menu li * {
vertical-align: middle;
}
.menu a {
display:block;
}
.toggle-nav {
padding:20px; /* squere element size */
float:left;
display:inline-block;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:4px;
background:#4CAF50;
color:#FFFFFF;
font-size:25px;
transition:color linear 0.15s;
font-weight: bold;
}
.toggle-nav:hover, .toggle-nav.active {
text-decoration:none;
color:#FFFFFF;
}
.band {
position:relative;
top:-72px;
right:-70px;
padding:14px; /* element size */
width: 100%;
float:left;
display:inline-block;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:4px;
background:#4CAF50;
color:#FFFFFF;
font-size:17px;
transition:color linear 0.15s;
font-weight: bold;
}
.ribbon:before {
content: "";
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<nav class="menu">
<ul class="active">
<li class="current-item"><a href="?action=?home">
<i class="fa fa-home fa-3x" aria-hidden="true"></i> <strong class="fa-home-1x home-text">Home</strong></a></li>
<li>
<i class="fa fa-sign-language fa-3x" aria-hidden="true"></i> <strong class="a-sign-language-1x sign-language-text">Menu1</strong></li>
<li>
<i class="fa fa-flag-checkered fa-3x" aria-hidden="true"></i> <strong class="a-sign-language-1x sign-language-text">Manu2</strong></li>
<li>
<i class="fa fa-truck fa-3x" aria-hidden="true"></i> <strong class="a-sign-language-1x sign-language-text">Menu3</strong></li>
<li>
<i class="fa fa-sign-out fa-3x" aria-hidden="true"></i> <strong class="fa-home-1x sign-out-text">Sign Out</strong></li>
</ul>
<a class="toggle-nav" href="#"><i class="fa fa-bars"></i></a>
</nav>
<div class="band"><i class="fa fa-user" aria-hidden="true"></i> User Name<i class="ribbon"></i><i class="fa fa-sign-language" aria-hidden="true"></i> Another name</div>
When a screen is wide you can see a big white gap on the right-hand side but when I'm looking this code on a small screen then ribbon overlap. How I can show always 100% width of ribbon menu square need to be in same position and same width

You can change the width of .band to:
width: calc(100% - 97px);
as the width of the menu is fixed to 97px, including the paddings and margins. We can get the left space for the right part by getting the full width - 97px (100% - 97px) by using calc().
Wish that this helped you.

You could do it with CSS flex:
jQuery(document).ready(function() {
jQuery('.toggle-nav').click(function(e) {
jQuery(this).toggleClass('active');
jQuery('.menu ul').toggleClass('active');
e.preventDefault();
});
});
body {
display: flex;
}
.menu {
position: relative;
}
.menu ul.active {
display: none;
}
.menu ul {
position: absolute;
top: 90%;
left: 0;
padding: 10px 10em 0em 2em; /* menu width */
border-radius: 7px;
background: #4CAF50;
}
.menu ul:after { /* black triangle position */
width: 0;
height: 0;
position: absolute;
top: 0;
left: 22px;
content: '';
transform: translate(0%, -100%);
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #303030;
}
.menu li {
margin: 5px -100px 5px 0px; /* text inside menu width */
float: none;
display: block;
}
.menu li * {
vertical-align: middle;
}
.menu a {
display: block;
}
.toggle-nav {
padding: 20px; /* squere element size */
float: left;
display: inline-block;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15);
border-radius: 4px;
background: #4CAF50;
color: #FFFFFF;
font-size: 25px;
transition: color linear 0.15s;
font-weight: bold;
}
.toggle-nav:hover, .toggle-nav.active {
text-decoration: none;
color: #FFFFFF;
}
.band {
flex: 0 1 100%;
padding: 14px; /* element size */
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15);
border-radius: 4px;
background:#4CAF50;
color: #FFFFFF;
font-size: 17px;
transition: color linear 0.15s;
font-weight: bold;
margin-left: 10px;
}
.ribbon:before {
content: '';
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<nav class="menu">
<ul class="active">
<li class="current-item"><a href="?action=?home">
<i class="fa fa-home fa-3x" aria-hidden="true"></i> <strong class="fa-home-1x home-text">Home</strong></a></li>
<li>
<i class="fa fa-sign-language fa-3x" aria-hidden="true"></i> <strong class="a-sign-language-1x sign-language-text">Menu1</strong></li>
<li>
<i class="fa fa-flag-checkered fa-3x" aria-hidden="true"></i> <strong class="a-sign-language-1x sign-language-text">Manu2</strong></li>
<li>
<i class="fa fa-truck fa-3x" aria-hidden="true"></i> <strong class="a-sign-language-1x sign-language-text">Menu3</strong></li>
<li>
<i class="fa fa-sign-out fa-3x" aria-hidden="true"></i> <strong class="fa-home-1x sign-out-text">Sign Out</strong></li>
</ul>
<a class="toggle-nav" href="#"><i class="fa fa-bars"></i></a>
</nav>
<div class="band"><i class="fa fa-user" aria-hidden="true"></i> User Name<i class="ribbon"></i><i class="fa fa-sign-language" aria-hidden="true"></i> Another name</div>
JSFiddle

try this one:
body{
width:100%;
margin: 0 auto;
}
.menu {
width: 100%;
position:relative;
display:inline-block;
}
.menu ul.active {
display:none;
}
.menu ul {
position:absolute;
top:90%;
left:0px;
padding:10px 10em 0em 2em; /* menu width */
border-radius:7px;
background:#4CAF50;
}
.menu ul:after { /* black triangle position */
width:0px;
height:0px;
position:absolute;
top:0%;
left:22px;
content:'';
transform:translate(0%, -100%);
border-left:7px solid transparent;
border-right:7px solid transparent;
border-bottom:7px solid #303030;
}
.menu li {
margin:5px -100px 5px 0px; /* text inside menu width */
float:none;
display:block;
}
.menu li * {
vertical-align: middle;
}
.menu a {
display:block;
}
.toggle-nav {
padding:20px; /* squere element size */
float:left;
display:inline-block;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:4px;
background:#4CAF50;
color:#FFFFFF;
font-size:25px;
transition:color linear 0.15s;
font-weight: bold;
}
.toggle-nav:hover, .toggle-nav.active {
text-decoration:none;
color:#FFFFFF;
}
.band {
position:relative;
top:-72px;
right:-70px;
padding:14px; /* element size */
width: 100%;
float:left;
display:inline-block;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:4px;
background:#4CAF50;
color:#FFFFFF;
font-size:17px;
transition:color linear 0.15s;
font-weight: bold;
}
.ribbon:before {
content: "";
display: block;
}
DEMO HERE

Related

On scrolling down a space can be seen above my sidebar

Open the sidebar by clicking on left of Hakuna-Mipaka and just scroll down you will get the problem.
Whenever I open my sidebar and scrolls down then a space can be seen over my sidebar, i want my sidebar to be stick to the navbar even after I scroll it down.
*{
margin:0;
padding:0;
color:#f2f2f2;
box-sizing:border-box;
font-family: "Montserrat", sans-serif;
text-decoration: none;
list-style: none;
}
.nav{
background: #222222;
padding:10px 40px 10px 70px;
border: 1px solid #000;
border-left: none;
border-right: none;
width: 100%;
}
.nav ul{
display:flex;
list-style: none;
flex-wrap:wrap;
align-items: center;
justify-content: center;
}
.nav ul li.logo{
flex:1;
font-size: 30px;
font-weight: 700;
}
.nav ul div.items{
padding: 0 25px;
display: inline-flex;
}
.nav ul div.items a{
text-decoration: none;
font-size:18 px;
padding:0 12px;
}
.nav ul div.items a:hover{
color:cyan
}
.searchicon{
height:40px;
width:240px;
display:flex;
background: #f2f2f2;
border-radius: 5px;
}
.searchicon input{
height:100%;
width:200px;
border:none;
padding:0 10px;
color:#000;
font-size: 16px;
border-radius: 5px 0 0 5px;
}
.searchicon .icon{
height:100%;
width:40px;
line-height: 40px;
text-align:center;
border:1 px solid #cccccc;
border-radius: 0 5px 5px 0;
cursor: pointer;
}
.searchicon .icon:hover{
background: red;
}
.searchicon .icon span{
color:#222222;
font-size: 18px;
}
.sidebar{
position: fixed;
left:-300px;
width:300px;
height:100%;
background:#042331;
transition:all .5s ease;
}
.sidebar header{
font-size:22px;
color:white;
text-align: center;
line-height: 70px;
background:#063146;
user-select: none;
}
.sidebar ul a{
display:block;
height:100%;
width:100%;
line-height:65px;
font-size:20px ;
color:white;
padding-left: 33px;
box-sizing: border-box;
border-top: 1px solid rgba(255,255,255,0.1);
border-bottom: 1px solid black;
transition:0.4s;
}
ul li:hover a{
padding-left: 43px;
}
.sidebar ul a i{
margin-right: 16px;
}
.sidebar ul .setting-btn.show{
display:block;
}
.sidebar span{
position:absolute;
right:10px;
font-size:25px;
margin-top:18px;
pointer-events: none;
}
#check{
display:none;
}
label #btn, label #cancel{
position: absolute;
cursor: pointer;
background:#042331;
border-radius:3px;
}
label #btn{
left:10px;
top:9px;
font-size: 35px;
color:white;
padding:6px 12px;
transition:all .5s;
}
label #cancel{
z-index:1111;
left:-195px;
top:78px;
font-size:30px;
color:#0a5275;
padding:4px 9px;
transition:all .5s ease;
}
#check:checked ~ .sidebar{
left:0;
position: fixed;
}
#check:checked ~ label #btn{
left:250px;
opacity: 0;
pointer-events: none;
}
#check:checked ~ label #cancel{
left:250px;
}
.parent-container{
display:flex;
flex-direction: column;
align-items: flex-end;
margin-top: 0px;
}
.container1{
width:75%;
height:220px;
border:1px solid black;
margin:20px;
padding:10px;
background-color: #e3e4e6;
color: white;
display:flex;
flex-wrap: wrap;
}
.container1-items{
padding:10px;
margin:20px;
font-size:25px;
}
.container1 .container1-items a{
color:slategray;
padding:5px;
}
.container1 .container1-items i{
color:slategray;
}
.container2{
width:75%;
height:220px;
margin:20px;
color: white;
display:flex;
flex-wrap: wrap;
background-color: #FFF;
}
.container2-items{
width:28%;
height:60px;
padding:15px;
margin-right: 34px;
font-size:25px;
border:1px solid black;
color:black;
}
.container3{
width:75%;
height:450px;
border:1px solid black;
margin:20px;
color: white;
display:flex;
flex-wrap: wrap;
}
.container3-header{
height:50px;
border:1px solid black;
background-color: #394263;
color:#FFF;
font-size:20px;
letter-spacing: 1.2px;
padding:10px;
display:flex;
}
.container3-header-link{
letter-spacing: 1.2px;
font-size: 16px;
color:#1BBAE1;
}
.container3-item1{
border:1px solid black;
width:48%;
height:450px;
margin-right:40px;
}
.container3-item2{
border:1px solid black;
width:48%;
height:450px;
display:flex;
flex-direction:column;
}
.container3-item2-1{
width:100%;
height:220px;
border:1px solid black;
margin-bottom: 10px;
}
.container3-item2-1-1{
height:50px;
border:1px solid black;
background-color: #394263;
}
.container3-item2-2{
width:100%;
height:220px;
border:1px solid black;
}
.container3-item2-2-1{
height:50px;
border:1px solid black;
background-color: #394263;
}
<!DOCTYPE html>
<html>
<head>
<title>Dashboard</title>
<link rel="stylesheet" href="index.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<div class="nav">
<ul>
<li class="logo">Hakuna-Mipaka</li>
<div class="items">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</div>
<li class="searchicon">
<input type="search" placeholder="Search">
<label class="icon">
<span class="fa fa-search"></span>
</label>
</li>
</ul>
</div>
<input type="checkbox" id="check">
<label for="check">
<i class="fas fa-bars" id="btn"></i>
<i class="fas fa-times" id="cancel"></i>
</label>
<div class="sidebar">
<header>My Profile</header>
<ul>
<li><i class="fa fa-qrcode"></i>Dashboard</li>
<li><i class="fa fa-home"></i>Home</li>
<li><i class="fa fa-hamburger"></i>My Shop<span class="fas fa-angle-right"></span></li>
<li><a href="#" class="setting-btn"><i class="fa fa-cog"></i>Settings & privacy<span
class="fas fa-angle-right first"></span></a></li>
<li><a href="#"><i class="fa fa-question-circle"></i>Help & support<span
class="fas fa-angle-right"></span></a> </li>
<li><i class="fa fa-user"></i>About us</li>
<li><i class="fa fa-comment-alt"></i>Feedback</li>
</ul>
</div>
<div class="parent-container">
<div class="container1">
<div class="container1-items"><i class="fas fa-hotel"></i>name</div>
<div class="container1-items"><i class="fas fa-address-card"></i>Address</div>
<div class="container1-items"><i class="fas fa-phone-square-alt"></i>Phone_number</div>
<div class="container1-items"><i class="fas fa-building"></i>City</div>
<div class="container1-items"><i class="fas fa-fax"></i>Pincode</div>
</div>
<div class="container2">
<div class="container2-items">1</div>
<div class="container2-items">2</div>
<div class="container2-items">3</div>
<div class="container2-items">4</div>
<div class="container2-items">5</div>
</div>
<div class="container3">
<div class="container3-item1">
<div class="container3-header">
Your <strong>Events</strong>
</div>
</div>
<div class="container3-item2">
<div class="container3-item2-1">
<div class="container3-item2-1-1">
</div>
</div>
<div class="container3-item2-2">
<div class="container3-item2-2-1">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Open the sidebar by clicking on left of Hakuna-Mipaka and just scroll down you will get the problem.
Whenever I open my sidebar and scrolls down then a space can be seen over my sidebar, i want my sidebar to be stick to the navbar even after I scroll it down.
When opening the menu, the "Hakuna-Mipaka" caption is not obscured by the sidebar box. Everything I changed I marked in the css code.
/*$(window).scroll(function (event) {
var top = $(window).scrollTop();
var height_nav = $(".nav").height();
if (top >= height_nav+22) {
$(".sidebar").css('top', 0);
} else {
$(".sidebar").css('top', height_nav-top+22);
}
});*/
window.addEventListener('scroll', function(e) {
let top = window.pageYOffset;
let height_nav = document.getElementsByClassName('nav')[0].scrollHeight;
let sidebar_top = document.getElementsByClassName('sidebar')[0];
if (top >= (height_nav - 2)) {
sidebar_top.style.top = 0 + 'px' ;
} else {
sidebar_top.style.top = (height_nav - (top - 2)) + 'px' ;
}
});
*{
margin:0;
padding:0;
color:#f2f2f2;
box-sizing:border-box;
font-family: "Montserrat", sans-serif;
text-decoration: none;
list-style: none;
}
.nav{
background: #222222;
padding:10px 40px 10px 70px;
border: 1px solid #000;
border-left: none;
border-right: none;
width: 100%;
}
.nav ul{
display:flex;
list-style: none;
flex-wrap:wrap;
align-items: center;
justify-content: center;
}
.nav ul li.logo{
flex:1;
font-size: 30px;
font-weight: 700;
}
.nav ul div.items{
padding: 0 25px;
display: inline-flex;
}
.nav ul div.items a{
text-decoration: none;
font-size:18 px;
padding:0 12px;
}
.nav ul div.items a:hover{
color:cyan
}
.searchicon{
height:40px;
width:240px;
display:flex;
background: #f2f2f2;
border-radius: 5px;
}
.searchicon input{
height:100%;
width:200px;
border:none;
padding:0 10px;
color:#000;
font-size: 16px;
border-radius: 5px 0 0 5px;
}
.searchicon .icon{
height:100%;
width:40px;
line-height: 40px;
text-align:center;
border:1 px solid #cccccc;
border-radius: 0 5px 5px 0;
cursor: pointer;
}
.searchicon .icon:hover{
background: red;
}
.searchicon .icon span{
color:#222222;
font-size: 18px;
}
.sidebar{
position: fixed;
left:-300px;
width:300px;
/*height:100%;*/
height:100vh; /*add*/
background:#042331;
/*transition:all .5s ease;*/
transition-duration: .5s;
transition-property: left;
}
.sidebar header{
font-size:22px;
color:white;
text-align: center;
line-height: 70px;
background:#063146;
user-select: none;
}
.sidebar ul a{
display:block;
height:100%;
width:100%;
line-height:65px;
font-size:20px ;
color:white;
padding-left: 33px;
box-sizing: border-box;
border-top: 1px solid rgba(255,255,255,0.1);
border-bottom: 1px solid black;
transition:0.4s;
}
ul li:hover a{
padding-left: 43px;
}
.sidebar ul a i{
margin-right: 16px;
}
.sidebar ul .setting-btn.show{
display:block;
}
.sidebar span{
position:absolute;
right:10px;
font-size:25px;
margin-top:18px;
pointer-events: none;
}
#check{
display:none;
}
label #btn, label #cancel{
position: absolute;
cursor: pointer;
background:#042331;
border-radius:3px;
}
label #btn{
left:10px;
top:9px;
font-size: 35px;
color:white;
padding:6px 12px;
transition:all .5s;
}
label #cancel{
z-index:1111;
left:-195px;
top:78px;
font-size:30px;
color:#0a5275;
padding:4px 9px;
transition:all .5s ease;
}
#check:checked ~ .sidebar{
/*position: sticky;*/ /*add*/
/*top: 0;*/ /*add*/
left:0;
/*position: fixed;*/
}
#check:checked ~ label #btn{
left:250px;
opacity: 0;
pointer-events: none;
}
#check:checked ~ label #cancel{
left:250px;
}
.parent-container{
display:flex;
flex-direction: column;
align-items: flex-end;
margin-top: 0px;
}
.container1{
width:75%;
height:220px;
border:1px solid black;
margin:20px;
padding:10px;
background-color: #e3e4e6;
color: white;
display:flex;
flex-wrap: wrap;
}
.container1-items{
padding:10px;
margin:20px;
font-size:25px;
}
.container1 .container1-items a{
color:slategray;
padding:5px;
}
.container1 .container1-items i{
color:slategray;
}
.container2{
width:75%;
height:220px;
margin:20px;
color: white;
display:flex;
flex-wrap: wrap;
background-color: #FFF;
}
.container2-items{
width:28%;
height:60px;
padding:15px;
margin-right: 34px;
font-size:25px;
border:1px solid black;
color:black;
}
.container3{
width:75%;
height:450px;
border:1px solid black;
margin:20px;
color: white;
display:flex;
flex-wrap: wrap;
}
.container3-header{
height:50px;
border:1px solid black;
background-color: #394263;
color:#FFF;
font-size:20px;
letter-spacing: 1.2px;
padding:10px;
display:flex;
}
.container3-header-link{
letter-spacing: 1.2px;
font-size: 16px;
color:#1BBAE1;
}
.container3-item1{
border:1px solid black;
width:48%;
height:450px;
margin-right:40px;
}
.container3-item2{
border:1px solid black;
width:48%;
height:450px;
display:flex;
flex-direction:column;
}
.container3-item2-1{
width:100%;
height:220px;
border:1px solid black;
margin-bottom: 10px;
}
.container3-item2-1-1{
height:50px;
border:1px solid black;
background-color: #394263;
}
.container3-item2-2{
width:100%;
height:220px;
border:1px solid black;
}
.container3-item2-2-1{
height:50px;
border:1px solid black;
background-color: #394263;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Dashboard</title>
<link rel="stylesheet" href="index.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<div class="nav">
<ul>
<li class="logo">Hakuna-Mipaka</li>
<div class="items">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</div>
<li class="searchicon">
<input type="search" placeholder="Search">
<label class="icon">
<span class="fa fa-search"></span>
</label>
</li>
</ul>
</div>
<input type="checkbox" id="check">
<label for="check">
<i class="fas fa-bars" id="btn"></i>
<i class="fas fa-times" id="cancel"></i>
</label>
<div class="sidebar">
<header>My Profile</header>
<ul>
<li><i class="fa fa-qrcode"></i>Dashboard</li>
<li><i class="fa fa-home"></i>Home</li>
<li><i class="fa fa-hamburger"></i>My Shop<span class="fas fa-angle-right"></span></li>
<li><a href="#" class="setting-btn"><i class="fa fa-cog"></i>Settings & privacy<span
class="fas fa-angle-right first"></span></a></li>
<li><a href="#"><i class="fa fa-question-circle"></i>Help & support<span
class="fas fa-angle-right"></span></a> </li>
<li><i class="fa fa-user"></i>About us</li>
<li><i class="fa fa-comment-alt"></i>Feedback</li>
</ul>
</div>
<div class="parent-container">
<div class="container1">
<div class="container1-items"><i class="fas fa-hotel"></i>name</div>
<div class="container1-items"><i class="fas fa-address-card"></i>Address</div>
<div class="container1-items"><i class="fas fa-phone-square-alt"></i>Phone_number</div>
<div class="container1-items"><i class="fas fa-building"></i>City</div>
<div class="container1-items"><i class="fas fa-fax"></i>Pincode</div>
</div>
<div class="container2">
<div class="container2-items">1</div>
<div class="container2-items">2</div>
<div class="container2-items">3</div>
<div class="container2-items">4</div>
<div class="container2-items">5</div>
</div>
<div class="container3">
<div class="container3-item1">
<div class="container3-header">
Your <strong>Events</strong>
</div>
</div>
<div class="container3-item2">
<div class="container3-item2-1">
<div class="container3-item2-1-1">
</div>
</div>
<div class="container3-item2-2">
<div class="container3-item2-2-1">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You must set both x and y offset if you want an element position as fixed. You can fix it by adding top: 0; to #check:checked ~ .sidebar.
Example:
*{
margin:0;
padding:0;
color:#f2f2f2;
box-sizing:border-box;
font-family: "Montserrat", sans-serif;
text-decoration: none;
list-style: none;
}
.nav{
background: #222222;
padding:10px 40px 10px 70px;
border: 1px solid #000;
border-left: none;
border-right: none;
width: 100%;
}
.nav ul{
display:flex;
list-style: none;
flex-wrap:wrap;
align-items: center;
justify-content: center;
}
.nav ul li.logo{
flex:1;
font-size: 30px;
font-weight: 700;
}
.nav ul div.items{
padding: 0 25px;
display: inline-flex;
}
.nav ul div.items a{
text-decoration: none;
font-size:18 px;
padding:0 12px;
}
.nav ul div.items a:hover{
color:cyan
}
.searchicon{
height:40px;
width:240px;
display:flex;
background: #f2f2f2;
border-radius: 5px;
}
.searchicon input{
height:100%;
width:200px;
border:none;
padding:0 10px;
color:#000;
font-size: 16px;
border-radius: 5px 0 0 5px;
}
.searchicon .icon{
height:100%;
width:40px;
line-height: 40px;
text-align:center;
border:1 px solid #cccccc;
border-radius: 0 5px 5px 0;
cursor: pointer;
}
.searchicon .icon:hover{
background: red;
}
.searchicon .icon span{
color:#222222;
font-size: 18px;
}
.sidebar{
position: fixed;
left:-300px;
width:300px;
height:100%;
background:#042331;
transition:all .5s ease;
}
.sidebar header{
font-size:22px;
color:white;
text-align: center;
line-height: 70px;
background:#063146;
user-select: none;
}
.sidebar ul a{
display:block;
height:100%;
width:100%;
line-height:65px;
font-size:20px ;
color:white;
padding-left: 33px;
box-sizing: border-box;
border-top: 1px solid rgba(255,255,255,0.1);
border-bottom: 1px solid black;
transition:0.4s;
}
ul li:hover a{
padding-left: 43px;
}
.sidebar ul a i{
margin-right: 16px;
}
.sidebar ul .setting-btn.show{
display:block;
}
.sidebar span{
position:absolute;
right:10px;
font-size:25px;
margin-top:18px;
pointer-events: none;
}
#check{
display:none;
}
label #btn, label #cancel{
position: absolute;
cursor: pointer;
background:#042331;
border-radius:3px;
}
label #btn{
left:10px;
top:9px;
font-size: 35px;
color:white;
padding:6px 12px;
transition:all .5s;
}
label #cancel{
z-index:1111;
left:-195px;
top:78px;
font-size:30px;
color:#0a5275;
padding:4px 9px;
transition:all .5s ease;
}
#check:checked ~ .sidebar{
left:0;
position: fixed;
top: 0;
}
#check:checked ~ label #btn{
left:250px;
opacity: 0;
pointer-events: none;
}
#check:checked ~ label #cancel{
left:250px;
}
.parent-container{
display:flex;
flex-direction: column;
align-items: flex-end;
margin-top: 0px;
}
.container1{
width:75%;
height:220px;
border:1px solid black;
margin:20px;
padding:10px;
background-color: #e3e4e6;
color: white;
display:flex;
flex-wrap: wrap;
}
.container1-items{
padding:10px;
margin:20px;
font-size:25px;
}
.container1 .container1-items a{
color:slategray;
padding:5px;
}
.container1 .container1-items i{
color:slategray;
}
.container2{
width:75%;
height:220px;
margin:20px;
color: white;
display:flex;
flex-wrap: wrap;
background-color: #FFF;
}
.container2-items{
width:28%;
height:60px;
padding:15px;
margin-right: 34px;
font-size:25px;
border:1px solid black;
color:black;
}
.container3{
width:75%;
height:450px;
border:1px solid black;
margin:20px;
color: white;
display:flex;
flex-wrap: wrap;
}
.container3-header{
height:50px;
border:1px solid black;
background-color: #394263;
color:#FFF;
font-size:20px;
letter-spacing: 1.2px;
padding:10px;
display:flex;
}
.container3-header-link{
letter-spacing: 1.2px;
font-size: 16px;
color:#1BBAE1;
}
.container3-item1{
border:1px solid black;
width:48%;
height:450px;
margin-right:40px;
}
.container3-item2{
border:1px solid black;
width:48%;
height:450px;
display:flex;
flex-direction:column;
}
.container3-item2-1{
width:100%;
height:220px;
border:1px solid black;
margin-bottom: 10px;
}
.container3-item2-1-1{
height:50px;
border:1px solid black;
background-color: #394263;
}
.container3-item2-2{
width:100%;
height:220px;
border:1px solid black;
}
.container3-item2-2-1{
height:50px;
border:1px solid black;
background-color: #394263;
}
<!DOCTYPE html>
<html>
<head>
<title>Dashboard</title>
<link rel="stylesheet" href="index.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<div class="nav">
<ul>
<li class="logo">Hakuna-Mipaka</li>
<div class="items">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</div>
<li class="searchicon">
<input type="search" placeholder="Search">
<label class="icon">
<span class="fa fa-search"></span>
</label>
</li>
</ul>
</div>
<input type="checkbox" id="check">
<label for="check">
<i class="fas fa-bars" id="btn"></i>
<i class="fas fa-times" id="cancel"></i>
</label>
<div class="sidebar">
<header>My Profile</header>
<ul>
<li><i class="fa fa-qrcode"></i>Dashboard</li>
<li><i class="fa fa-home"></i>Home</li>
<li><i class="fa fa-hamburger"></i>My Shop<span class="fas fa-angle-right"></span></li>
<li><a href="#" class="setting-btn"><i class="fa fa-cog"></i>Settings & privacy<span
class="fas fa-angle-right first"></span></a></li>
<li><a href="#"><i class="fa fa-question-circle"></i>Help & support<span
class="fas fa-angle-right"></span></a> </li>
<li><i class="fa fa-user"></i>About us</li>
<li><i class="fa fa-comment-alt"></i>Feedback</li>
</ul>
</div>
<div class="parent-container">
<div class="container1">
<div class="container1-items"><i class="fas fa-hotel"></i>name</div>
<div class="container1-items"><i class="fas fa-address-card"></i>Address</div>
<div class="container1-items"><i class="fas fa-phone-square-alt"></i>Phone_number</div>
<div class="container1-items"><i class="fas fa-building"></i>City</div>
<div class="container1-items"><i class="fas fa-fax"></i>Pincode</div>
</div>
<div class="container2">
<div class="container2-items">1</div>
<div class="container2-items">2</div>
<div class="container2-items">3</div>
<div class="container2-items">4</div>
<div class="container2-items">5</div>
</div>
<div class="container3">
<div class="container3-item1">
<div class="container3-header">
Your <strong>Events</strong>
</div>
</div>
<div class="container3-item2">
<div class="container3-item2-1">
<div class="container3-item2-1-1">
</div>
</div>
<div class="container3-item2-2">
<div class="container3-item2-2-1">
</div>
</div>
</div>
</div>
</div>
</body>
</html>

when I set height to auto it doesnt work on li a

I want to set height of navbar to auto so when someone resizes it height to increase or decrease depends on screen or browser resize but it doesn't work i meant when i resize the ul li a goes down of navbar
#navbar {
width:100%;
height:45px;
background: black;
box-shadow: 2px 5px rgb(252,227,0,.5);
text-align: center;
position: fixed;
top:0;
z-index: 100;
float:top;
}
#navbar ul li {
display: inline;
}
#navbar ul {
margin-top:7px;
display: inline-block;
color:rgb(252,227,0);
font-size:1.2rem;
right:0;
position: fixed;
}
#navbar ul li .a2,.a3,.a4 {
padding-left:105px;
cursor: pointer;
color:rgb(252,227,0);
font-size:1.2rem;
text-decoration: none;
transition: .5s;
}
<div id="navbar">
<ul>
<li><i class="fas fa-bars"></i>Menu</li>
<li><i class="fas fa-shopping-cart"></i>Merchandise</li>
<li><i class="fas fa-info-circle"></i>About band</li>
<li class="drop"><i class="fas fa-music"></i>Listen now...</li>
</ul>
</div>
Solution: -
If you want to set height of navbar auto...So you have to remove height and background from #navbar..
*#navbar {
height:45px;
background: black;
}*
- > Add Background and some padding on ul also set the width 100%.
#navbar ul{
background: black;
padding: 12px 10px;
width: 100%;
}
#navbar {
width: 100%;
min-height: 45px;
background: black;
box-shadow: 2px 5px rgb(252, 227, 0, .5);
text-align: center;
position: fixed;
top: 0;
z-index: 100;
}
#navbar ul li {
display: inline;
}
#navbar ul {
display: block;
margin-top: 7px;
margin-bottom: 7px;
color: rgb(252, 227, 0);
font-size: 1.2rem;
}
#navbar ul li .a2,
#navbar ul li .a3,
#navbar ul li .a4 {
display: inline-block;
padding-left: 105px;
cursor: pointer;
color: rgb(252, 227, 0);
font-size: 1.2rem;
text-decoration: none;
transition: .5s;
}
<div id="navbar">
<ul>
<li><i class="fas fa-bars"></i>Menu</li>
<li><i class="fas fa-shopping-cart"></i>Merchandise</li>
<li><i class="fas fa-info-circle"></i>About band</li>
<li class="drop"><i class="fas fa-music"></i>Listen now...</li>
</ul>
</div>

Content is hidden mobile device

I am building a website using HTML and CSS. The problem:when accessing the website on a mobile device it will not show all the content, basically parts of the text, buttons, fields are hidden.
Please have a look at the pictures I have attached to have a better understanding. Thanks
mobile view
desktop view
/* ==== Google font ==== */
#import url('https://fonts.googleapis.com/css?family=Noto+Serif:400,400italic,700|Open+Sans:300,400,600,700');
/* === fontawesome === */
#import url('font-awesome.css');
/* ==== overwrite bootstrap standard ==== */
#import url('overwrite.css');
#import url('animate.css');
body {
font-family:'Open Sans', Arial, sans-serif;
font-size:14px;
font-weight:300;
line-height:1.6em;
color:#000;
background-color:#fff;
}
hi,h2,h3,h4,h5,h6 {
color:#000;
line-height:1.1em;
}
p {
color:#000;
}
a:hover {
text-decoration:none;
}
.navbar-default {
margin-top:-10px;
background-color: #fff;
border-radius:0;
border:0;
}
.container-fluid > .navbar-header {
margin-right: 30px;
margin-left: 10px;
margin-top:20px;
border-radius:0;
}
.navbar-brand {
float: left;
height: 30px;
padding: 15px 15px;
font-size: 18px;
line-height: 20px;
}
.navbar-brand h1 {
float: left;
line-height:20px;
padding: 20px;
font-size: 30px;
margin-top:-15px;
color:#6D9C91;
}
.navbar-brand h1:hover {
background-color:#fff;
}
.navbar-brand img{
float: center;
width: 100px;
height: 100px;
margin-top: -35px;
}
.menu {
font-size:14px;
float:right;
text-transform:uppercase;
font-weight:500;
}
.menu ul.nav-tabs li {
color:#000;
}
.nav-tabs {
border-bottom: 0;
}
.nav-tabs > li {
float: left;
margin-bottom: 0;
}
.nav-tabs > li > a {
margin-bottom:20px;
margin-right: 20px;
line-height: 1.42857143;
border-bottom: 3px solid transparent;
border-radius:0;
color:#000;
border-top:0;
border-right:0;
border-left:0;
}
.nav-tabs > li > a:hover {
border-color: #eee #eee #6D9C91;
color: #6D9C91;
border-radius:0;
background-color:#f9f9f9;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
color: #fff;
cursor: default;
background-color: #6D9C91;
border: 0;
border-bottom-color: transparent;
cursor:pointer;
}
/*===========================
slider
============================ */
.slider {
position: relative;
margin-top:-20px;
}
.slider img {
width: 100%;
}
#carousel-slider {
position: relative;
}
#carousel-slider .carousel-indicators {
bottom: -40px;
}
#carousel-slider .carousel-indicators li {
border: 1px solid #ffbd20;
}
#carousel-slider a i {
border-radius:50%;
font-size: 30px;
height: 50px;
padding: 10px;
position: absolute;
top: 50%;
width: 50px;
color:#6d9c91;
background:#6d9c91;
color:#fff;
}
#carousel-slider a i:hover {
background:#6d9c91;
color:#fff;
border: 1px solid #6d9c91;
}
#carousel-slider
.carousel-control {
width:inherit;
}
#carousel-slider .carousel-control.left i {
left:50px;
top: calc(50% - 50px);
}
#carousel-slider .carousel-control.right i {
right: 50px;
top: calc(50% - 50px);
}
.carousel-caption {
position: absolute;
right: 15%;
top: calc(50% - 150px);
font-size:40px;
left: 15%;
z-index: 10;
padding-bottom: 0px;
color: #fff;
text-align: center;
}
.carousel-caption h2 {
font-size:40px;
color: #fff;
text-transform: uppercase;
}
.carousel-caption h2 span {
font-size:40px;
color: #fff;
}
.carousel-caption p {
font-size:25px;
margin-top:30px;
margin-bottom:20px;
color:#fff;
padding:10px;
}
#media (max-width: 767px) {
.carousel-caption {
font-size: 18px;
}
.carousel-caption h2, .carousel-caption h2 span, .carousel-caption p {
font-size:18px;
}
}
.carousel-inner .form-inline .form-group button[type="livedemo"]{
padding:20px 60px;
font-size:20px;
background:#6d9c91;
color:#fff;
border-radius:0;
border-color:#fff;
text-transform:uppercase;
}
.carousel-inner .form-inline .form-group button[type="livedemo"]:hover {
color:#fff;
opacity: 0.8;
-webkit-transition: color 300ms, background-color 300ms;
-moz-transition: color 300ms, background-color 300ms;
-o-transition: color 300ms, background-color 300ms;
transition: color 300ms, background-color 300ms;
}
.carousel-inner .form-inline .form-group button[type="getnow"]{
padding:20px 60px;
font-size:20px;
background:#fff;
color:#272727;
border-radius:0;
text-transform:uppercase;
}
.carousel-inner .form-inline .form-group button[type="getnow"]:hover {
color:#fff;
border-color:#fff;
background:#6d9c91;
-webkit-transition: color 300ms, background-color 300ms;
-moz-transition: color 300ms, background-color 300ms;
-o-transition: color 300ms, background-color 300ms;
transition: color 300ms, background-color 300ms;
}
#media (max-width: 991px) {
.sign-up-form .form-control {
margin-bottom: 20px;
}
.sign-up-form .btn {
margin-bottom: 20px;
}
}
#media (min-width: 768px) {
.sign-up-form .form-control {
width: 350px;
}
}
.content {
background-color:#f9f9f9;
padding:50px;
text-align:center;
margin-top: -50px;
}
.content span {
color: #154360;
}
.content p {
margin-top:50px;
margin-bottom:30px;
color: #0b5345 ;
}
.breadcrumb {
padding:30px;
}
.breadcrumb h4 {
color:#6D9C91;
text-transform:uppercase;
text-align:center;
font-size:20px;
}
.breadcrumbs {
margin-top:30px;
margin-bottom:30px;
padding:30px;
}
.breadcrumbs h4 {
color:#6D9C91;
text-transform:uppercase;
text-align:center;
font-size:20px;
}
.contents {
margin-top:10px;
}
.contents p {
margin-top:30px;
margin-bottom:30px;
}
.bg {
margin-top:10px;
}
.recent button.btn-primarys h3 {
padding:10px;
font-size:30px;
text-decoration:0;
color:#fff;
}
.align-center {
text-align:center;
background-color:#fff;
color:#000;
padding:60px;
margin-top:30px;
margin-bottom:30px;
}
.align-center p {
margin-top:10px;
margin-bottom:30px;
}
.align-center:hover {
border-bottom: 30px solid transparent;
border-color:#6D9C91;
margin-top:-5px;
-webkit-box-shadow: 1px 2px 2px 4px rgba(204,204,204,1);
-moz-box-shadow: 1px 2px 2px 4px rgba(204,204,204,1);
box-shadow: 1px 2px 2px 4px rgba(204,204,204,1);
}
.boxs {
margin-top:30px;
}
.icon {
margin-top:30px;
margin-bottom:30px;
color:#6D9C91;
}
.ficon i {
color:#6D9C91;
}
/* --- Feature --- */
.feature {
background-color:#f6f6f6;
}
.feature p {
margin-top:-30px;
margin-bottom:30px;
padding:30px;
text-align: center;
font-family: proxima-nova;
font-size: 15px;
}
.feature h1{
font-family: proxima-nova;
font-size: 25px;
}
/* --- Portfolio --- */
.col-md-6{
text-align: center;
color: black;
margin-bottom: 10px;
}
.col-md-4{
text-align: center;
color: black;
margin-bottom: 10px;
}
}
.portfolios {
text-align:center;
margin-top:10px;
margin-bottom:30px;
background-color:#f6f6f6;
padding:90px 0 90px 0;
}
.portfolio {
margin-top:5px;
}
.list-group {
padding-left: 0;
margin-top:50px;
}
.list-group-item {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #eee;
border: 1px solid #000;
}
.list-group-item.active {
background-color:#eee;
border-color:#eee;
color:#6D9C91;
}
.list-group-item.active:hover {
background-color:#6D9C91;
border-color:#6D9C91;
}
.list-group-item.active p.list-group-item-text {
color:#000;
}
.image {
margin-top:80px;
}
/* --- Blog --- */
.page-header {
padding-bottom: 9px;
margin: 20px 0 20px;
border-bottom: 1px solid #eee;
border-top: 1px solid #eee;
border-right: 1px solid #eee;
border-left: 1px solid #eee;
margin-top:50px;
}
.blog h5 {
color:#000;
margin-left:20px;
text-transform:uppercase;
margin-top:10px;
}
.blog img {
margin-top:10px;
margin-bottom:10px;
}
.blog h3,p {
color:#000;
padding:15px;
}
.blog .ficon {
text-align:center;
margin-bottom:30px;
}
.form-search .form-control {
margin-top:20px;
}
.media h4 {
color:#000;
margin-bottom:30px;
}
.media-body .ficon {
float:right;
margin-right:30px;
}
.media-body h4 {
color:#000;
}
.media-list {
padding-left: 0;
list-style: none;
margin-left:90px;
margin-bottom:20px;
}
.panel {
margin-top:20px;
margin-bottom: 20px;
background-color: #fff;
border:#eee 1px solid transparent;
border-radius: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.panel-heading {
padding: 10px 15px;
border-bottom: 1px solid transparent;
border-top-left-radius: 0;
border-top-right-radius: 0;
text-align:center;
}
.panel-default {
border-color: #eee;
border-bottom-color:#eee;
}
.panel-default > .panel-heading {
color: #fff;
background-color: #6D9C91;
border-color: #eee;
}
.panel-default > .panel-heading + .panel-collapse > .panel-body {
border-top-color: #eee;
border-bottom-color:#eee;
}
.panel-default > .panel-footer + .panel-collapse > .panel-body {
border-bottom-color: #eee;
}
.list-group h5 {
color:#fff;
text-align:center;
margin-bottom:-5px;
background:#50c0e9;
padding:15px 20px;
}
.list-group-item {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid #eee;
color:#000;
}
.list-group-item:first-child {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.list-group-item:last-child {
margin-bottom: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.list-group-item > .badge {
float: right;
border-radius:0;
background-color:#fff;
color:#000;
}
.popular-tags h5 {
color:#6D9C91;
margin-bottom:30px;
text-align:center;
}
.popular-tags ul.tags {
list-style:none;
margin:0;
margin-left: 0;
padding-left:0;
}
.popular-tags ul.tags li {
margin:0 5px 15px 0;
display:inline-block;
}
.popular-tags ul.tags li a {
background:#eee;
color:#333;
padding:5px 10px;
}
.popular-tags ul.tags li a:hover {
text-decoration:none;
color:#fff;
background-color:#6D9C91;
}
/* --- Contact area --- */
form {
margin-top:50px;
margin-bottom:50px;
}
label {
color:#6D9C91;
font-size:14px;
}
.form-group button {
background-color:#6D9C91;
color:#fff;
}
.form-control {
border-radius:0;
}
address {
text-align:center;
font-size:15px;
text-transform:uppercase;
padding-bottom:30px;
color:#333;
}
address br {
margin-top:10px;
}
/* --- Map --- */
.map{
position:relative;
margin-top:50px;
margin-bottom:40px;
}
/* google map */
#google-map{
position:relative;
height: 350px;
}
.widget {
margin-top:10px;
padding:50px;
text-align:center;
}
.widget p,ul {
margin-top:30px;
}
.link-list ul,li,a {
color:#000;
list-style:none;
}
.copyright {
text-align:center;
}
.copyright a {
color:#fff;
}
.sub-footer {
background-color: #6D9C91;
}
ul.social-network {
list-style:none;
margin-top:30px;
text-align:center;
}
ul.social-network li {
display:inline;
margin: 0 5px;
color:#fff;
}
ul.social-network li a {
color:#fff;
}
.credits {
padding-bottom: 15px;
}
.validation {
color: red;
display:none;
margin: 0 0 20px;
font-weight:400;
font-size:13px;
}
#sendmessage {
color: green;
border:1px solid green;
display:none;
text-align:center;
padding:15px;
font-weight:600;
margin-bottom:15px;
}
#errormessage {
color: red;
display:none;
border:1px solid red;
text-align:center;
padding:15px;
font-weight:600;
margin-bottom:15px;
}
#sendmessage.show, #errormessage.show, .show {
display:block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kafeyz</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/responsive-slider.css" rel="stylesheet">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<div class="row">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<div class="navbar-brand">
<img src="img/logo.png" alt="logo"/>
</div>
</div>
<div class="menu">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Coffee Shops</li>
<li role="presentation">Coffee Lovers</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</header>
<div class="slider no-padding-bottom">
<div id="about-slider">
<div id="carousel-slider" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<div class="carousel-inner">
<div class="item active">
<img src="img/slide1.jpeg" class="img-responsive" alt="">
<div class="carousel-caption no-padding-bottom">
<div class="wow fadeInUp" data-wow-offset="0" data-wow-delay="0.3s">
<h2><span>Take your business to the next level</span></h2>
</div>
<div class="col-md-10 col-md-offset-1">
<div class="wow fadeInUp" data-wow-offset="0" data-wow-delay="0.6s">
<p>A unified platform with everything your coffee shop needs</p>
<p>• mobile app • supplies • marketing • training • staffing solutions</p>
</div>
</div>
<div class="wow fadeInUp" data-wow-offset="0" data-wow-delay="0.9s">
<form class="form-inline margin-top sign-up-form">
<input id="email_intro" type="email" placeholder="enter email address" class="form-control">
<input id="submit_intro" type="submit" value="Get started for FREE" class="btn btn-primary">
</form>
</div>
</div>
</div>
</div>
</div>
<!--/#carousel-slider-->
</div>
<!--/#about-slider-->
</div>
<!--/#slider-->
<div class="content">
</div>
<div class="feature">
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="img/1.jpeg" class="img-responsive" alt="" />
<h1>Mobile Ordering App</h1>
<p>Improve your customers experience with an intuitive mobile ordering app
that will allow them to order their drink and food in advance.
Reduce queues, serve more clients and increase your revenue.
</p>
</div>
<div class="col-md-6">
<img src="img/4.jpeg" class="img-responsive" alt="" />
<h1>Supplies & Equipment</h1>
<p>All the coffee shop supplies you need to offer delicious beverages any time of the day to your customers.
Order products like milk, pastries, and paper goods at competitive prices, with just one invoice.
</p>
</div>
<div class="col-md-6">
<img src="img/5.jpeg" class="img-responsive" alt="" />
<h1>Digital Loyalty Program</h1>
<p>You cannot use paper cards to communicate with customers.
With your digital loyalty program, you now have a direct communication channel.
Send a push notification to your customers and encourage them to visit you again!
</p>
</div>
<div class="col-md-6">
<img src="img/6.jpeg" class="img-responsive" alt="" />
<h1>Customized Mobile Marketing</h1>
<p> You now have access to a wealth of data, allowing you to further tailor your marketing campaigns,
offers, and the entire customer experience to each individual.
</p>
</div>
<div class="col-md-6">
<img src="img/3.jpeg" class="img-responsive" alt="" />
<h1>Staffing Solutions</h1>
<p> Book trained & experienced staff for temp or permanent jobs. Access professional training courses
that will help your staff to maintain the quality of your service to a very high standard.
</p>
</div>
<div class="col-md-6">
<img src="img/2.jpeg" class="img-responsive" alt="" />
<h1>Workspace Bookings</h1>
<p>The rise of the freelance and gig economy is bringing more and more people to coffee shops, where they set up a virtual office to work.
Add a new revenue stream to your business by offering workspace bookings at your café.
</p>
</div>
</div>
</div>
</div>
<!--start footer-->
<footer>
<div class="sub-footer">
<div class="container">
<div class="row">
<div class="col-lg-12">
<ul class="social-network">
<li><i class="fa fa-facebook fa-1x"></i></li>
<li><i class="fa fa-twitter fa-1x"></i></li>
<li><i class="fa fa-linkedin fa-1x"></i></li>
<li><i class="fa fa-pinterest fa-1x"></i></li>
<li><i class="fa fa-google-plus fa-1x"></i></li>
</ul>
</div>
<div class="col-lg-12">
<div class="copyright">
<p>©2018 Kafeyz - All rights reserved.</p>
<div class="credits">
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
<!--end footer-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- begin snippet: js hide: false console: true babel: false -->
<script src="js/jquery-2.1.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/responsive-slider.js"></script>
<script src="js/wow.min.js"></script>
<script>
wow = new WOW({}).init();
</script>
</body>
</html>

Alignment issues css

I have alignemet issues between caret and the vertical menu, please any help.. i tried float: , position .. nothing work with caret.
The caret should be at the top of the page.
How can I change the background of the caret like to be like lines similar to mobile application.
<style>
nav {
/* Repeating background image */
background: url(http://weebtutorials.com/wp-content/uploads/2012/11/a.png);
width:210px;
margin:20px;
}
nav ul {
/* Removes bullet points */
list-style:none;
margin:0;
padding:0;
}
nav ul li {
/* Any child positioned absolutely will be positioned relative to this */
position:relative;
}
nav a {
color:#e8e8e8;
padding:12px 0px;
/* Fill all available horizontal space */
display:block;
/* Remove underline */
text-decoration:none;
/*
New CSS3 animations:
apply transition to background property, taking 1s to change it
*/
transition:background 1s;
-moz-transition:background 1s;
-webkit-transition:background 1s;
-o-transition:background 1s;
font-family:tahoma;
font-size:13px;
text-transform:uppercase;
padding-left:20px;
}
nav a:hover {
/*
RGBA background for t
background: RGBA(255,255,255,0.05);
color:#fff;
}
nav a:hover span {
background: #7d2c41;
transform:rotate(90deg);
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
}
nav ul li:hover ul {
display:block;
}
nav ul ul {
position:absolute;
left:210px;
top:0;
border-top:1px solid #e9e9e9;
display:none;
}
nav ul ul li {
width:200px;
background:#f1f1f1;
border:1px solid #e9e9e9;
border-top:0;
}
nav ul ul li a {
color:#a8a8a8;
font-size:12px;
text-transform:none;
}
nav ul ul li a:hover {
color:#929292;
}
nav span {
width:12px;
height:12px;
background:#fff;
display:inline-block;
float:left;
margin-top:3px;
margin-right:20px;
position:relative;
transition:all 0.5s;
-moz-transition:all 0.5s;
-o-transition:all 0.5s;
-webkit-transition:all 0.5s;
}
nav span:before {
content:"";
width:12px;
height:2px;
background:#3a3b3b;
position:absolute;
left:0px;
top:5px;
}
nav span:after {
content:"";
width:2px;
height:12px;
background:#3a3b3b;
position:absolute;
left:5px;
position:top;
}
.caret-right {
border-left: 20px solid transparent;
border-right:20px solid transparent;
border-top: 20px solid #fff;
margin-right: 160px;
margin-top: 0px"
position: top;
float:right;
display: inline-block;
}
</style>
<head>
<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>
</head>
<body>
<nav>
<ul>
<li class="current"><span></span> Home </li>
<li> <span></span>AI assisted backtesting
</li>
<li> <span></span>Best stocks to trade today </li>
<li> <span></span>Get free data </li>
</ul>
</nav>
<div class="btn-group cust-dropdown pull-right">
<button type="button" class="btn btn-default dropdown-toggle cust-dropdown" data-toggle="dropdown"><span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>About us</li>
<li>Documentation
</li>
<li>Pricing</li>
<li>Contact us</li>
<li>Register</li>
</ul>
</div>
you have syntax error on margin top semicolon & quote mark and position value
this is your code
.caret-right {
border-left: 20px solid transparent;
border-right:20px solid transparent;
border-top: 20px solid #fff;
margin-right: 160px;
margin-top: 0px"
position: top;
float:right;
display: inline-block;
}
should be
.caret-right {
border-left: 20px solid transparent;
border-right:20px solid transparent;
border-top: 20px solid #fff;
margin-right: 160px;
margin-top: 0px;
position: absolute;
top: 0;
right: 0;
display: inline-block;
}
You can play with this and come up with a design that fits your site..
https://jsfiddle.net/Hastig/u00v1yer/
Hamburger positioned with absolute.
Icon within hamburger also positioned/centered with absolute.
Make sure hanmurger is within a container that has at least position:relative;
Control the 3 bars width by adjusting their margin.
.hamburglar {
position: absolute;
top: 0; right: 0;
display: flex;
align-items: center;
flex-direction: column;
width: 40px;
height: 40px;
background-color: black;
cursor: pointer;
}
.hamburglar-line {
display: flex;
flex: 1;
width: 90%;
margin: 6px 0;
background-color: hsla(0, 0%, 50%, 0.5);
}
.hamburglar-line:nth-child(2) {
margin: 0;
}
.hamburglar .fa {
position: absolute;
top: 50%; left: 50%;
transform: translateY(-50%) translateX(-50%);
font-size: 36px;
color: hsla(0, 0%, 80%, 0.7);
}
.hamburglar .hamburglar-line,
.hamburglar .fa { transition: all 0.2s linear; }
.hamburglar:hover .hamburglar-line { background-color: hsla(0, 0%, 50%, 1); }
.hamburglar:hover .fa { color: hsla(0, 0%, 80%, 1); }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="hamburglar">
<div class="hamburglar-line"></div>
<div class="hamburglar-line"></div>
<div class="hamburglar-line"></div>
<i class="fa fa-caret-down"></i>
</div>
To move the button to the top right, you can:
.cust-dropdown{
position:absolute;
top:10px;
right:10px;
}
And now to add the burger menu icon, your button would look like:
<button type="button" class="btn btn-default dropdown-toggle cust-dropdown" data-toggle="dropdown">
<i class="glyphicon glyphicon-menu-hamburger"></i>
</button>
Please make a working fiddle. Or you can try this,
.caret-right{
position: absolute;
right: 0;
top: 0;
}

CSS submenu going outside container

I have a CSS menu with a submenu. Everything works fine, but the submenu on my right menu item goes outside the container. I'm wondering if there is a way to prevent this.
Here is what it's doing:
http://s28.postimg.org/dbl1vmtql/dropdown.png
Here is my code:
<body>
<div class="container">
<div class="header">
</div>
<div class="nav">
<ul id="nav">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-css3"></i> CSS</li>
<li><i class="fa fa-list-ul"></i> XML</li>
<li><i class="fa fa-pencil-square-o"></i> Form</li>
<li><i class="fa fa-globe"></i> Connected Media
<ul>
<li><i class="fa fa-comments"></i> Discussion</li>
<li><i class="fa fa-street-view"></i> Google Maps</li>
<li><i class="fa fa-wordpress"></i> WordPress</li>
</ul>
</li>
<li><i class="fa fa-html5"></i> HTML 5</li>
<li><i class="fa fa-search"></i> Research
<ul>
<li><i class="fa fa-th-large"></i> Web Page Layout</li>
<li><i class="fa fa-copyright"></i> Copyright & Privacy</li>
<li><i class="fa fa-list-alt"></i> References</li>
</ul>
</li>
</ul>
</div>
<div class="content">
</div>
</div>
</body>
And here is my CSS;
body {
background: -webkit-linear-gradient(#E1E1E1, #D6D6D6); /* For Safari 5.1 to 6.0 */
background: -moz-linear-gradient(#E1E1E1, #D6D6D6); /* For Firefox 3.6 to 15 */
background: linear-gradient(#E1E1E1, #D6D6D6); /* Standard syntax */
background-attachment: fixed;
margin: 0px 0px 0px 0px;
font-family: Verdana;
font-size: 14px;
color: #000000;
}
.container {
width:920px;
margin: 0 auto;
-webkit-box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.75);
box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.75);
}
.content {
background-color: #F6F6F6;
padding: 5px;
height: 910px;
margin-left: auto;
margin-right: auto;
}
.header {
background-color: #F6F6F6;
padding: 5px;
margin-left: auto;
margin-right: auto;
height: 200px;
border-bottom: 1px solid #454545;
}
.nav {
background-color: #CCC;
width: 920px;
height: 30px;
border-bottom: 1px solid #454545;
}
.nav ul {
list-style:none;
display: inline;
-webkit-padding-start: 0px;
line-height: 30px;
}
.nav ul li {
float:left;
}
.nav ul li a {
padding: 6px 28px 6px 28px;
text-decoration: none;
font-weight: bold ;
color: #000;
letter-spacing: -0.5px;
-webkit-transition: background-color 1s;
-moz-transition: background-color 1s;
transition: background-color 1s;
}
.nav ul li a:hover {
background-color:#DFDFDF;
color: #272727;
padding: 6px 28px 6px 28px;
}
.nav ul li a.active {
background: #DFDFDF;
padding: 6px 28px 6px 28px;
}
ul#nav ul {
display: none;
}
ul#nav li:hover > ul {
position: absolute;
display: block;
height: 30px;
background-color: #CCC;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
border-left: 1px solid #000;
}
ul#nav li:hover > ul li a {
float: right;
line-height: 30px;
color: #000000;
text-decoration: none;
padding: 0 30px 0 0;
}
ul#nav li:hover > ul li a:hover {
color: #000000;
text-decoration: none;
}
You need to set the main content container with:
position: relative;
And then style this last submenu with:
position: absolute;
right: 0;