Want to Gather all nav tabs into icon on page zoom

Want to Gather all nav tabs into icon on page zoom - javascript

My navigation bar working perfectly but when i zoom it so it is disappear.
i want when certain zoom will be done so all the nav link should bind into one icon. how can i achieve it, please help
My html
<!DOCTYPE html>
<html>
<head>
<title>dasdasd</title>
<link rel="stylesheet" type="text/css" href="/css/header.css">
</head>
<header>
<body>
<nav>
<div class="box_one">
<a href="/index">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABaCAMAAACFWShxAAABC1BMVEX////oRDs6p1ZGiPH6uy17pvQ/hfFglvImevDoQjnu8/7nOjAso0znOC4doEPnNSozpVH+9uX4/Pnynpr6uST0rqr++evzp6NnuHr9uBi7zvn97eznPTz509HA4Mj4y8nU4vv82ZHqWlK43cHm8+ntd3Lwj4r+9/dTj/KLx5nmLSGt17ecz6gyf/DG2fmux/jb7t+XufEznXZRsGZ2voYipVmbsEP9y2fd6fzJtjmGrfVlqk/uui5Sp0/Wvk797MmStfY5h949pG9BnpI/lbFKk9JHlrtAoIg4qUTtbmj73+DpUEjveDTrXzj3ri71ni/1qnP2vbrR37z+xEr846y5tDzguTL80oHzkDLdnbSbAAADcklEQVRoge2WWVvaQBSGw4DBMRMyhlCCKGhkFzSWuNRq7V7RtpZql///SzoJESYLSYYkPr3Ie6UPgZdz5ptz4LiMjIyMjASp70wrHZNypXnbTdPUbXY0KEqiKBBE8gecVHfSMXZ3OneiCGGOAgqioJVvk3dNJ6SUnBcIJaG9k6xsOhEFH5UtFGE7wfrq7YFfWbRPqCR1ftOcGOiyfFK7noSr2wkpzEbMNROQTaQoLqu8SlxZXQvv4tw2jS1bHkW3bBC3k10GGYx9bG2fNkIyQCSCINDhid9GruwNCJkcWrtTrVSqnbY5yJKrrAnd0YcDbTGGu/VmJze7HVCKn34NuuvSmq6JUa9CIZHKuLLr0KBY9plOtxMpfhrJx7j6KGhLJn05gTZyP0SXbOkcTGD+b9buc9uRZEmwpxS+f5vr4F2qMrlg8nX7KSAJb2cX1zVLdz9LilROVcb9USzbrJvwLtWfchw3K83u5iD24grmemEr/E29tEfKVrivpiubH5tF7drz+sZaIBdstjPaVpC9tnU+kA0WmfxAuZQz7wMb6/kg+HMW2wu6stoeu22XxbbpOLZHZtvo8Dlt/FZmmxE7JWy2y3g3gC0l3APdygf22naZbI5Zomz62VzTw2ljut3m74SFTPnpteWLLnoOG9PkojeO8vtKjfCOY6o6vscko7ap8guDkh7+hiJtW2O0zQ/u9AQAHF7cLn1woyNG22ydKpeviQwA1Ah7/oK2MUaS3DjTprwCM/C4Ffz4uUNWZAsJZ7VSOT2xbQAZwU+vOWxvWWUklXYXbd0w6OGjkSP/bJPE4s0VJQvWHTplrPk3aSDgAPW9P09mbDkHCXMiLQzs0qm+104+ds3MHnNGTHRXcQDjobe8xvhlj49fGscN3TpQAkOdFrb21RJG4BN1bnxxNRknq9itAwir/X29JcstvTE0yL9mzejjYgcwrjb6qwOvjnx2yQbNX735kudXvmtz3LlcCnr/zuomn18pIk+6UkQdvvk8Yl9sK+sA+sDzI7ad7aNDPme3rJsrJ2SODiIeHsIRlm4oshFJh9SQrRSVAxzqwyWfObMiLcPv5lGuJTN0VRoGWlofKqn7iRVmo/eBXzwxwkYjaZeJ3CCDESFsOzHGpF71IKFw+An1g746tmTjsUHmcxpVeaSEZ9BkZGRk/Bf8AxJzWnduI/qHAAAAAElFTkSuQmCC" alt="logo" title="logo" width="90px">
</a>
</div>
<div class="box_two">
<ul>
<li>Home</li>
<li>About Us </li>
<li>City </li>
<li>How it works </li>
<li> Contact </li>
</ul>
</div>
<!-- <div class="box_three">
<ul>
<li><img src="img/login.png" width="30px" alt="login" title="login" align="left"> Login</li>
<li><img src="img/signup.png" width="30px" alt="signup" title="signup" align="left"> Sign Up</li>
</ul>
</div>
-->
</nav>
</header>
My CSS
body{margin:0px;}
nav{font-family: calibri;width: 100%; min-height: 80px; max-height: 140px; background: #3a3a3a; color: white;}
.box_one{width: 180px;float: left;height: 80px;margin-left: 30px;}
.box_two{font-size: 18px;width: 70%;float: left;height: 80px;margin-left: 8%;}
.box_three{font-size: 18px;width: 320px;float: right;height: 80px;margin-left: 10px;}
nav a{text-decoration:none;color: white;}
nav li
{
margin-top: 26px;
display:block;
float:left;
min-height:150px;
max-height:200px;
padding: 5px;
list-style: square outside none;
padding-left: 1em;
text-indent: -.7em;
}
.box_two li
{
min-width:60px;
max-width:120px;
}
.box_three li
{
width:93px;
}
nav ul {
list-style: none;
padding:0;
margin:0;
}
For example i have uploaded code on jsfiddle please check
When you will zoom out so it is showing on jsfiddle

You should you bootstrap for this, It will make your life easy. If you don't want to use bootstrap you have to use CSS media queries for all resolution which is not cool. I have created an example of menu bar using bootstrap for you here it is. for more info refer getBootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Navbar Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<!-- Static navbar -->
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div><!--/.container-fluid -->
</nav>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://getbootstrap.com/dist/js/bootstrap.min.js"></script>
</body>
</html>
----- UPDATE -----
You have to modify media queries as per you requirement currently I have adjusted menu so it will be visible even if you zoom it.
<!DOCTYPE html>
<html>
<head>
<title>dasdasd</title>
<link rel="stylesheet" type="text/css" href="/css/header.css">
<style type="text/css">
body{margin:0px;}
nav{font-family: calibri;width: 100%; min-height: 80px; max-height: 140px; background: #3a3a3a; color: white;}
.box_one{width: 180px; float: left; height: 80px;margin-left: 30px;}
.box_two{font-size: 18px; float: left;height: 80px;}
.box_three{font-size: 18px;width: 320px;float: right;height: 80px;margin-left: 10px;}
nav a{text-decoration:none;color: white;}
nav li
{
margin-top: 26px;
display:block;
float:left;
padding: 5px;
padding-left: 1em;
}
.box_three li
{
width:93px;
}
nav ul {
list-style: none;
padding:0;
margin:0;
}
#media (max-width: 991px) {
header{ width:100% !important;}
}
#media (max-width: 767px) {
header{ width:100% !important;}
.box_one{width: 100px; margin-left: 5px;}
#media (max-width: 480px) {
.button05 {margin: 10px 0 0;width: 100%;}
.box_one{width: 100px; margin-left: 0px;}
.box_two {
font-size: 12px;
float: none;
height: auto;
}
}
#media (max-width: 375px) {
header{ width:100% !important;}
.box_one{width: 100px; margin-left: 0px;}
.box_two {
font-size: 12px;
float: none;
height: auto;
}
nav li {
padding: 5px;
padding-left: 5px;
font-size: 10px;
}
}
</style>
</head>
<body>
<header>
<nav>
<div class="box_one">
<a href="/index">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG0AAABaCAMAAACFWShxAAABC1BMVEX////oRDs6p1ZGiPH6uy17pvQ/hfFglvImevDoQjnu8/7nOjAso0znOC4doEPnNSozpVH+9uX4/Pnynpr6uST0rqr++evzp6NnuHr9uBi7zvn97eznPTz509HA4Mj4y8nU4vv82ZHqWlK43cHm8+ntd3Lwj4r+9/dTj/KLx5nmLSGt17ecz6gyf/DG2fmux/jb7t+XufEznXZRsGZ2voYipVmbsEP9y2fd6fzJtjmGrfVlqk/uui5Sp0/Wvk797MmStfY5h949pG9BnpI/lbFKk9JHlrtAoIg4qUTtbmj73+DpUEjveDTrXzj3ri71ni/1qnP2vbrR37z+xEr846y5tDzguTL80oHzkDLdnbSbAAADcklEQVRoge2WWVvaQBSGw4DBMRMyhlCCKGhkFzSWuNRq7V7RtpZql///SzoJESYLSYYkPr3Ie6UPgZdz5ptz4LiMjIyMjASp70wrHZNypXnbTdPUbXY0KEqiKBBE8gecVHfSMXZ3OneiCGGOAgqioJVvk3dNJ6SUnBcIJaG9k6xsOhEFH5UtFGE7wfrq7YFfWbRPqCR1ftOcGOiyfFK7noSr2wkpzEbMNROQTaQoLqu8SlxZXQvv4tw2jS1bHkW3bBC3k10GGYx9bG2fNkIyQCSCINDhid9GruwNCJkcWrtTrVSqnbY5yJKrrAnd0YcDbTGGu/VmJze7HVCKn34NuuvSmq6JUa9CIZHKuLLr0KBY9plOtxMpfhrJx7j6KGhLJn05gTZyP0SXbOkcTGD+b9buc9uRZEmwpxS+f5vr4F2qMrlg8nX7KSAJb2cX1zVLdz9LilROVcb9USzbrJvwLtWfchw3K83u5iD24grmemEr/E29tEfKVrivpiubH5tF7drz+sZaIBdstjPaVpC9tnU+kA0WmfxAuZQz7wMb6/kg+HMW2wu6stoeu22XxbbpOLZHZtvo8Dlt/FZmmxE7JWy2y3g3gC0l3APdygf22naZbI5Zomz62VzTw2ljut3m74SFTPnpteWLLnoOG9PkojeO8vtKjfCOY6o6vscko7ap8guDkh7+hiJtW2O0zQ/u9AQAHF7cLn1woyNG22ydKpeviQwA1Ah7/oK2MUaS3DjTprwCM/C4Ffz4uUNWZAsJZ7VSOT2xbQAZwU+vOWxvWWUklXYXbd0w6OGjkSP/bJPE4s0VJQvWHTplrPk3aSDgAPW9P09mbDkHCXMiLQzs0qm+104+ds3MHnNGTHRXcQDjobe8xvhlj49fGscN3TpQAkOdFrb21RJG4BN1bnxxNRknq9itAwir/X29JcstvTE0yL9mzejjYgcwrjb6qwOvjnx2yQbNX735kudXvmtz3LlcCnr/zuomn18pIk+6UkQdvvk8Yl9sK+sA+sDzI7ad7aNDPme3rJsrJ2SODiIeHsIRlm4oshFJh9SQrRSVAxzqwyWfObMiLcPv5lGuJTN0VRoGWlofKqn7iRVmo/eBXzwxwkYjaZeJ3CCDESFsOzHGpF71IKFw+An1g746tmTjsUHmcxpVeaSEZ9BkZGRk/Bf8AxJzWnduI/qHAAAAAElFTkSuQmCC" alt="logo" title="logo" width="90px">
</a>
</div>
<div class="box_two">
<ul>
<li>Home</li>
<li>About Us</li>
<li>City</li>
<li>How it works</li>
<li>Contact</li>
</ul>
</div>
</nav>
</header>

