Bootstrap small window navbar dropdown not working - javascript

I'm trying to develop my first website with bootstrap, so I'm quite new to it.
I used the inverse navbar and I noticed that when I get my browser's window smaller the right side of the navbar compiles on a dropdown menu that isn't working. It doesn't drop down the menu.
This is how the window is normally
This is the dropdown menu that doesn't work properly on the navbar. PS- Its red bordered.
Here's my HTML:
body {
margin: 0;
}
.jumbotron{
align-items:center;
display:flex;
background-image:url('https://static.pexels.com/photos/392018/pexels-photo-392018.jpeg');
background-size:cover;
height:450px;
color:white;
height: 50vh;
}
* {
box-sizing: border-box;
}
.columns {
float: left;
width: 33.3%;
padding: 8px;
}
.price {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.price:hover {
box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}
.price .header {
background-color: #2D2727;
color: white;
font-size: 25px;
}
.price li {
border-bottom: 1px solid #eee;
padding: 20px;
text-align: center;
}
.price .grey {
background-color: #eee;
font-size: 20px;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
font-size: 18px;
}
#media only screen and (max-width: 600px) {
.columns {
width: 100%;
}
}
<!DOCKTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>WebHosting</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<!--NavBar-->
<div class="row">
<div class="col-lg-8">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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>
<a class="navbar-brand" href="index.html">WebHosting</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Contactos</li>
<li>Preços</li>
</ul>
</div>
</div>
</nav>
</div>
</div><!--NavBar END-->
<section class="jumbotron">
<div class="container">
<div class="row text-center">
<h1>WebHosting</h1>
<p>Host your WebSite now!!</p>
<p><a class="btn btn-primary btn-lg" href="precos" role="button">Learn more</a></p>
</div>
</div>
</section>
<div class="columns">
<ul class="price">
<li class="header">Host</li>
<li class="grey">Free</li>
<li>Sem criação de WebSite</li>
<li>Sem Dominio</li>
<li class="grey"><a class="btn btn-primary btn-lg" href="precos" role="button">Buy Now</a></li>
</ul>
</div>
<div class="columns">
<ul class="price">
<li class="header">Host + WebSite</li>
<li class="grey">€ 9.99</li>
<li>Criação do WebSite</li>
<li>Sem Dominio</li>
<li class="grey"><a class="btn btn-primary btn-lg" href="precos" role="button">Buy Now</a></li>
</ul>
</div>
<div class="columns">
<ul class="price">
<li class="header">Host + WebSite + Dominio</li>
<li class="grey">€ 9.99 / year</li>
<li>Criação do WebSite</li>
<li>Dominio incluido</li>
<li class="grey"><a class="btn btn-primary btn-lg" href="precos" role="button">Buy Now</a></li>
</ul>
</div>
</body>
</html>


Use in head section in given order.
<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>
body {
margin: 0;
}
.jumbotron {
align-items: center;
display: flex;
background-image: url('https://static.pexels.com/photos/392018/pexels-photo-392018.jpeg');
background-size: cover;
height: 450px;
color: white;
height: 50vh;
}
* {
box-sizing: border-box;
}
.columns {
float: left;
width: 33.3%;
padding: 8px;
}
.price {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.price:hover {
box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2)
}
.price .header {
background-color: #2D2727;
color: white;
font-size: 25px;
}
.price li {
border-bottom: 1px solid #eee;
padding: 20px;
text-align: center;
}
.price .grey {
background-color: #eee;
font-size: 20px;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
font-size: 18px;
}
#media only screen and (max-width: 600px) {
.columns {
width: 100%;
}
}
<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>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<div class="row">
<div class="col-lg-8">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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>
<a class="navbar-brand" href="index.html">WebHosting</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Contactos</li>
<li>Preços</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<!--NavBar END-->
<section class="jumbotron">
<div class="container">
<div class="row text-center">
<h1>WebHosting</h1>
<p>Host your WebSite now!!</p>
<p><a class="btn btn-primary btn-lg" href="precos" role="button">Learn more</a></p>
</div>
</div>
</section>
<div class="columns">
<ul class="price">
<li class="header">Host</li>
<li class="grey">Free</li>
<li>Sem criação de WebSite</li>
<li>Sem Dominio</li>
<li class="grey"><a class="btn btn-primary btn-lg" href="precos" role="button">Buy Now</a></li>
</ul>
</div>
<div class="columns">
<ul class="price">
<li class="header">Host + WebSite</li>
<li class="grey">€ 9.99</li>
<li>Criação do WebSite</li>
<li>Sem Dominio</li>
<li class="grey"><a class="btn btn-primary btn-lg" href="precos" role="button">Buy Now</a></li>
</ul>
</div>
<div class="columns">
<ul class="price">
<li class="header">Host + WebSite + Dominio</li>
<li class="grey">€ 9.99 / year</li>
<li>Criação do WebSite</li>
<li>Dominio incluido</li>
<li class="grey"><a class="btn btn-primary btn-lg" href="precos" role="button">Buy Now</a></li>
</ul>
</div>

