I'm trying to add click event on my button in child component and then hide side bar component which I imported in parent component. I read many articles and watched some videos but i can't solve this at the moment.
Child - Navbar.vue
<template>
<div id="header">
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
<div class="toggle-btn ml-3">
<button type="button" class="close" #click="closeSidebar" aria-label="Close">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="nav-head mx-auto">
<a class="navbar-brand" href="#">Contact Book</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse col-lg-10 mx-auto" id="navbarSupportedContent">
<form class="form-inline col-md-12 my-2 my-lg-0 justify-content-center">
<input class="form-control shadow-none col-md-6 mr-sm-2" type="search" placeholder="Search"
aria-label="Search">
<button class="btn btn-outline-secondary shadow-none my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</div>
</template>
<script>
import sidebar from './Sidebar.vue'
import contactList from './ContactList.vue'
export default {
data() {
return {
}
},
methods: {
closeSidebar() {
this.$emit('slideLeft');
document.querySelector('.close').classList.toggle('rotate');
},
},
components: {
sidebar,
contactList
}
}
</script>
Parent - App.vue
<template>
<div id="app">
<navbar></navbar>
<div class="d-flex">
<transition name="ease">
<sidebar class="slide" v-show="clickToggle" #slideLeft="toggleSidebar"></sidebar>
</transition>
<contact-list></contact-list>
</div>
<modal></modal>
</div>
</template>
<script>
import sidebar from './components/Sidebar.vue'
import navbar from './components/Navbar.vue'
import contactList from './components/ContactList.vue'
import modal from './components/AddContactModal.vue'
export default {
name: 'app',
data() {
return {
clickToggle: true
}
},
methods: {
toggleSidebar() {
this.clickToggle = !this.clickToggle;
}
},
components: {
sidebar,
navbar,
contactList,
modal
}
}
</script>
And this is another child component - Sidebar.vue which i'm trying to hide through parent component
<template>
<div id="sidebar">
<div class="d-flex" id="wrapper">
<!-- Sidebar -->
<div class="bg-light border-right" id="sidebar-wrapper">
<div class="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-action bg-light">
<i class="fa fa-id-card"></i><span class="item-desc">All Contacts</span></a>
<a href="#" class="list-group-item list-group-item-action bg-light" data-toggle="modal" data-target="#exampleModalScrollable">
<i class="fa fa-user-plus"></i><span class="item-desc">Add Contact</span></a>
<a href="#" class="list-group-item list-group-item-action bg-light">
<i class="fa fa-users"></i><span class="item-desc">Groups</span></a>
<a href="#" class="list-group-item list-group-item-action bg-light">
<i class="fa fa-share-alt"></i><span class="item-desc">Share Contacts</span></a>
<a href="#" class="list-group-item list-group-item-action bg-light">
<i class="fa fa-trash"></i><span class="item-desc">Trash</span></a>
</div>
</div>
</div>
</div>
</template>
<script>
import contactList from './ContactList.vue'
import modal from './AddContactModal.vue'
export default {
methods: {
},
components: {
contactList, modal
}
}
</script>
<style lang="">
#sidebar {
-webkit-transition: margin .25s ease-out;
-moz-transition: margin .25s ease-out;
-o-transition: margin .25s ease-out;
transition: margin .25s ease-out;
}
.hide {
margin-left: -16rem !important;
}
#wrapper {
overflow-x: hidden;
}
#sidebar-wrapper {
min-height: calc(100vh - 57px);
-webkit-transition: margin .25s ease-out;
-moz-transition: margin .25s ease-out;
-o-transition: margin .25s ease-out;
transition: margin .25s ease-out;
}
#sidebar-wrapper .sidebar-heading {
padding: 0.875rem 1.25rem;
font-size: 1.2rem;
}
#sidebar-wrapper .sidebar-heading i {
transform: rotate(90deg);
}
#sidebar-wrapper .list-group {
width: 16rem;
}
#sidebar-wrapper .list-group .list-group-item {
padding: 20px 30px;
}
#sidebar-wrapper .list-group .list-group-item i {
width: 40px;
padding: 0 10px;
}
#page-content-wrapper {
min-width: 100vw;
}
#wrapper.toggled #sidebar-wrapper {
margin-left: 0;
}
#media (min-width: 768px) {
#sidebar-wrapper {
margin-left: 0;
}
#page-content-wrapper {
min-width: 0;
width: 100%;
}
#wrapper.toggled #sidebar-wrapper {
margin-left: -15rem;
}
}
</style>
Related
Trying to close the offcanvas with the close button inside the offcanvas. Right now, I can only close it with the button I opened it with. What did I do wrong? See attached code.
(function mainScript() {
"use strict";
const offcanvasToggle = document.querySelector('[data-bs-toggle="offcanvas"], [data-bs-dissmiss="offcanvas"]');
const offcanvasCollapse = document.querySelector(".offcanvas-collapse");
offcanvasToggle.addEventListener("click", function () {
offcanvasCollapse.classList.toggle("open");
});
})();
.offcanvas-collapse {
position: fixed;
top: 0;
/* Height of navbar */
bottom: 0;
left: 100%;
width: 30%;
padding: 8px 8px;
overflow-y: auto;
visibility: hidden;
background-color: #343a40;
transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.offcanvas-collapse.open {
visibility: visible;
transform: translateX(-100%);
}
<div id="navbar" class="flex-wrap center">
<div id="nav-toggler-wrapper">
<button id="nav-toggler" aria-label="Menü" data-bs-toggle="offcanvas" aria-label="Toggle navigation">
<span class="menu-label">Menu</span>
</button>
</div>
</div>
<div id="sidenav" class="offcanvas offcanvas-collapse">
<div class="offcanvas-header flex-wrap center between">
<button id="nav-toggler" data-bs-dissmiss="offcanvas" aria-label="Toggle navigation">
<span class="menu-label">Close</span>
</button>
</div>
</div>
You need to use querySelectorAll instead of querySelector, because you try to select more then one element and use forEach for apply eventListner to each one like:
(function mainScript() {
"use strict";
const offcanvasToggle = document.querySelectorAll('[data-bs-toggle="offcanvas"], [data-bs-dissmiss="offcanvas"]');
const offcanvasCollapse = document.querySelector(".offcanvas-collapse");
offcanvasToggle.forEach(el => {
el.addEventListener("click", function() {
offcanvasCollapse.classList.toggle("open");
});
});
})();
.offcanvas-collapse {
position: fixed;
top: 0;
/* Height of navbar */
bottom: 0;
left: 100%;
width: 30%;
padding: 8px 8px;
overflow-y: auto;
visibility: hidden;
background-color: #343a40;
transition: transform 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.offcanvas-collapse.open {
visibility: visible;
transform: translateX(-100%);
}
<div id="navbar" class="flex-wrap center">
<div id="nav-toggler-wrapper">
<button id="nav-toggler" aria-label="Menü" data-bs-toggle="offcanvas" aria-label="Toggle navigation">
<span class="menu-label">Menu</span>
</button>
</div>
</div>
<div id="sidenav" class="offcanvas offcanvas-collapse">
<div class="offcanvas-header flex-wrap center between">
<button id="nav-toggler" data-bs-dissmiss="offcanvas" aria-label="Toggle navigation">
<span class="menu-label">Close</span>
</button>
</div>
</div>
What I want is to close the search bar if I click anywhere but the search bar elements (input and submit button). What I made so far is use toggle to open and close it and this is working. But I couldn't find a way so far to close it if I click anywhere outside the div.
Codepen: https://codepen.io/hateusall/pen/abdedJE
HTML:
<header>
<div class="container-fluid">
<div class="navbarCustom pleft pright ">
<div class="navbar-brand">
<img src="./images/x.png" alt="x" class="header-logo">
</div>
<ul class="list-unstyled d-xl-flex align-items-center navbar-custom">
<li class="dropdown " >Lorem Ipsum</li>
<li class="dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Lorem Ipsum </li>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Lorem Ipsum</a>
<a class="dropdown-item" href="#">Lorem Ipsum</a>
<a class="dropdown-item" href="#">Lorem Ipsum</a>
</div>
<li> Lorem Ipsum</li>
<li> <button class="btn-wpp"> Whatsapp </button></li>
<li class="position-relative wrapper-bar">
<div class="search-icon search-toggler">
<i class="fas fa-search search"></i></div>
<div class="search-wrapper" >
<form action="#" class="">
<input type="text" placeholder="Search" class="search-input" id="info">
<button class="border-0 bg-dark text-white p-2 btn-search"><i class="fas fa-search" id="info2"></i></button>
</form>
</div>
</li>
</ul>
<div class="navbar-toggler text-white d-xl-none">
<span class="line line1"></span>
<span class="line line2"></span>
<span class="line line3"></span>
</div>
</div>
</div>
</header>
const searchToggler = document.querySelector(".search-toggler");
const searchWrapper = document.querySelector(".search-wrapper");
searchToggler.addEventListener("click", function(e){
if ( !$(event.target).hasClass('search-toggler')) {
$(searchWrapper).toggleClass("search-wrapper-active");
close();
}
});
function close() {
if (!$(event.target).hasClass('search-wrapper-active')) {
$(document).click(function(e){
/* here i would remove active classes */
console.log("test")
})
}
}
}
DEMO
const $toggler = $(".search-toggler");
const $wrapper = $(".search-wrapper");
$toggler.on("click", function() {
$wrapper.toggleClass("search-wrapper-active");
});
$(document).on('click', function (e) {
if ($(".search-toggler, .search-wrapper").has(e.target).length === 0) {
$wrapper.removeClass("search-wrapper-active");
}
});
You can do it like this:
[...document.querySelectorAll('body')].forEach(el => {
//get all elements in body
el.addEventListener('click', event => {
//add addEventListener
if (event.target.className.includes("search") === false) {
//if clicked element does not have class search
searchWrapper.classList.remove("search-wrapper-active");
//remove search-wrapper-active class to close it
}
})
})
And that way you don't need anything else, just combine it together to close it and open (also benefit, using only JS):
const searchWrapper = document.querySelector(".search-wrapper");
[...document.querySelectorAll('body')].forEach(el => {
el.addEventListener('click', event => {
if (event.target.className.includes("search") === false) {
searchWrapper.classList.remove("search-wrapper-active");
} else {
searchWrapper.classList.toggle("search-wrapper-active");
}
})
})
Keep in mind now:
now you have event listener on all elements on page, if you need it for something else, just expand this to suit your needs, no need to add event listener click again anywhere.
const searchWrapper = document.querySelector(".search-wrapper");
[...document.querySelectorAll('body')].forEach(el => {
el.addEventListener('click', event => {
if (event.target.className.includes("search") === false) {
searchWrapper.classList.remove("search-wrapper-active");
} else {
searchWrapper.classList.toggle("search-wrapper-active");
}
})
})
html {
height: 100%;
}
body {
min-height: 100%;
}
.search {
cursor: pointer !important;
z-index: 99999;
position: relative;
}
.search-active {
cursor: pointer;
z-index: 99999;
transition: .4s all ease-in-out;
pointer-events: all !Important;
}
.search-input {
z-index: 99999;
}
.search-image {
cursor: pointer;
z-index: 99999;
}
.search-submit {
z-index: 99999999999999999999;
cursor: pointer !important;
position: relative;
pointer-events: all !Important;
}
.toggler-image {
z-index: 9999;
position: relative;
color: #000;
}
.search-input {
border-radius: .2rem;
padding-left: 16px;
z-index: 9;
position: relative;
transition: .3s ease-in-out all;
}
.search-toggler {
z-index: 99;
position: relative;
transition: .3s ease-in-out all;
}
.search-wrapper {
opacity: 0;
pointer-events: none;
transition: .3s ease-in-out all;
position: absolute;
}
.search-wrapper-active {
transform: translateY(35px);
pointer-events: all;
opacity: 1;
transition: .3s ease-in-out all;
}
.btn-search {
position: absolute;
left: 100%;
height: 45px;
width: 50px;
}
header {
background-color: #000;
width: 100vw;
padding: 32px 0px;
}
.pleft {
padding-left: 380px;
}
.custom-cont {
padding-left: 380px;
padding-right: 280px;
}
.pright {
padding-right: 280px;
}
.navbarCustom {
display: flex;
align-items: center;
justify-content: space-between;
}
header li {
color: #fff;
margin-right: 49px;
font-size: 16px;
font-family: var(--mbold);
cursor: pointer;
}
header li:hover {
color: #4aba58;
transition: .3s;
}
header ul {
margin-bottom: 0;
}
.btn-wpp {
background-color: #4aba58;
border: none;
padding: 17px 21px;
font-size: 16px;
color: #fff;
border-radius: .4rem;
transition: .4s;
}
.btn-wpp:hover {
filter: brightness(120%);
transition: .4s;
}
.cart-value {
background-color: var(--verdeClaro);
width: 20px;
height: 20px;
display: block;
position: absolute;
top: 0;
right: 0;
text-align: center;
border-radius: 50%;
font-size: 13px;
transform: translate(80%, -80%);
}
.cart-value:hover {
color: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<section class="wrapper">
<header>
<div class="container-fluid">
<div class="navbarCustom pleft pright ">
<div class="navbar-brand">
<img src="./images/x" alt="x" class="header-logo">
</div>
<ul class="list-unstyled d-xl-flex align-items-center navbar-custom">
<li class="dropdown ">Lorem </li>
<li class="dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Lorem Ipsum </li>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Lorem Ipsum</a>
<a class="dropdown-item" href="#">Lorem Ipsum</a>
<a class="dropdown-item" href="#">Lorem Ipsum</a>
</div>
<li> Lorem </li>
<li> <button class="btn-wpp"> Whatsapp </button></li>
<li class="position-relative wrapper-bar">
<div class="search-icon search-toggler">
<i class="fas fa-search search">toggler</i> </div>
<div class="search-wrapper">
<form action="#" class="">
<input type="text" placeholder="Pesquisar" class="search-input" id="info">
<button class="border-0 bg-dark text-white p-2 btn-search"><i class="fas fa-search" id="info2"></i></button>
</form>
</div>
</li>
<li class="cart position-relative">
<div class="cart-value">1</div>
<img src=".//images/carrinho.png" alt="">
</li>
</ul>
<div class="navbar-toggler text-white d-xl-none">
<span class="line line1"></span>
<span class="line line2"></span>
<span class="line line3"></span>
</div>
</div>
</div>
</header>
<h1>TEST
<h1>
I am using a sidebar to have a list of URL links or buttons if you will but I also need some dropdown buttons/lists in there as well.
I am having an issue of having it look consistently alike and also fill the width of the container also as front end isn't my strongest suite am struggling to get it to look how I want.
You can see that the list within the sidebar is the full width across.....but the button isn't so I need to get it the whole way across and look consistent with the list or alternatively somehow throw a drop down menu on top of the list if required, I have tried to maniputlate it via using btn-block and width 100% to no joy
I need to have a separate buttons for the drop down button seen in example.
jQuery(function($) {
$(document).ready(function() {
$('[data-toggle=offcanvas]').click(function() {
if ($('.sidebar-offcanvas').css('background-color') == 'rgb(255, 255, 255)') {
$('.list-group-item').attr('tabindex', '-1');
} else {
$('.list-group-item').attr('tabindex', '');
}
$('.row-offcanvas').toggleClass('active');
});
});
});
body {
padding-top: 50px;
}
/*
* Style tweaks
* --------------------------------------------------
*/
html,
body {
overflow-x: hidden;
/* Prevent scroll on narrow devices */
height: 100%;
}
body {
padding-top: 70px;
}
footer {
padding: 30px 0;
}
.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
background-color: transparent;
color: #999999;
}
.head {
background: #668B8B;
color: #000000;
}
.side-contain {
margin-top: 5px;
border: 2px solid #668B8B;
border-radius: 10px;
}
/*
* Off Canvas
* --------------------------------------------------
* Greater thav 768px shows the menu by default and also flips the semantics
* The issue is to show menu for large screens and to hide for small
* Also need to do something clever to turn off the tabs for when the navigation is hidden
* Otherwise keyboard users cannot find the focus point
* (For now I will ignore that for mobile users and also not worry about
* screen re-sizing popping the menu out.)
*/
#media screen and (min-width: 768px) {
.row-offcanvas {
position: relative;
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
transition: all .25s ease-out;
}
.row-offcanvas-right {
right: 25%;
}
.row-offcanvas-left {
left: 25%;
}
.row-offcanvas-right .sidebar-offcanvas {
right: -25%;
/* 3 columns */
background-color: rgb(255, 255, 255);
}
.row-offcanvas-left .sidebar-offcanvas {
left: -25%;
/* 3 columns */
background-color: rgb(255, 255, 255);
}
.row-offcanvas-right.active {
right: 0;
/* 3 columns */
}
.row-offcanvas-left.active {
left: 0;
/* 3 columns */
}
.row-offcanvas-right.active .sidebar-offcanvas {
background-color: rgb(254, 254, 254);
}
.row-offcanvas-left.active .sidebar-offcanvas {
background-color: rgb(254, 254, 254);
}
.row-offcanvas .content {
width: 75%;
/* 9 columns */
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
transition: all .25s ease-out;
}
.row-offcanvas.active .content {
width: 100%;
/* 12 columns */
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 25%;
/* 3 columns */
}
}
#media screen and (max-width: 767px) {
.row-offcanvas {
position: relative;
-webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
transition: all .25s ease-out;
}
.row-offcanvas-right {
right: 0;
}
.row-offcanvas-left {
left: 0;
}
.row-offcanvas-right .sidebar-offcanvas {
right: -50%;
/* 6 columns */
}
.row-offcanvas-left .sidebar-offcanvas {
left: -50%;
/* 6 columns */
}
.row-offcanvas-right.active {
right: 50%;
/* 6 columns */
}
.row-offcanvas-left.active {
left: 50%;
/* 6 columns */
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 50%;
/* 6 columns */
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
<meta charset="utf-8" />
<title>Test</title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand">Test</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form action="/logoutadmin" class="navbar-form navbar-right">
<button class="btn btn-success" type="submit" id="user" onsubmit="return false">Log Out</button>
</form>
</div>
</div>
</nav>
<div class="container-fluid">
<button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
<div class="row row-offcanvas row-offcanvas-left">
<div class="col-xs-6 col-sm-2 sidebar-offcanvas" id="sidebar" role="navigation">
<div class="side-contain">
<div class="panel-heading head" role="tab" id="headingOne">
<h2 class="panel-title">My Account</h2>
</div>
<div class="btn-group">
<button class="btn btn-default" type="button">Dropdown</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li>HTML
</li>
<li>CSS
</li>
<li>JavaScript
</li>
</ul>
</div>
- Placeholder
- Placeholder
- Placeholder
- Placeholder
</div>
</div>
<!--/span-->
<div class="col-xs-12 col-sm-10 content">
<div>
<h1 class="main-head">Test</h1>
<p class="lead">Hallo
</div>
</div>
<!--/span-->
</div>
<!--/row-->
</div>
<!-- /.container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</body>
</html>
I have attached a JS fiddle also:
https://jsfiddle.net/z2a7jr68/1/
You can add : btn-group-justified class to btn-group and width : 90% to next button
<div class="btn-group btn-group-justified" role="group">
<button class="btn btn-default" type="button" style="
width: 90%;
">Dropdown</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li>HTML</li>
<li><a `enter code here`href="#">CSS</a></li>
<li>JavaScript</li>
</ul>
</div>
Add following style to your drop down buttons.
<div class="btn-group" style="width:100%">
<button class="btn btn-default" type="button" style="width:80%">Dropdown</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="width:20%;">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" style="width:100%">
<li>HTML
</li>
<li>CSS
</li>
<li>JavaScript
</li>
I am trying to create an Offcanvas Left nav bar that can be brought into view on button click.
Currently it opens fine but when it closes the top navigation of the page is very jumpy and closes instantly without an animation.
The left bar also overlaps the footer and the footer doesn't move the way it should like the top nav bar.
Bootply
Added -webkit-transition: all 1s ease; to the footer and wrapper class, because everything has to be animated.
I set overflow hidden on html, body selector, this is a fix for the jumpy footer.
The only thing left to do now is adding two lines in your javascript:
$(".footer").css('-webkit-transform', 'translate(20%, 0)');
and
(".footer").css('-webkit-transform', 'translate(0, 0)');
I'm no expert so feel free to correct me, but i think it works the way you want it to.
$(document).ready(function() {
var menu = "close";
$(".menuToggle").click(function() {
if (menu == "close") {
$(".leftNavbar").css("-webkit-transform", "translate(0, 0)");
$(".wrapper").css('-webkit-transform', 'translate(20%, 0)');
$(".footer").css('-webkit-transform', 'translate(20%, 0)');
menu = "open";
} else {
$(".leftNavbar").css("-webkit-transform", "translate(-100%, 0)");
$(".wrapper").css('-webkit-transform', 'translate(0, 0)');
$(".footer").css('-webkit-transform', 'translate(0, 0)');
menu = "close";
}
});
});
/* CSS used here will be applied after bootstrap.css */
.leftNavbar {
position: fixed;
width: 20%;
left: 0;
overflow: hidden;
background-color: green;
-webkit-transform: translate(-100%, 0);
-webkit-transition: all 1s ease;
}
.menuToggle .navbar-toggle .icon-bar {
background-color: black;
}
.menuToggle .navbar-toggle {
display: block;
float: left;
border: 1px solid gray;
margin-left: 5px;
margin-top: -10px;
}
html,
body {
height: 100%;
overflow: hidden;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -40px;
-webkit-transition: all 1s ease;
}
footer,
.push {
min-height: 40px;
height: auto;
}
.footer {
color: white;
-webkit-transition: all 1s ease;
}
<div class="leftNavbar">
<h2>Sidebar menu</h2>
<nav>
Home
About
Contact
Prices
</nav>
</div>
<div class="wrapper">
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<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>
<a class="navbar-brand">
<img id="logo" src="Logos/LetterHillustrator.png">
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>Services
</li>
<li>Our Prices
</li>
<li>About Us
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>
</div>
<!--------SIDE NAVBAR-------->
<!--<div class="leftNavbar">
<ul class="nav nav-pills nav-stacked">
<li class="active"><span class="glyphicon glyphicon-chevron-right"></span> Home</li>
<li><span class="glyphicon glyphicon-chevron-right"></span> Option 1</li>
<li><span class="glyphicon glyphicon-chevron-right"></span> Option 2 (active)</li>
<li><span class="glyphicon glyphicon-chevron-right"></span> Option 3</li>
<li><span class="glyphicon glyphicon-chevron-right"></span> Option 4</li>
<li><span class="glyphicon glyphicon-chevron-right"></span> Option 5</li>
</ul>
</div>-->
<!-----SIDEBAR------->
<div class="menuToggle">
<button class="navbar-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="push"></div>
</div>
<footer class="footer navbar-inverse">
<div class="container">
<h6 style="width:50%; text-align:center;">34 The Broadway, Greenford UB6 9PT, tel: 020 8575 0880, Email: info#GoodHome.co.uk</h6>
</div>
</footer>
Trying to get a nabber brand image to be displayed. Working fine across Chrome/Safari/IE but not in FF. When the user scrolls up, the brand image grows.
http://sam-stone.co.uk/sam/
I have tried making the image static but that does not show either. Any ideas?
CSS:
.navbar-brand img {
max-height: 0px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
margin-top: -75px;
-webkit-filter: drop-shadow(0px 12px 25px rgba(0,0,0,0.5));
filter: url(#drop-shadow);
-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=12, Color='#444')";
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=12, Color='#444')";
}
.shrink .navbar-brand img {
max-height: 100px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
}
JS:
$(window).scroll(function() {
if ($(document).scrollTop() > 100) {
$('.navbar').addClass('shrink');
}
else {
$('.navbar').removeClass('shrink'); }
});
HTML:
<nav class="navbar navbar-default navbar-fixed-top normal" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="images/logoCircle.png" /></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="navbar-top-right">
<li>
<form action="demo_form.asp">
<input type="text" class="form-control empty" id="iconified" placeholder=" Search Blog" style="font-family:Arial, FontAwesome">
<br>
</form>
</li>
<li><img src = "images/sample.png"> Samples (0 Samples)</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active">HOME</li>
<li>PRODUCTS</li>
<li>ABOUT</li>
<li>SHOWCASE</li>
<li>NEWS</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</nav>