Related

How to move nav-link to the right in bootstrap4?

I would like to ask how to move nav-link to the right? becuase I try it like float: right or margin left:auto,it will lead hamburger menu to the middle. I want the hamburger menu and navlink all to right side. Besides, when I minimize my screen smaller, the hamburger menu and navlink are fine they are in right side, just when I minimize my screen bigger, the nav-link is at the left side. Also, when I minimize the screen smaller, I click the dropdown menu, the navbar become bigger and the dropdown menu is inside the navbar which lead the navbar bigger. I want the dropdownmenu outside the navbar. I try to use position: fixed, position :relative and position absolute, it doesn't fix it. Therefore, I would like to ask is there any solutions about. So, I can fix it. Thank you.
This my code below:
<!DOCTYPE html>
<html lang="en">
<head>
<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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<!--Icon-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ"
crossorigin="anonymous">
<title>Admin Dashboard</title>
<style>
/*
* Sidebar
*/
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 100; /* Behind the navbar */
padding: 48px 0 0; /* Height of navbar */
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}
#media (max-width: 767.98px) {
.sidebar {
top: 5rem;
}
}
.sidebar-sticky {
position: relative;
top: 0;
height: calc(100vh - 48px);
padding-top: .5rem;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}
#supports ((position: -webkit-sticky) or (position: sticky)) {
.sidebar-sticky {
position: -webkit-sticky;
position: sticky;
}
}
.sidebar .nav-link {
font-weight: 500;
color: #333;
}
.sidebar .nav-link.active {
color: #021B4D;
}
.sidebar .nav-link:hover {
color: #FFDB1A !important;
}
/*Navbar*/
.navbar{
background-color:#021B4D !important;
}
.navbar-brand {
padding-top: .75rem;
padding-bottom: .75rem;
font-size: 1rem;
margin-left:20px;
}
.white-text{
color:#fff;
}
.dropdown-menu a:hover{
background-color:#021B4D;
color:#fff;
}
</style>
</head>
<body>
<nav class=" navbar navbar-expand-lg sticky-top ">
<a class="navbar-brand" href="">
<img src="eGrocery_SDP(Logo).jpeg" width="50" height="40">
</a>
<button class=" navbar-toggler navbar-toggler-right " type="button" data-toggle="collapse" data-
target="#sidebarMenu"
aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation" style="margin-
left:auto;"><span class="white-text"><i
class="fas fa-bars fa-1x"></i></span></button>
<ul class="navbar-nav " >
<li class="nav-item dropdown " >
<a class="nav-link dropdown-toggle"data-toggle="dropdown" data-target="dropdown-target" href="#"><i
class="far fa-user-circle" style="font-size:40px;color:#fff;"></i></a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
Account
<div class="dropdown-divider"></div>
Logout
</div>
</li>
</ul>
</nav>
<div class="container-fluid">
<div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div class="sidebar-sticky pt-5">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">
<span data-feather="home"></span>
Dashboard <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file"></span>
Products
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="shopping-cart"></span>
Orders
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="users"></span>
Manage Customers
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="bar-chart-2"></span>
Manage Staff
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="layers"></span>
Sales Reports
</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
</body>
</html>