Related

Dropdown menu stopped working after stylesheet update and modal added to each dropdown item

I'm new to the laravel environment. I've been working with a navbar and collapsible sidebar, both of them have a dropdown menu. All of a sudden, I changed some styles and now both of them are not working anymore. Any help would be appreciated.
Here are my files:
Layout.blade.php
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#yield('title')</title>
<!--Bootstrap, Jquery, Pooper, FontAwesome-->
<link rel="stylesheet" href="{{ URL::asset('css/styles.css') }}">
<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>
<link rel="stylesheet" href="{{ asset('plugins/bootstrap/css/bootstrap.css') }}" >
<script src="https://kit.fontawesome.com/942404b945.js" crossorigin="anonymous"></script>
<!--/Bootstrap, Jquery, Pooper, FontAwesome-->
<style>
.dropdown-toggle::after {
content: none;
}
</style>
</head>
<body class="hidden-sn grey-skin">
<!--Double navigation-->
<header>
#include('shared.navbar')
#include('shared.sidebar')
</header>
<!--/.Double navigation-->
<!--Content-->
<main id="main" class="col-lg-12 pt-1">
#yield('content')
</main>
<!--/.Content-->
<!--Scripts-->
<script type="text/javascript">
function openNav() {
document.getElementById("sidebar").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
/* Set the width of the sidebar to 0 and the left margin of the page content to 0 */
function closeNav() {
document.getElementById("sidebar").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}
$(document).ready(function(){
var scroll_start = 0;
var startchange = $('#startchange');
var offset = startchange.offset();
if (startchange.length){
$(document).scroll(function() {
scroll_start = $(this).scrollTop();
if(scroll_start > offset.top) {
$(".navbar-default").css('background-color', '#f0f0f0');
} else {
$('.navbar-default').css('background-color', 'transparent');
}
});
}
});
$(document).on("click",".dropdown-toggle",function(){
$(this).dropdown();
});
</script>
<!--/.Scripts-->
#include('shared.modal-crear')
#include('shared.modal-editar')
<!--Plugins-->
<script src="{{ asset('plugins/jquery/js/jquery.js') }}"></script>
<script src="{{ asset('plugins/bootstrap/js/bootstrap.js') }}"></script>
<script src="js/bootstrap.min.js"></script>
<!--/.Plugins-->
</body>
</html>
navbar.blade.php
<!-- Navbar -->
<nav id="navbar" class="navbar fixed-top navbar-toggleable-md navbar-expand-lg shadow p-2 mb-1 ">
<!-- SideNav slide-out button -->
<div class="float-left pl-2">
<a class="button-collapse"><button type="button" id="sidebarCollapse" onclick="openNav()" class="btn">
<i class="fa fa-bars" aria-hidden="true"></i></button></a>
</div>
</hr>
<!-- Breadcrumb-->
<div class="breadcrumb-dn mr-auto px-4">
<a href="/">
<strong id="nav-title">Dimiforms</strong>
</a>
</div>
<ul class="nav navbar-nav nav-flex-icons">
<li class="nav-item dropdown">
<a id="nav-dropdown" class="nav-link dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
aria-haspopup="true" aria-expanded="false">
#yield('User-name', 'Default') | Usuario
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="">Mi cuenta</a>
<a class="dropdown-item" href="{{ route('usuario_logout')}}">Salir</a>
</div>
</li>
</ul>
</nav>
<!-- /.Navbar -->
Sidebar.blade.php
<div class="sidebar float-left" id="sidebar">
×
<div class="text-center">
<img src="https://www.w3schools.com/w3images/avatar6.png" class="avatar mx-auto">
<h6>#yield('User-name')</h6>
</div>
<hr>
<div class="items-container">
<a href="cuenta" >
<h6 class="menu-item"><i class="fa fa-user-circle" aria-hidden="true"></i> | Cuenta</h6>
</a>
<a href="formularios">
<h6 class="menu-item"><i class="fa fa-book" aria-hidden="true"></i> | Formularios</h6>
</a>
<a href="estadisticas">
<h6 class="menu-item"><i class="fa fa-bar-chart" aria-hidden="true"></i> | Estadisticas</h6>
</a>
<a class="dropdown-toggle dropdown items-container" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-target="#sidebar-dropdown">
<h6 class="menu-item"><i class="fas fa-laptop-code"></i> | Dimiforms</h6>
<div class="dropdown-menu" id="sidebar-dropdown" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="{{ route('display_crear_formulario')}}" data-toggle="modal" data-target="#modal-crear">Crear Formulario</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{{ route('display_editar_formulario')}}" data-toggle="modal" data-target="#modal-editar">Editar Formulario</a>
</div>
</div>
</a>
<hr>
<a href="about">
<h6 class="menu-item"><i class="fa fa-info-circle" aria-hidden="true"></i> | Acerca de</h6>
</a>
</div>
styles.css
/*general stuff*/
a {
text-decoration: none !important;
}
/*sidebar*/
#sidebar {
height: 100%;
width: 0;
z-index: -inherit;
position: fixed;
left: 0;
background-color: #2c3e50;
padding: 60px 0 0 0;
top: 55px;
overflow-x: hidden; /* Disable horizontal scroll */
transition: 1s; /* 0.5 second transition effect to slide in the sidebar */
}
.sidebar h6 {
color: rgb(255, 255, 255);
margin-top: 7px;
}
.sidebar a{
padding: 4px;
text-decoration: none;
font-size: 18px;
color: white;
display: block;
transition: 0.8s;
background-color: inherit !important;
}
/* Position and style the close button (top right corner) */
.sidebar .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.closebtn:hover {
color: #c36618 !important;
}
.items-container{
text-decoration: none;
color: white;
}
.menu-item, .dropdown-item{
padding: 6px 0 10px 20px;
transition: 0.8s;
cursor: pointer;
}
.menu-item:hover{
background-color: white;
color:#2c3e50;
}
.avatar {
vertical-align: middle;
width: 50px;
height: 50px;
border-radius: 50px 50px 50px 50px;
}
#dismiss {
width: 35px;
height: 35px;
position: absolute;
/* top right corner of the sidebar */
top: 10px;
right: 10px;
}
/*sidebar*/
/*navbar*/
#navbar {
background-color: #c36618;
border: none !important;
height: 60px;
}
#sidebarCollapse{
background-color: transparent;
color: #fafafa;
}
#sidebarCollapse:hover {
background-color: white;
color: #c36618;
}
#nav-title, #nav-dropdown{
color: #ffffff;
}
/*main*/
main{
padding: 0 0 0 25%;
transition: margin-left 1s; /* If you want a transition effect */
padding: 20px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidebar {padding-top: 15px;}
.sidebar a {font-size: 18px;}
}
/* Dropdowns */
.dropdown-item{
display: block;
transition: 0.8s;
color: #2c3e50 !important;
background-color: transparent !important;
}
.dropdown-item:hover{
color:#c36618 !important;
}
.dropdown{
width: inherit;
background-color: inherit !important;
border: 0px;
}
/* Modals */
.submit-button{
background-color: #2c3e50;
color:white;
border-radius: 8px;
}

