Helo all. How can I prevent .slideUp for my drop down menu. I want the drop down menu slide up only if I leave the area of button which is .personal-mega and the .flyout.
This is the [example][1] link that I want to achieve.
I did try to adjust the js but it is not working.
$(document).ready(function(){
$(".personal-mega").hover(
function() {
$('.flyout', this).not('.in
.flyout').stop(true,true).slideDown("400");
$(this).toggleClass('open');
},
function() {
$('.flyout', this).not('.in
.flyout').stop(true,true).slideUp("400");
$(this).toggleClass('open');
}
);
});
Here is the snippet:
(The menu is responsive please view it with full page)
$(".personal-mega").hover(function(){
$('.flyout').slideDown("400");
});
/*
$(document).ready(function(){
$(".personal-mega").hover(
function() {
$('.flyout', this).stop(true,true).slideDown("400");
$(this).toggleClass('open');
},
function() {
$('.flyout', this).stop(true,true).slideUp("400");
$(this).toggleClass('open');
}
);
});*/
/* navbar/top navbar */
.pos-navbar{
box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.2);
z-index: 1000;
}
.pos-main-nav li a, .pos-top-nav li a{
text-transform: uppercase;
font-weight: 500;
}
.bg-pos{
background-color: #DF1E34;
}
.pos-menu{
border: 1px solid #DF1E34;
border-radius: 50px;
padding-left: 10px;
padding-right: 10px;
margin-right: 10px;
overflow: hidden;
}
.pos-menu a{
color: #DF1E34 !important;
}
.pos-menu:hover{
transition: all 0.6s ease;
}
.pos-menu:hover a{
color: #FFFFFF !important;
}
.pos-top-menu{
border: 1px solid #FFFFFF;
border-radius: 50px;
padding-left: 10px;
padding-right: 10px;
}
.pos-top-menu button{
text-transform: uppercase;
font-size: 14px;
background-color: transparent;
border: none;
}
.pos-top-menu button:focus{
box-shadow: none;
}
.pos-top-menu button:after{
content: none;
}
.pos-top-menu button:not([disabled]):not(.disabled).active,
.pos-top-menu button:not([disabled]):not(.disabled):active,
.show>button.dropdown-toggle,
.pos-top-menu button:hover{
color: #FFFFFF;
background-color: transparent !important;
border: none !important;
border-color: transparent !important;
box-shadow: none !important;
}
/*.pos-top-menu button:not([disabled]):not(.disabled).active,
.pos-top-menu button:not([disabled]):not(.disabled):active,
.show > button.dropdown-toggle{
background-color: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}*/
.pos-top-menu ul{
padding : 0;
top: 10px !important;
left: -30px !important;
overflow: hidden;
}
.pos-top-menu ul .dropdown-item{
padding: 0;
}
.pos-top-nav li a{
font-size: 14px;
color: #FFFFFF !important;
}
.pos-top-nav .pos-top-menu ul li a{
color: #666666 !important;
}
.pos-top-nav li a:active,
.pos-top-nav li a:focus,
.pos-top-nav li a:hover{
color: #333333 !important;
}
.no-link{
pointer-events: none;
cursor: default;
}
.nav-item{
display: inline-block;
}
/* overide hover.css */
.hvr-sweep-to-bottom:before{
background: #DF1E34;
}
.hvr-underline-from-center:before{
left: 50%;
right: 50%;
background: #DF1E34;
height: 2px;
}
.flyout {
position:absolute;
width:100%;
background:red;
overflow: hidden;
z-index:10000000;
}
.hidden {
display:none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- navbar -->
<nav class="pos-navbar navbar navbar-expand-lg navbar-light bg-white">
<div class="container">
<a class="navbar-brand" href="#">
<img src="img/pos-logo.svg" width="50%" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="pos-main-nav navbar-nav ml-auto">
<li class="nav-item pos-menu hvr-sweep-to-bottom">
<a class="nav-link personal-hover personal-mega" href="#">Personal</a>
</li>
<li class="nav-item pos-menu hvr-sweep-to-bottom">
<a class="nav-link" href="#">Business</a>
</li>
<li class="nav-item" style="width: 20px;"></li>
<li class="nav-item hvr-underline-from-center">
<a class="nav-link" href="#">Digital Mailbox</a>
</li>
<li class="nav-item hvr-underline-from-center">
<a class="nav-link" href="#">Shop</a>
</li>
<li class="nav-item hvr-underline-from-center">
<a class="nav-link" href="#">Promotion</a>
</li>
<li class="nav-item">
<a class="nav-link no-link" href="#">|</a>
</li>
<li class="nav-item hvr-float">
<a class="nav-link" href="#" data-toggle="modal" data-target=".search-modal-lg"><img src="img/icon-search.svg" width="20"></a>
</li>
</ul>
</div>
</div>
</nav>
<div class="flyout hidden container-fluid">131231<br>1<br>1<br>1<br>1</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
Related
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.
I have a hamburger menu, when I click the button it activates the on target class on shows the menu. While the menu to open I am not sure how to make it if I click on the menu icon again it collapses the menu. Here is the code I got so far.
// my attempt in js to blur navTarget:focus
$("nav a").click(function() {
$("nav a").removeClass("navselected");
$(this).addClass("navselected");
});
$("#menu").click(function() {
$("#navTarget:focus").blur();
});
nav {
flex: 0 0 100%;
border-right: 1px solid #386BA8;
background-color: #386BA8;
}
nav header {
padding: 0rem 1rem;
}
nav a {
display: block;
color: #000;
text-decoration: none;
padding: 1rem;
border-top: 1px solid #386BA8;
}
nav a:first-child {
padding: 0;
border-top: none;
}
.navigation {
background-color: #6699CC;
top: 0rem;
display: none;
}
.hide {
display: none;
}
.bufferspace {
padding: 0;
}
#menu {
background-color: #6699CC;
display: block;
position: fixed;
cursor: pointer;
top: 0;
z-index: 10;
}
#menu i {
font-size: 2rem;
padding: 1rem;
}
#navTarget {
padding-top: 2.8rem;
}
#navTarget:target {
display: block;
}
nav a:first-child:hover {
animation: none;
}
nav a:first-child:hover {
animation: none;
}
.navselected:first-child {
background-color: none;
border-left: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="navbar">
<a id="menu" href="#navTarget">
<i class="fas fa-bars"></i>
</a>
<div id="navTarget" class="navigation">
<header id="main-title">
<a href="#navbar">
<h1>HTML<br class="hide" /> Documentation</h1>
</a>
</header>
<a class="nav-link" href="#Introduction">Introduction</a>
<a class="nav-link" href="#Syntax">Syntax</a>
<a class="nav-link" href="#HTML_Page">HTML Page</a>
<a class="nav-link" href="#Common_Tags">Common Tags</a>
<a class="nav-link" href="#HTML5">HTML5</a>
</div>
</nav>
Here is the link to my Codepen
Remove the href from the menu button and :target style from CSS, instead add this style on class change.
$("#menu").on("click", function() {
$("#navTarget").toggleClass("openMenu");
});
$("#menu").on("click", function() {
$("#navTarget").toggleClass("openMenu");
});
$(".nav-link").on("click", function() {
$("#navTarget").removeClass("openMenu");
});
nav {
flex: 0 0 100%;
border-right: 1px solid #386BA8;
background-color: #386BA8;
}
nav header {
padding: 0rem 1rem;
}
nav a {
display: block;
color: #000;
text-decoration: none;
padding: 1rem;
border-top: 1px solid #386BA8;
}
nav a:first-child {
padding: 0;
border-top: none;
}
.navigation {
background-color: #6699CC;
top: 0rem;
display: none;
}
.hide {
display: none;
}
.bufferspace {
padding: 0;
}
#menu {
background-color: #6699CC;
display: block;
position: fixed;
cursor: pointer;
top: 0;
z-index: 10;
}
#menu i {
font-size: 2rem;
padding: 1rem;
}
#navTarget {
padding-top: 2.8rem;
}
#navTarget.openMenu {
display: block;
}
nav a:first-child:hover {
animation: none;
}
nav a:first-child:hover {
animation: none;
}
.navselected:first-child {
background-color: none;
border-left: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel='stylesheet prefetch' href='https://use.fontawesome.com/releases/v5.0.13/css/all.css'>
<nav id="navbar">
<a id="menu">
<i class="fas fa-bars"></i>
</a>
<div id="navTarget" class="navigation">
<header id="main-title">
<a href="#navbar">
<h1>HTML<br class="hide" /> Documentation</h1>
</a>
</header>
<a class="nav-link" href="#Introduction">Introduction</a>
<a class="nav-link" href="#Syntax">Syntax</a>
<a class="nav-link" href="#HTML_Page">HTML Page</a>
<a class="nav-link" href="#Common_Tags">Common Tags</a>
<a class="nav-link" href="#HTML5">HTML5</a>
</div>
</nav>
I believe below solution fixes your problem. I use $("#navTarget").toggleClass("visible"); to toggle CSS class which makes navTarget visible.
$("nav a").click(function() {
$("#navTarget").toggleClass("visible");
});
$("#menu").click(function() {
$("#navTarget:focus").blur();
});
nav {
flex: 0 0 100%;
border-right: 1px solid #386BA8;
background-color: #386BA8;
}
nav header {
padding: 0rem 1rem;
}
nav a {
display: block;
color: #000;
text-decoration: none;
padding: 1rem;
border-top: 1px solid #386BA8;
}
nav a:first-child {
padding: 0;
border-top: none;
}
.navigation {
background-color: #6699CC;
top: 0rem;
display: none;
}
.hide {
display: none;
}
.bufferspace {
padding: 0;
}
#menu {
background-color: #6699CC;
display: block;
position: fixed;
cursor: pointer;
top: 0;
z-index: 10;
}
#menu i {
font-size: 2rem;
padding: 1rem;
}
#navTarget {
padding-top: 2.8rem;
}
.visible {
display: block;
}
nav a:first-child:hover {
animation: none;
}
nav a:first-child:hover {
animation: none;
}
.navselected:first-child {
background-color: none;
border-left: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel='stylesheet prefetch' href='https://use.fontawesome.com/releases/v5.0.13/css/all.css'>
<nav id="navbar">
<a id="menu" href="#navTarget">
<i class="fas fa-bars"></i>
</a>
<div id="navTarget" class="navigation">
<header id="main-title">
<a href="#navbar">
<h1>HTML<br class="hide" /> Documentation</h1>
</a>
</header>
<a class="nav-link" href="#Introduction">Introduction</a>
<a class="nav-link" href="#Syntax">Syntax</a>
<a class="nav-link" href="#HTML_Page">HTML Page</a>
<a class="nav-link" href="#Common_Tags">Common Tags</a>
<a class="nav-link" href="#HTML5">HTML5</a>
</div>
</nav>
Hey try the following code and check the output it will fullfill your requirement. I used toggle() jquery function which toggles the navigation to display:block and display:none;
$("nav a").click(function() {
$("nav a").removeClass("navselected");
$(this).addClass("navselected");
});
$("#menu").click(function() {
// $("#navTarget:focus").blur();
$(".navigation").toggle();
});
nav{
flex:0 0 100%;
border-right:1px solid #386BA8;
background-color:#386BA8;
}
nav header{
padding:0rem 1rem;
}
nav a{
display: block;
color:#000;
text-decoration:none;
padding:1rem;
border-top:1px solid #386BA8;
}
nav a:first-child{
padding:0;
border-top:none;
}
.navigation{
background-color:#6699CC;
top:0rem;
display: none;
}
.hide{display: none;}
.bufferspace{padding: 0;}
#menu{
background-color:#6699CC;
display: block;
position:fixed;
cursor:pointer;
top:0;
z-index: 10;
}
#menu i{
font-size:2rem;
padding:1rem;
}
#navTarget{
padding-top:2.8rem;
}
nav a:first-child:hover {
animation:none;
}
nav a:first-child:hover {
animation:none;
}
.navselected:first-child{
background-color:none;
border-left:none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel='stylesheet prefetch' href='https://use.fontawesome.com/releases/v5.0.13/css/all.css'>
<nav id="navbar">
<a id="menu" href="#navTarget">
<i class="fas fa-bars"></i>
</a>
<div id="navTarget" class="navigation">
<header id="main-title"><h1>HTML<br class="hide"/> Documentation</h1></header>
<a class="nav-link" href="#Introduction">Introduction</a>
<a class="nav-link" href="#Syntax">Syntax</a>
<a class="nav-link" href="#HTML_Page">HTML Page</a>
<a class="nav-link" href="#Common_Tags">Common Tags</a>
<a class="nav-link" href="#HTML5">HTML5</a>
</div>
</nav>
I am using Bootstrap 4.
How would I display a search input once the sticky nav locks in-place and remove it when it is not locked in place? I want it to be displayed on the right-hand side of the nave.
I figure this would need to be done with Jquery but I am not a frontend guy so this way above my design capabilities.
Take a look at the site it's up at www.pricereference.com.
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
}
img {
max-width: 100%;
}
.btn {
background-color: #D84728;
border-color: #D84728;
color: white;
}
.btn-success {
background-color: #D84728;
border-color: #D84728;
color: white;
}
.btn-price-reference {
background-color: #3cc390;
border-color: #3cc390;
color: white;
}
.top-header {
padding-top: 1rem;
padding-bottom: 1rem;
background-color: lightgrey;
}
.search-box {
padding-top: .3rem;
}
.navbar {
background-color: #0064b2;
margin-bottom: .5rem;
}
.nav-item a {
color: white;
font-family: 'Asul', sans-serif;
font-size: 1.2rem;
}
/* Home Page */
.list-group-item:first-child {
border-top-right-radius: 0rem;
border-top-left-radius: 0rem;
background-color: #3acfef;
color: white;
}
.list-group-item:first-child h1 {
color: white;
font-size: 2rem;
font-family: 'Kavoon', cursive;
}
.list-group-item {
font-family: 'Asul', sans-serif;
}
.list-group-item-action:focus,
.list-group-item-action:hover {
background-color: #D84728;
color: white;
}
.img-fluid {
max-height: 320px;
}
.carousel-caption h3 {
color: #3cc390;
font-family: 'Asul', sans-serif;
}
.carousel-caption h4 {
color: #3cc390;
font-family: 'Asul', sans-serif;
}
.carousel-indicators li {
background-color: #D84728;
}
.best-sellers {
padding-top: 1.2rem;
}
.best-sellers h2 {
color: #3cc390;
font-family: 'Kavoon', cursive;
}
.popular-products {
padding-bottom: 1.2rem;
}
.product-title {
color: #8F8F8E;
font-family: 'Asul', sans-serif;
}
/*bottom */
.bottom_space {
margin-bottom: 1em;
}
.detail-buttons {
padding-top: 10px;
padding-bottom: 10px;
}
.social-buttons {
padding-top: 10px;
padding-bottom: 10px;
}
/* footer */
footer {
background-color: #8F8F8E;
min-height: 350px;
font-family: 'Open Sans', sans-serif;
bottom: 0;
}
.footerleft {
margin-top: 50px;
padding: 0 36px;
}
.logofooter {
margin-bottom: 10px;
font-size: 25px;
color: #fff;
font-weight: 700;
}
.footerleft p {
color: #fff;
font-size: 12px !important;
font-family: 'Open Sans', sans-serif;
margin-bottom: 15px;
}
.footerleft p i {
width: 20px;
color: #999;
}
.paddingtop-bottom {
margin-top: 50px;
}
.footer-ul {
list-style-type: none;
padding-left: 0px;
margin-left: 2px;
}
.footer-ul li {
line-height: 29px;
font-size: 12px;
}
.footer-ul li a {
color: #D84728;
transition: color 0.2s linear 0s, background 0.2s linear 0s;
}
.footer-ul i {
margin-right: 10px;
}
.footer-ul li a:hover {
transition: color 0.2s linear 0s, background 0.2s linear 0s;
color: #ff670f;
}
.social:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
}
.icon-ul {
list-style-type: none !important;
margin: 0px;
padding: 0px;
}
.icon-ul li {
line-height: 75px;
width: 100%;
float: left;
}
.icon {
float: left;
margin-right: 5px;
}
.copyright {
min-height: 40px;
background-color: #000000;
}
.copyright p {
text-align: left;
color: #FFF;
padding: 10px 0;
margin-bottom: 0px;
}
.heading7 {
font-size: 21px;
font-weight: 700;
color: #d9d6d6;
margin-bottom: 22px;
}
.post p {
font-size: 12px;
color: #FFF;
line-height: 20px;
}
.post p span {
display: block;
color: #8f8f8f;
}
.bottom_ul {
list-style-type: none;
float: right;
margin-bottom: 0px;
}
.bottom_ul li {
float: left;
line-height: 40px;
}
.bottom_ul li:after {
content: "/";
color: #FFF;
margin-right: 8px;
margin-left: 8px;
}
.bottom_ul li a {
color: #FFF;
font-size: 12px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="{% block description %}{% endblock %}">
<meta name="keywords" content="{% block keywords %}{% endblock %}" />
<meta name="google-site-verification" content="qgjJmLV5Fd901rWTMqI3oL119zWfarqGqkfPjvnwATk" />
<meta name="msvalidate.01" content="1960AF70A1C1582C7B84ECFF511B758A" />
<link href="https://fonts.googleapis.com/css?family=Kavoon" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Asul" rel="stylesheet">
<script src="https://use.fontawesome.com/9bb4a99f3b.js"></script>
<link rel="icon" href="../../favicon.ico">
<title>{% block title %}{% endblock %}</title>
<!-- Bootstrap core CSS -->
<link href="{% static " css/bootstrap.min.css " %}" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="{% static " css/starter-template.css " %}" rel="stylesheet">
</head>
<body>
<header class="top-header">
<div class="row">
<div class="col-md-4 text-center">
<img src="http://stackedservers.com/cdn/PRICE_REFERENCE.png">
</div>
<div class="col-md-6 text-center search-box">
<form method='GET' action='{% url "home" %}' class="form-inline my-2 my-lg-0">
<div class="input-group input-group-lg">
<input class="form-control form-control-lg" type="text" placeholder="Search" type='text' name='q' placeholder='Search For Products' value='{{ request.GET.q }}' />
<button class="btn" type="submit">Search</button>
</div>
</form>
</div>
</div>
</header>
<nav class="navbar sticky-top navbar-toggleable-md">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{% url " home " %}">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url " products:best_sellers " %}">Best Sellers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url " products:products_all " %}">All Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url " products:all_categories " %}">All Categories</a>
</li>
</ul>
</div>
</nav>
Here is example code of how you can achieve similar feature to reference website.
$(document).ready(function () {
var $menu = $('#navbar-main');
var menuOffsetY = $menu.offset().top;
function scroll() {
if ($(window).scrollTop() >= menuOffsetY) {
$menu.addClass('fixed-top');
} else {
$menu.removeClass('fixed-top');
}
}
document.onscroll = scroll;
});
body{
min-height: 2000px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-light bg-faded">
<div class="row">
<div class="col">
<a class="navbar-brand" href="#">Navbar</a>
</div>
<div class="col-8">
<form class="form-inline">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
<nav id="navbar-main" class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
<h1>Hello World</h1>
<footer id="footer" class="footer">
<p class="text-center"><br>This is my big footer, only test. :)</p>
</footer>
<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>
</body>
</html>
You can check the output in full screen here https://output.jsbin.com/goqaded
body{
font-family:Montserrat;
}
.navbar, .dropdown-menu{
background:#44c763;
border:none;
border-radius:10px;
}
.nav>li>a, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .dropdown-menu>li>a, .dropdown-menu>li{
border-bottom: 4px solid transparent;
}
.nav>li>a:focus, .nav>li>a:hover,.nav .open>a, .nav .open>a:focus, .nav .open>a:hover, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover{
border-bottom: 3px solid transparent;
background: none;
}
.navbar a, .dropdown-menu>li>a, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .navbar-toggle{
color: #fff;
}
.dropdown-menu{
-webkit-box-shadow: none;
box-shadow:none;
}
.nav li:hover:nth-child(8n+1), .nav li.active:nth-child(8n+1){
border-bottom: #4011E8 5px double;
}
.nav li:hover:nth-child(8n+2), .nav li.active:nth-child(8n+2){
border-bottom: #F3937D 5px double;
}
.nav li:hover:nth-child(8n+3), .nav li.active:nth-child(8n+3){
border-bottom: #FC3665 5px double;
}
.nav li:hover:nth-child(8n+4), .nav li.active:nth-child(8n+4){
border-bottom: #F9D86F 5px double;
}
.nav li:hover:nth-child(8n+5), .nav li.active:nth-child(8n+5){
border-bottom: #0FFA08 5px double;
}
.nav li:hover:nth-child(8n+6), .nav li.active:nth-child(8n+6){
border-bottom: #D1F9DF 5px double;
}
.nav li:hover:nth-child(8n+7), .nav li.active:nth-child(8n+7){
border-bottom: #FF748C 5px double;
}
.nav li:hover:nth-child(8n+8), .nav li.active:nth-child(8n+8){
border-bottom: #FFF078 5px double;
}
.navbar-toggle .icon-bar{
color: #fff;
background: #fff;
}
.social {
width: 90%;
float: left;
text-align: left;
}
ul.social-icons li {
display: inline-block;
}
ul.social-icons li a {
display: inline-block;
width: 50px;
height: 50px;
background: url("../images/img-sprite.png") no-repeat 0px 0px;
}
ul.social-icons li a.facebook {
background-position: 0px 0px;
}
ul.social-icons li a.facebook:hover {
background-position: 0px -50px;
}
ul.social-icons li a.instagram {
background-position: -150px 0px;
}
ul.social-icons li a.instagram:hover {
background-position: -150px -50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar-wrapper">
<div class="container-fluid">
<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="#">Company</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class=" dropdown">
<a href="#" class="dropdown-toggle " data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">About us <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class=" dropdown">
<a href="#" class="dropdown-toggle " data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Residential</a>
</li>
<li>Office</li>
<li>Mixed Use</li>
</ul>
</li>
<li>Products</li>
<li>Gallery</li>
</li>
</ul>
<ul class="nav navbar-nav pull-right">
<li class="">kunalyadav#gmail.com</li>
<li class="">984987454225</li>
<li class="connect-social">
<li></li>
<li></li>
</li>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
I have added the code to show social icons in the nav bar, but the image for icons is not shown, if hovered on the area it shows that it is clickable but image does not loads. Any help would be appreciated
It appears that you don't have anything inside of the href tags for your media links. In this codepen link, specifically on line 150 I added in an example image for the linkedin icon.
<li><img src="http://static2.intelimedia.pl/sub/Narysuj-sobie-Gonka-w17896.jpg" style="height:30px;"></li>
change some CSS & HTML
<div class="navbar-wrapper">
<div class="container-fluid">
<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="#">Company</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class=" dropdown">
<a href="#" class="dropdown-toggle " data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">About us <span class="caret"></span></a>
<ul class="dropdown-menu">
<li class=" dropdown">
<a href="#" class="dropdown-toggle " data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">Residential</a>
</li>
<li>Office</li>
<li>Mixed Use</li>
</ul>
</li>
<li>Products</li>
<li>Gallery</li>
</ul>
<ul class="nav navbar-nav pull-right">
<li class="">kunalyadav#gmail.com</li>
<li class="">984987454225</li>
<li class="social"></li>
<li class="social"></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
CSS
body{
font-family:Montserrat;
}
.navbar, .dropdown-menu{
background:#44c763;
border:none;
border-radius:10px;
}
.nav>li>a, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .dropdown-menu>li>a, .dropdown-menu>li{
border-bottom: 4px solid transparent;
}
.nav>li>a:focus, .nav>li>a:hover,.nav .open>a, .nav .open>a:focus, .nav .open>a:hover, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover{
border-bottom: 3px solid transparent;
background: none;
}
.navbar a, .dropdown-menu>li>a, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .navbar-toggle{
color: #fff;
}
.dropdown-menu{
-webkit-box-shadow: none;
box-shadow:none;
}
.nav li:hover:nth-child(8n+1), .nav li.active:nth-child(8n+1){
border-bottom: #4011E8 5px double;
}
.nav li:hover:nth-child(8n+2), .nav li.active:nth-child(8n+2){
border-bottom: #F3937D 5px double;
}
.nav li:hover:nth-child(8n+3), .nav li.active:nth-child(8n+3){
border-bottom: #FC3665 5px double;
}
.nav li:hover:nth-child(8n+4), .nav li.active:nth-child(8n+4){
border-bottom: #F9D86F 5px double;
}
.nav li:hover:nth-child(8n+5), .nav li.active:nth-child(8n+5){
border-bottom: #0FFA08 5px double;
}
.nav li:hover:nth-child(8n+6), .nav li.active:nth-child(8n+6){
border-bottom: #D1F9DF 5px double;
}
.nav li:hover:nth-child(8n+7), .nav li.active:nth-child(8n+7){
border-bottom: #FF748C 5px double;
}
.nav li:hover:nth-child(8n+8), .nav li.active:nth-child(8n+8){
border-bottom: #FFF078 5px double;
}
.navbar-toggle .icon-bar{
color: #fff;
background: #fff;
}
.social {
width: 90%;
text-align: left;
}
ul.social-icons li {
display: inline-block;
}
li.social a {
display: inline-block;
width: 50px;
height: 50px;
background: url("../images/img-sprite.png") no-repeat 0px 0px;
}
li.social a.facebook {
background-position: 0px 0px;
}
li.social a.facebook:hover {
background-position: 0px -50px;
}
li.social a.instagram {
background-position: -150px 0px;
}
li.social a.instagram:hover {
background-position: -150px -50px;
}
https://jsfiddle.net/7pycxo8k/3/
I'm just learning Bootstrap 3 and I want to use that in my website so it's still comfortable to access from mobile devices.
I want to achieve something like this:
but this is as far as I get.
This is the code:
jsfiddle
.navbar-brand {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
height:30px;
}
.navbar-brand:hover,
.navbar-brand:focus {
text-decoration: none;
}
.navbar-brand > img {
display: inline-block;
margin:auto;
}
#media (min-width: 768px) {
.navbar > .container .navbar-brand,
.navbar > .container-fluid .navbar-brand {
margin-left: -15px;
}
}
.navbar .divider-vertical {
height: 50px;
margin: 0 9px;
border-right: 1px solid #ffffff;
border-left: 1px solid #f2f2f2;
}
.navbar-inverse .divider-vertical {
border-right-color: #222222;
border-left-color: #111111;
}
#media (max-width: 767px) {
.navbar-collapse .nav > .divider-vertical {
display: none;
}
}
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<img src="image/nav_logo.png"/>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-left">
<li class="active">Home</li>
<li class="divider-vertical"></li>
<li>Product</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li class="divider-vertical"></li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
<div class="navbar navbar-inverse navbar-fixed-bottom">
<div class = "container">
<div class="social">
<a class="pull-left icon" href="#" data-icon = "f"></a>
<a class="pull-left icon" href="#" data-icon = "i"></a>
</div>
</div>
</div>
</body>
</html>
I would have done this:
nav {
width: 100%;
}
.img-holder {
width: 50px;
height: 50px;
margin: 0 auto;
background-color: red;
position: relative;
}
ul,li {margin:0;padding:0;}
ul {
width: 304px;
position: absolute;
top: 20px;
}
li {
width: 150px;
text-align: center;
float: left;
display: inline-block;
border: 1px solid #d8d8d8;
}
.left-ul {
left: 50%;
margin-left: -350px;
}
.right-ul {
right: 50%;
margin-right: -350px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div class="img-wrapper">
<ul class="left-ul">
<li>ABOUT</li>
<li>PRODUCT</li>
</ul>
<div class="img-holder"></div>
<ul class="right-ul">
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</div>
</nav>
Just add this to your css
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
max-width: 480px; /**change the max width to what ever you want you can add it in media query too*/
margin: 0 auto; /**center the menu*/
}
live Demo
I haven't tried it myself but you could try using input group classes: bootstrap: align input with button.
In general, if you know the height of a block element, if you set its line height to that height you'll get one line that is centered vertically in that space; just watch out for items going to two lines or more, then it breaks.
You will need to make a few changes to both your CSS and HTML.
HTML-wise, make all the items (inlcluding the image), navbar li items and remove the left and right navbar classes.
Then you will need to center the navbar using in its uncollapsed state by applying text-align on the parent and unfloating the children, using:
#media (min-width: 768px) {
.navbar .navbar-collapse {
text-align: center;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
}
Demo Fiddle
.navbar-brand {
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
height: 30px;
}
.navbar-brand:hover,
.navbar-brand:focus {
text-decoration: none;
}
.navbar-brand > img {
display: inline-block;
margin: auto;
}
#media (min-width: 768px) {
.navbar > .container .navbar-brand,
.navbar > .container-fluid .navbar-brand {
margin-left: -15px;
}
}
.navbar .divider-vertical {
height: 50px;
margin: 0 9px;
border-right: 1px solid #ffffff;
border-left: 1px solid #f2f2f2;
}
.navbar-inverse .divider-vertical {
border-right-color: #222222;
border-left-color: #111111;
}
#media (max-width: 767px) {
.navbar-collapse .nav > .divider-vertical {
display: none;
}
}
#media (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
}
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> <span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse ">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li class="divider-vertical"></li>
<li>Product
</li>
<li>
<a href="#" class="navbar-brand">
<img src="image/nav_logo.png" />
</a>
</li>
<li>About
</li>
<li class="divider-vertical"></li>
<li>Contact
</li>
</ul>
</div>
</div>
</div>
<div class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container">
<div class="social">
<a class="pull-left icon" href="#" data-icon="f"></a>
<a class="pull-left icon" href="#" data-icon="i"></a>
</div>
</div>
</div>