To fix the user icon always to the right, I added this css:
a.nav-link.dropdown-toggle{
text-align: right;
}
Then on large screen to keep your ul always to the right I add BS4 class ml-lg-auto that will add margin au to the left for screen over lg break points.
For having hambuger align right add class ml-left to your button.
If you want to have the same effect of your dropdown in small and large screen I added css as follow:
#media (max-width: 991px){
.user-dropdown-menu{
position: absolute !important;
left: -6rem !important;
}
}
a.nav-link.dropdown-toggle{
text-align: right;
}
#media (max-width: 991px){
.user-dropdown-menu{
position: absolute !important;
left: -6rem !important;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<!--Icon-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ"
crossorigin="anonymous">
<title>Admin Dashboard</title>
<style>
/*
* Sidebar
*/
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 100; /* Behind the navbar */
padding: 48px 0 0; /* Height of navbar */
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}
#media (max-width: 767.98px) {
.sidebar {
top: 5rem;
}
}
.sidebar-sticky {
position: relative;
top: 0;
height: calc(100vh - 48px);
padding-top: .5rem;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}
#supports ((position: -webkit-sticky) or (position: sticky)) {
.sidebar-sticky {
position: -webkit-sticky;
position: sticky;
}
}
.sidebar .nav-link {
font-weight: 500;
color: #333;
}
.sidebar .nav-link.active {
color: #021B4D;
}
.sidebar .nav-link:hover {
color: #FFDB1A !important;
}
/*Navbar*/
.navbar{
background-color:#021B4D !important;
}
.navbar-brand {
padding-top: .75rem;
padding-bottom: .75rem;
font-size: 1rem;
margin-left:20px;
}
.white-text{
color:#fff;
}
.dropdown-menu a:hover{
background-color:#021B4D;
color:#fff;
}
</style>
</head>
<body>
<nav class=" navbar navbar-expand-lg sticky-top ">
<a class="navbar-brand" href="">
<img src="eGrocery_SDP(Logo).jpeg" width="50" height="40">
</a>
<button class=" navbar-toggler navbar-toggler-right ml-auto" type="button" data-toggle="collapse" data-
target="#sidebarMenu"
aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation" style="margin-
left:auto;"><span class="white-text"><i
class="fas fa-bars fa-1x"></i></span></button>
<ul class="navbar-nav ml-lg-auto" >
<li class="nav-item dropdown " >
<a class="nav-link dropdown-toggle"data-toggle="dropdown" data-target="dropdown-target" href="#"><i
class="far fa-user-circle" style="font-size:40px;color:#fff;"></i></a>
<div class="dropdown-menu user-dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
Account
<div class="dropdown-divider"></div>
Logout
</div>
</li>
</ul>
</nav>
<div class="container-fluid">
<div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div class="sidebar-sticky pt-5">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">
<span data-feather="home"></span>
Dashboard <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file"></span>
Products
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="shopping-cart"></span>
Orders
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="users"></span>
Manage Customers
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="bar-chart-2"></span>
Manage Staff
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="layers"></span>
Sales Reports
</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
</body>
</html>