I fixed it by changing the order of the bootstrap, Jquery and main css files.
I had two bootstrap files imported as well.

HTML & CSS with bootstrap / Simple question why the two container overlapped in my code

I have used bootstrap to create the navbar and i want to add some extra effect on it.
I want to make a sticky navbar with bootstrap, with the effect of adding a red underline for each <a> tag. But when I scroll down, the red underline effect is disabled and the navbar and the numbers overlapped.... Can anyone tell me why?
$(document).ready(function(){ /*when this file has been loaded, execute the function*/
$(window).scroll(function(){ /*when the page is scrolled, execute the function*/
if($(window).scrollTop()>-60){ /*Question? why need if, can it remove if??*/
$('.my-navbar').addClass('navbar-scroll');
}
else{
$('.my-navbar').removeClass('nav-scroll');
}
});
});
body{
margin:0;
padding:0;
}
.col-md-8{
font-size: 120px;
}
.menu{
width:90%;
position: relative;
}
.my-navbar{
width:100%;
padding: 20px 20px;
background-color: white;
position: relative;
top:20px;
left:0;
box-shadow:0px 2px 10px rgba(0,0,0,0.2);
}
.nav-item .nav-link{
font-size: 15px;
color:black;
font-weight:400;
text-transform: uppercase;
margin:0px 10px;
position: relative;
}
.nav-item .nav-link:after{
position: absolute;
left:0;
bottom:0;
width:100%;
height:2px;
transform:scaleX(0);
transition: 0.5s;
content:"";
transform-origin:left;
background-color: brown;
}
.nav-item .nav-link:hover:after{
transform-origin:right;
transform: scaleX(1); /*影響線長？*/
}
.navbar-scroll{
position:fixed;
top:0;
left:0;
width:100%;
background-color: rgba(255,255,255,0.7) ;
padding: 5px 20px;
transition: 0.5s;
animation: scroll 0.6s 1;
}
#keyframes scroll{
0%{transform:translateY(-100%);}
100%{transform:translateY(0%);}
}
.navbar-brand{
text-transform: capitalize;
font-size: 35px;
color: #2f3542;
font-weight:bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<header>
<div class="container-fluid menu">
<nav class="navbar navbar-expand-lg my-navbar">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-md-8">
1
</div>
<div class="col-md-8">
2
</div>
<div class="col-md-8">
3
</div>
<div class="col-md-8">
4
</div>
<div class="col-md-8">
5
</div>
<div class="col-md-8">
6
</div>
<div class="col-md-8">
7
</div>
<div class="col-md-8">
8
</div>
</div>
</div>
</body>
</html>

Your .navbar-scroll's background-color has a transparency value of 0.7, which makes the content shine through it when you scroll down. Just change the background-color to white or the transparency value to 1 (background-color: rgba(255,255,255,1)).
Concerning the red underlines on the nav links: They do appear on hover (?)
$(document).ready(function(){ /*when this file has been loaded, execute the function*/
$(window).scroll(function(){ /*when the page is scrolled, execute the function*/
if($(window).scrollTop()>-60){ /*Question? why need if, can it remove if??*/
$('.my-navbar').addClass('navbar-scroll');
}
else{
$('.my-navbar').removeClass('nav-scroll');
}
});
});
body{
margin:0;
padding:0;
}
.col-md-8{
font-size: 120px;
}
.menu{
width:90%;
position: relative;
}
.my-navbar{
width:100%;
padding: 20px 20px;
background-color: white;
position: relative;
top:20px;
left:0;
box-shadow:0px 2px 10px rgba(0,0,0,0.2);
}
.nav-item .nav-link{
font-size: 15px;
color:black;
font-weight:400;
text-transform: uppercase;
margin:0px 10px;
position: relative;
}
.nav-item .nav-link:after{
position: absolute;
left:0;
bottom:0;
width:100%;
height:2px;
transform:scaleX(0);
transition: 0.5s;
content:"";
transform-origin:left;
background-color: brown;
}
.nav-item .nav-link:hover:after{
transform-origin:right;
transform: scaleX(1); /*影響線長？*/
}
.navbar-scroll{
position:fixed;
top:0;
left:0;
width:100%;
background-color: rgba(255,255,255,1);
padding: 5px 20px;
transition: 0.5s;
animation: scroll 0.6s 1;
}
#keyframes scroll{
0%{transform:translateY(-100%);}
100%{transform:translateY(0%);}
}
.navbar-brand{
text-transform: capitalize;
font-size: 35px;
color: #2f3542;
font-weight:bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<header>
<div class="container-fluid menu">
<nav class="navbar navbar-expand-lg my-navbar">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-md-8">
1
</div>
<div class="col-md-8">
2
</div>
<div class="col-md-8">
3
</div>
<div class="col-md-8">
4
</div>
<div class="col-md-8">
5
</div>
<div class="col-md-8">
6
</div>
<div class="col-md-8">
7
</div>
<div class="col-md-8">
8
</div>
</div>
</div>
</body>
</html>

Update my-navbar class css
.my-navbar{
width:100%;
padding: 20px 20px;
background-color: white;
position: relative;
top:20px;
left:0;
box-shadow:0px 2px 10px rgba(0,0,0,0.2);
z-index: 1;
background-color: rgba(255,255,255,1) !important;
}
$(document).ready(function(){ /*when this file has been loaded, execute the function*/
$(window).scroll(function(){ /*when the page is scrolled, execute the function*/
if($(window).scrollTop()>-60){ /*Question? why need if, can it remove if??*/
$('.my-navbar').addClass('navbar-scroll');
}
else{
$('.my-navbar').removeClass('nav-scroll');
}
});
});
body{
margin:0;
padding:0;
}
.col-md-8{
font-size: 120px;
}
.menu{
width:90%;
position: relative;
}
.my-navbar{
width:100%;
padding: 20px 20px;
background-color: white;
position: relative;
top:20px;
left:0;
box-shadow:0px 2px 10px rgba(0,0,0,0.2);
z-index: 1;
background-color: rgba(255,255,255,1) !important;
}
.nav-item .nav-link{
font-size: 15px;
color:black;
font-weight:400;
text-transform: uppercase;
margin:0px 10px;
position: relative;
}
.nav-item .nav-link:after{
position: absolute;
left:0;
bottom:0;
width:100%;
height:2px;
transform:scaleX(0);
transition: 0.5s;
content:"";
transform-origin:left;
background-color: brown;
}
.nav-item .nav-link:hover:after{
transform-origin:right;
transform: scaleX(1); /*影響線長？*/
}
.navbar-scroll{
position:fixed;
top:0;
left:0;
width:100%;
background-color: rgba(255,255,255,0.7) ;
padding: 5px 20px;
transition: 0.5s;
animation: scroll 0.6s 1;
}
#keyframes scroll{
0%{transform:translateY(-100%);}
100%{transform:translateY(0%);}
}
.navbar-brand{
text-transform: capitalize;
font-size: 35px;
color: #2f3542;
font-weight:bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<header>
<div class="container-fluid menu">
<nav class="navbar navbar-expand-lg my-navbar">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
</div>
</nav>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-md-8">
1
</div>
<div class="col-md-8">
2
</div>
<div class="col-md-8">
3
</div>
<div class="col-md-8">
4
</div>
<div class="col-md-8">
5
</div>
<div class="col-md-8">
6
</div>
<div class="col-md-8">
7
</div>
<div class="col-md-8">
8
</div>
</div>
</div>

Animating sidemenu on hover

I want to show only the icons as default and on hover slide the sidemenu to the current state you see in the jsfiddle
Thanks in advance
https://jsfiddle.net/aq9Laaew/228/
<div id="sidebar">
<div class="sidebar-wrapper">
<div class="profile-menu d-flex flex-column flex-grow">
<div class="sidebar-item">
<a class="d-flex" href="/">
<i class="fa fa-lg fa-home" style="margin-left: 1px; margin-right: 20px"></i>
<span>Home</span>
</a>
</div>
<div class="sidebar-item">
<a class="d-flex" href="/profile">
<i class="fa fa-lg fa-user-o" style="margin-left: 1px; margin-right: 22px"></i>
<span>Profile</span>
</a>
</div>
<div class="sidebar-item">
<a class="d-flex" href="/profile/messages">
<i class="fa fa-lg fa-envelope-o" style="margin-right: 19px"></i>
<span>Messages</span>
</a>
</div>
</div>
</div>
</div>

You can do it by changing navbars values on hover like this:
#sidebar {
letter-spacing: 0.1em;
font-weight: 500;
border-right: 1px solid #797979;
padding-top: 50px;
position: fixed;
z-index: 1000;
width: 65px;
height: 100vh;
background: #2c2c2c;
transition:1s;
}
#sidebar:hover{
width: 259px;
}
#sidebar:hover .sidebar-item span{
opacity:1;
}
.sidebar-item {
padding: 10px 20px;
border-left: 5px solid transparent;
}
.sidebar-item span{
opacity:0;
transition:1s;
}
.sidebar-active {
border-left: 5px solid #b1a0ff;
color: #b1a0ff;
background: #474747;
}
.sidebar-item a {
align-items: center;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="sidebar">
<div class="sidebar-wrapper">
<div class="profile-menu d-flex flex-column flex-grow">
<div class="sidebar-item">
<a class="d-flex" href="/">
<i class="fa fa-lg fa-home" style="margin-left: 1px; margin-right: 20px"></i>
<span>Home</span>
</a>
</div>
<div class="sidebar-item">
<a class="d-flex" href="/profile">
<i class="fa fa-lg fa-user-o" style="margin-left: 1px; margin-right: 22px"></i>
<span>Profile</span>
</a>
</div>
<div class="sidebar-item">
<a class="d-flex" href="/profile/messages">
<i class="fa fa-lg fa-envelope-o" style="margin-right: 19px"></i>
<span>Messages</span>
</a>
</div>
</div>
</div>
</div>

So from the comments this wasn't exactly what you were after but I put this together and might as well share it here anyway.
It animates the label in on hover using relative position and CSS transition. It does involve some changes to the HTML.
https://jsfiddle.net/Chipmo/111dd0sj/1/
#sidebar {
letter-spacing: 0.1em;
font-weight: 500;
border-right: 1px solid #797979;
padding-top: 50px;
position: fixed;
z-index: 1000;
width: 259px;
height: 100vh;
background: #2c2c2c;
}
.sidebar-item {
padding-top: 20px;
}
.sidebar-item a {
align-items: center;
}
.sidebar-item i {}
.sidebar-left-cover {
background: #2c2c2c;
width: 40px;
height: 100%;
z-index: 2;
padding-left: 20px;
}
.sidebar-item .sidebar-label {
position: relative;
right: 100px;
transition: right 0.5s;
z-index: 1;
}
.sidebar-item:hover .sidebar-label {
right: -5px;
display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div id="sidebar">
<div class="sidebar-wrapper">
<div class="profile-menu d-flex flex-column flex-grow">
<div class="sidebar-item">
<a class="d-flex" href="/">
<div class="sidebar-left-cover">
<i class="fa fa-lg fa-home" style="margin-left: 1px; margin-right: 20px"></i></div>
<span class="sidebar-label">Home</span>
</a>
</div>
<div class="sidebar-item">
<a class="d-flex" href="/profile">
<div class="sidebar-left-cover">
<i class="fa fa-lg fa-user-o" style="margin-left: 1px; margin-right: 22px"></i>
</div>
<span class="sidebar-label">Profile</span>
</a>
</div>
<div class="sidebar-item">
<a class="d-flex" href="/profile/messages">
<div class="sidebar-left-cover">
<i class="fa fa-lg fa-envelope-o" style="margin-right: 19px"></i></div>
<span class="sidebar-label">Messages</span>
</a>
</div>
</div>
</div>
</div>

How can i make the button fix at the top and the content collapse into it

I tried this code but when i click on the button the content collapses and the button moves down. I want the content to collapse and the button remains at the top inline with the other button.
Here is my HTML and CSS code:
#fixed {
margin-top: 60px;
}
#block {
border: solid #BDC3C7 1px;
width: 360px;
margin-left: 60px;
display: inline-block;
}
.ab {
margin: 5px;
}
#demo {
max-width: 350px;
color: blue;
border: solid #ddd 1px;
padding: 5px 12px 0px 12px;
margin: 2px -10px 2px 0px;
vertical-align: top;
white-space: nowrap;
font-size: 12px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
}
.list {
list-style: none;
border-bottom: solid 1px #eee
}
.as {
margin: 0 0 10px 0;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body data-spy="scroll" data-target=".navbar-collapse">
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
THINK
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>About Us
</li>
<li>Contact Us
</li>
<li>Pricing
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div id="fixed">
<div id="block">
<div class="ab">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
<div id="demo" class="collapse in">
<ul class="as">
<li class="list">hello</li>
<li class="list">hi</li>
<li class="list">hello</li>
</ul>
</div>
</div>
</div>
<div id="block">
<div class="ab">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo1">Simple collapsible</button>
<div id="demo1" class="collapse in">
<ul class="as">
<li class="list">hello</li>
<li class="list">hi</li>
<li class="list">hello</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Give the blocks a vertical align rule.
Also never duplicate an html id. Use classes instead.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
<style>
#fixed {
margin-top: 60px;
}
/* Changed to class here */
.block {
border: solid #BDC3C7 1px;
width: 360px;
margin-left: 60px;
display: inline-block;
/* added vertical-align */
vertical-align: top;
}
.ab {
margin: 5px;
}
#demo {
max-width: 350px;
color: blue;
border: solid #ddd 1px;
padding: 5px 12px 0px 12px;
margin: 2px -10px 2px 0px;
vertical-align: top;
white-space: nowrap;
font-size: 12px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
}
.list {
list-style: none;
border-bottom: solid 1px #eee
}
.as {
margin: 0 0 10px 0;
padding: 0;
}
</style>
</head>
<body data-spy="scroll" data-target=".navbar-collapse">
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
THINK
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>About Us
</li>
<li>Contact Us
</li>
<li>Pricing
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div id="fixed">
<!-- changed "block" from id to class here -->
<div class="block">
<div class="ab">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
<div id="demo" class="collapse in">
<ul class="as">
<li class="list">hello</li>
<li class="list">hi</li>
<li class="list">hello</li>
</ul>
</div>
</div>
</div>
<!-- changed "block" from id to class here -->
<div class="block">
<div class="ab">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo1">Simple collapsible</button>
<div id="demo1" class="collapse in">
<ul class="as">
<li class="list">hello</li>
<li class="list">hi</li>
<li class="list">hello</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