Change my sidebar menu into button for mobile view and smaller screen

So i'm new to bootstrap.and i was trying out to change my sidebar into a button when screen size is small.
This is a little what i need. I can tweak around a little bit to make it work for my needs except for one. There is a sidebar with links. That sidebar disapears when you make you screen smaller (as would have happened on mobile devices). I want to make sure that the sidebar disapears but have it back with a button.
Here is my code.
HTML and CSS i am using :
#side-bar {
height: 100%;
background-color: #333f4d;
padding: 0 !important;
font-weight: 600;
color: #d7d9db;
position: fixed;
float: left;
}
#top-bar {
background-color: #1f2730;
padding-top: 15px;
padding-bottom: 3px;
}
#top-bar:hover {
background-color: #aaa;
font-weight: 700;
}
.sidebarclr {
background-color: #fafafa !important;
margin-left: -14px;
}
#logo{
margin-left: 35px;
margin-bottom: 8px;
width:32px;
height:32px;
}
li img{
width:16px;
height:16px;
margin-right: 5px;
}
.list{
text-decoration:none!important;
padding-bottom: 15px;
padding: 10px;
}
#sidebl > li a{
color:#d7d9db !important;
}
#sidebl >li a:hover{
background-color:#aaa !important;
text-decoration:none !important;
}
#sidebl >li a:focus{
background-color:#aaa !important;
text-decoration:none !important;
}
#user{
margin-right: 10px;
margin-left: 10px;
float: left;
}
.userc{
border-radius: 3px;
height:32px;
margin-top:170px;
}
.light{
color: #8f98a3 !important;
font-weight: normal;
font-size:11px!important;
}
.username{
display:inline-block !important;
line-height: 16px;
float: left;
margin-left:5px;
}
.userc:hover{
background-color:#aaa;
text-decoration:none;
}
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<div class="col-sm-2" id="side-bar">
<div id="top-bar">
<a href="#" title="home page" target="_blank">
<img id="logo" src="images/logo.png" alt="">
<h2 class="title"> Maven Up</h2>
</a>
</div>
<div>
<ul class="nav" id="sidebl">
<li class="list">
<img src="images/icons/006-dashboard.png" alt=""> DashBoard
</li>
<li class="list">
<img src="images/icons/005-post-it.png" alt=""> Entries
</li>
<li class="list">
<img src="images/icons/004-worlwide.png" alt=""> Globals
</li>
<li class="list">
<img src="images/icons/003-picture.png" alt="">Assets
</li>
<li class="list">
<img src="images/icons/002-users.png" alt=""> Users
</li>
<li class="list">
<img src="images/icons/001-settings.png" alt=""> Setting
</li>
</ul>
</div>
<div class="userc">
<div id="user"><img src="images/user.png" alt=""></div>
<div class="username"> User
<div class="light">admin</div>
</div>
<!--- Navigation Bar User --->
<ul class="nav navbar-nav">
<li class="dropup">
<span class="gaparowup glyphicon glyphicon-chevron-up"></span>
<ul class="dropdown-menu">
<li>Account Settings</li>
<li>User stats </li>
</ul>
</li>
</ul>
<!--- Navigation Bar End --->
</div>
<!--- userc class div end --->
</div>
<!-- COL SM 2 END -->