How do I re-position a dropdown menu?

I was wondering how would I re-position a drop-down menu.
What I am trying to achieve is a fake search. So when you click the search button, it activates a drop down with fake dummy results. I am trying to re-position the drop-down to make it look like it came from the search.
Here is my code
https://jsfiddle.net/judison/45f50ws9/
.searchBar {
background-color: #67B4AD;
color: white;
width: 280px;
border: none;
}
.dropdown-menu {
right: 100px;
}
.add-on .dropdown > .btn {
border: none;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
color: white;
background-color: #67B4AD;
}
/* stop the glowing blue shadow */
.add-on .form-control:focus {
color: white;
box-shadow: none;
-webkit-box-shadow: none;
background-color: #67B4AD;
}
<form class="navbar-form navbar-left" role="search">
<div class="searchBarPadding form-group">
<div class="input-group add-on">
<input style="height:22px;" type="text" class="searchBar" placeholder=" Search">
<div class="input-group-btn">
<div class="dropdown">
<button style="height:22px;" class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"><i class="glyphicon glyphicon-search" style="height:10px;"></i>
</button>
<ul class="dropdown-menu">
<li>HTML
</li>
<li class="disabled">CSS
</li>
<li>JavaScript
</li>
<li class="divider"></li>
<li>About Us
</li>
</ul>
</div>
</div>
</div>
</form>
I would really appreciate the advice!

Heres a very basic example that you can build off of
Codepen http://codepen.io/noobskie/pen/xwEXpv
Just added a click event to the .dropdown-toggle that will fade in the dropdown and removed the relative postion on
.input-group-btn,
.dropdown{
position:initial;
}

This may be what you're trying to accomplish. You can attach the button with an add on and adjust the width of the dropdown-menu to the form-control class so they are the same total width.
#searchForm .form-control {
background-color: #67B4AD;
color: white;
width: 280px;
border: none;
}
#searchForm .dropdown-menu {
width: 320px;
}
#searchForm .btn.btn-default {
border: 1px solid #67B4AD;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
color: white;
background-color: #67B4AD;
}
/* stop the glowing blue shadow */
#searchForm .form-control:focus {
color: white;
box-shadow: none;
-webkit-box-shadow: none;
background-color: #67B4AD;
}
#media (max-width: 767px) {
#searchForm .form-control {
width: 100%;
}
#searchForm .dropdown-menu {
width: auto;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" 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> <a class="navbar-brand" href="#">Brand</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="active">Link <span class="sr-only">(current)</span>
</li>
<li>Link
</li>
</ul>
<form class="navbar-form navbar-left" role="search" id="searchForm">
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="glyphicon glyphicon-search"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li>HTML
</li>
<li class="disabled">CSS
</li>
<li>JavaScript
</li>
<li class="divider"></li>
<li>About Us
</li>
</ul>
</div>
<!-- /btn-group -->
</div>
<!-- /input-group -->
</form>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>

Categories

Resources