bootsnipp has some great examples for that. Take a look at one of those. Most of them you can change to mobile versions so that they are only showing the button on mobile.
Maybe this guide helps as well. I really think there are great tutorials out there.

Responsive Bootstrap Dropbown menu

I'm new in programming,and I decided to start designing a website. While coding, I found an issue: I can't make the dropdown menu look OK. I'll leave a picture of how it looks and the code I wrote, so you can help me!
Thank you in advance!
HTML
img{max-width:100%;}
.quitar-float{float: none;}
.espacio-arriba{margin-top: 100px;}
#principal{
width:40%;
float:none;
margin-top:100px;
text-align: center;
margin: 0 auto;
}
#otro_elemento{margin-top:100px;}
.ingreso:hover{color:white;}
.img-responsive{margin: 0 auto;}
.ingreso{
font-size:240%;
color:black;
}
.menu{color:#B40000;}
body{
font-family: 'Days One', sans-serif;
color:#B40000;
text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
border-color: white;
background-image: url(https://http2.mlstatic.com/cesped-bermuda-gramilla-brasilera-envios-a-mvdeo-D_NQ_NP_20364-MLU20188773672_102014-F.jpg);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
}
.links{font-size: 20em;}
.espacio-derecha{margin-right: 1em;}
.se-gris{background-color: #eee;}
.padding-largo{padding:5px 10px;}
.inline-block{
float:none;
display: inline-block;
margin-right: -6px;
}
.no-lista{
margin:0;
padding:0;
}
.no-lista li{list-style-type:none;}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Club Atlético Rivadavia</title>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Days+One" rel="stylesheet">
</head>
<body>
<nav class="navbar">
<div class="container-fluid">
<ul class="nav navbar-nav no-lista se-gris inline-block padding-largo">
<li class="dropdown col-md-2"><a class="dropdown-toggle" data-toggle="dropdown" href="#">El Club<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Historia</li>
<li>Disciplina</li>
<li>Comisión directiva</li>
</ul>
</li>
<li class="col-md-2">Fútbol</li>
<li class="col-md-2">Estadio</li>
<li class="col-md-2">Sede</li>
<li class="col-md-2">Fútbol infantil</li>
<li class="dropdown col-md-2"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Polideportivo<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Básquet</li>
<li>Hockey</li>
<li>Natación</li>
</ul>
</li>
</ul>
</div>
</nav>
</body>
</html>

Try replacing nav with the following:
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">El Club<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Historia</li>
<li>Disciplina</li>
<li>Comisión directiva</li>
</ul>
</li>
<li>Fútbol</li>
<li>Estadio</li>
<li>Sede</li>
<li>Fútbol infantil</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Polideportivo<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Básquet</li>
<li>Hockey</li>
<li>Natación</li>
</ul>
</li>
</ul>
</div>
</nav>

There are a lot of assumptions in my attempt to solve your problem. But, you for sure need to read more about Bootstrap and what col-md-* mean.
Have a look:
body{
font-family: 'Days One', sans-serif;
text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
background: url(https://http2.mlstatic.com/cesped-bermuda-gramilla-brasilera-envios-a-mvdeo-D_NQ_NP_20364-MLU20188773672_102014-F.jpg) center center no-repeat fixed /cover;
}
nav{
background-color: #eee;
text-align: center;
margin:10px;
padding:5px 10px;
}
.inline-block{
float:none;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Days+One" rel="stylesheet">
<body>
<nav class="navbar">
<ul class="nav navbar-nav inline-block">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">El Club<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Historia</li>
<li>Disciplina</li>
<li>Comisión directiva</li>
</ul>
</li>
<li>Fútbol</li>
<li>Estadio</li>
<li>Sede</li>
<li>Fútbol infantil</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Polideportivo<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Básquet</li>
<li>Hockey</li>
<li>Natación</li>
</ul>
</li>
</ul>
</nav>
</body>

Navibar and full page slider

I just wanted to place my bootstrap nav bar inside the full width slider just like this.
This is the full width slider
http://codepen.io/grovesdm/pen/MazqzQ
I've placed the nav bar on top and put slider code after that. Now it's looks like this.
If I remove the nav bar background color and make that div transparent, nothing happened. If I need to place the slider inside the slider?

I think you want this :
/*! http://mths.be/slideshow v1.0.0 by #mathias */ ;
(function($) {
$.fn.slideshow = function(options) {
options = $.extend({
'timeout': 3000,
'speed': 400 // 'normal'
}, options);
// We loop through the selected elements, in case the slideshow was called on more than one element e.g. `$('.foo, .bar').slideShow();`
return this.each(function() {
// Inside the setInterval() block, `this` references the window object instead of the slideshow container element, so we store it inside a var
var $elem = $(this);
$elem.children().eq(0).appendTo($elem).show();
// Iterate through the slides
setInterval(function() {
$elem.children().eq(0)
// Hide the current slide and append it to the end of the image stack
.hide().appendTo($elem) // As of jQuery 1.3.2, .appendTo() returns the inserted element
// Fade in the next slide
.fadeIn(options.speed)
}, options.timeout);
});
};
}(jQuery));
// Name the slider
$(function() {
$('.slider').slideshow({
timeout: 7000,
speed: 1000
});
});
* {
padding: 0;
margin: 0;
}
/*section {
border: 10px solid green;
}
body {
border: 10px solid orange;
}*/
.slider {
position: relative;
width: 100%;
height: 100vh;
}
.slider li {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: none;
list-style: none;
}
.slider li .slide {
background-size: cover;
background-position: center center;
height: 100%;
width: 100%;
}
.slider li .slide figcaption {
font-family: sans-serif;
text-transform: uppercase;
letter-spacing: -1px;
color: white;
text-shadow: 0 0 5px black;
font-size: 60px;
text-align: center;
position: absolute;
top: -30px;
margin-top: 50vh;
left: 0;
right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<body>
<section>
<nav class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>About
</li>
<li>Contact
</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link
</li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<ul class="slider">
<li>
<figure class="slide" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/260511/1d9326c2ae66befef4e39c3426adf17a.jpg)">
<figcaption>hello</figcaption>
</figure>
</li>
<li>
<figure class="slide" style="background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/260511/______by_Thoum.jpg)">
<figcaption>yeah</figcaption>
</figure>
</li>
</li>
</ul>
</section>
<p>Hello</p>
</body>

Altering the state/position of a search form in a nav bar

I am trying to reposition a search form/button inside of my navbar with lingering problems. My CSS has changed many times, and I have gotten the form and button to move, but into weir alignment that either changes the nav bar or the search form. Here is my current CSS, which shows no changes from the default bootstrap state. I want to make the search form a little longer, and have the bar and form move slightly down and to the left, in position with the nav list:
<html>
<head>
<!-- Imported documents -->
<link rel = "stylesheet" href = "css/bootstrap.min.css">
<link rel = "stylesheet" href = "css/styles.css">
<meta charset="utf-8">
<title>TesterPage.</title>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed menuIcon" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Brand Logo -->
<a class="navbar-brand" href="#">
<img alt="Brand" src="assets/logo.gif" class="img-responsive" id="brandImage" />
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
About
</li>
<li class="dropdown">
Blog
</li>
<li class="dropdown">
Resume
</li>
<li class="dropdown">
Portfolio
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<label for="search" class="sr-only">Search Bar</label>
<input type="text" name="search" class="form-control" placeholder="Search" />
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
CSS:
.container {
background:#30302f;
}
.container a{
color: #fff;
}
.container a:hover{
text-decoration: underline;
color: #fff;
}
.menuIcon {
background:rgb(200,200,200);
}
.navbar-brand {
height:auto;
}
.navbar-default {
background-color: #30302f;
}
.navbar-default .navbar-nav>li>a {
color: #fff;
font-size: 18px;
font-weight: bold;
padding: 14px 14px;
top: 16px;
left: -50px;
text-transform: uppercase;
}
.navbar-form .navbar-right .form-class{
left: -30px;
top: 100px;
}
.navbar-default .navbar-nav>li>a:hover {
color: #fff;
text-decoration: underline;
}
#brandImage {
max-width:60%;
}
#media (max-width:600px) {
.navbar-brand {
width:95%;
padding:8px 2.5%;
}
#brandImage {
max-width:100%;
}
}
#media (min-width:990px) and (max-width:1200px) {
.navbar-brand {
width:250px;
}
}
Many thanks!
EDIT: I still try and edit the CSS code, and it slides my nav header to the left on the index, and misaligns it in other working pages :/

We Keep Coding

JavaScript is the programming language of the Web.

Want to Gather all nav tabs into icon on page zoom - javascript

Related

How to move nav-link to the right in bootstrap4?

Change my sidebar menu into button for mobile view and smaller screen

Responsive Bootstrap Dropbown menu

Navibar and full page slider

Altering the state/position of a search form in a nav bar

Categories

Resources