When my web design collapsed to mobile view, the dropdown menu doesn't push down the button below it, instead the menu shows up half way down the page. This only seems to happen on pages with the carousel function and lightbox2.
Any help would be appreciated.
I have tried this which was suggested in another topic:
.navbar-header {
position: relative;
z-index: 1;
}
Here's the Navbar code:
<nav>
<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="#defaultNavbar1" aria-expanded="false"><span class="glyphicon glyphicon-menu-hamburger"></span></button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="defaultNavbar1">
<ul class="nav navbar-nav">
<li class="active">Home<span class="sr-only">(current)</span></li>
<li>About Me</li>
<li class="dropdown">Photography<span class="caret"></span>
<ul class="dropdown-menu">
<li>Events</li>
<li role="separator" class="divider"></li>
<li>Music</li>
<li role="separator" class="divider"></li>
<li>Nature</li>
<li role="separator" class="divider"></li>
<li>People</li>
</ul>
</li>
<li>Contact Me</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
and the scripts at the bottom`
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="js/bootstrap-3.3.5.js" type="text/javascript"></script>
<script src="js/lightbox.js" type="application/javascript"></script>
<script>
lightbox.option({
'resizeDuration': 600,
'wrapAround': true,
'alwaysShowNavOnTouchDevices': true,
'fitImagesInViewport': true
})
</script>`
Fixed it.
I switched css files earlier on in the day and I didn't realise a .dropdown-menu was missing from the bootstrap css.
.navbar-nav .open .dropdown-menu
I would suggest you to try putting the script tags at top ins. it might work.
Related
I have 6 fields in my navbar. 5 of them are links and one is dropdown. When I scroll the page all field remains fixed except the dropdown field.enter image description here
Below is my code:
<div class="collapse navbar-collapse" id="Food-fair-toggle">
<ul class="nav navbar-nav navbar-right">
<li>about</li>
<li>menu</li>
<li>featured</li>
<li>reservation</li>
<li>contact</li>
<li>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Deliveroo
Foodora
UberEats
</div>
</div>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
Can you try the below menu bar along with the dropdown menus.
https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_navbar_dropdown&stacked=h
Please try with below HTML, JS and CSS. Just change structure, create separate for dropdown with same class. Then you must add id attribute for menu UL.
HTML:
<div class="collapse navbar-collapse" id="Food-fair-toggle">
<ul class="nav navbar-nav navbar-right" id="myHeader">
<li>about</li>
<li>menu</li>
<li>featured</li>
<li>reservation</li>
<li>contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Deliveroo
Foodora
UberEats
</div>
</div>
</li>
</ul>
</div>
JS:
Copy & paste the JS in footer section.
<script>
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
</script>
CSS:
ul.sticky {
position: fixed !important;
background: #27752A;
}
Below Example shows how to add dropdown menu in bootstrap-4 navbar.
And if you want to fix the navbar on top, then you can add class='fixed-top' in <nav> component then menu will stick to the top while you scroll down.
Or if you dont want navbar menu fixed on top then you can remove that class fixed-top from navbar.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="bg-success navbar navbar-dark navbar-expand-sm">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#about">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pricing">MENU</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#featured-dish">FEATURED</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#reserve">RESERVATION</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">CONTACT</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
DROPDOWN
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="https://deliveroo.nl/">Deliveroo</a>
<a class="dropdown-item" href="https://www.foodora.nl/">Foodora</a>
<a class="dropdown-item" href="https://www.ubereats.com//">UberEats</a>
</div>
</li>
</ul>
</nav>
<br>
<div class="container">
<h3>Navbar With Dropdown</h3>
<p>This example adds a dropdown menu in the fixed navbar on Top,This example adds a dropdown menu in the fixed navbar on Top, This example adds a dropdown menu in the fixed navbar on Top, This example adds a dropdown menu in the fixed navbar on Top, This example adds a dropdown menu in the fixed navbar on Top.</p>
</div>
</body>
</html>
I want to know which element was clicked in bootstrap menu.
I have a menu which has dropdown, so I want to know which menu item was clicked and I want to store it in browser local storage how to do this?
JS FIDDLE
I tried this for getting the menu item clicked but it does not work:
document.addEventListener('click', function(e) {
alert(e.target.id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<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>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li>Separated link
</li>
<li role="separator" class="divider"></li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link
</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li role="separator" class="divider"></li>
<li>Separated link
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
Also how to store and retrieve thier value from database?
add a delegate click event to .dropdown-menu for the anchors:-
updated fiddle
$('.dropdown-menu').on('click', 'a', function(e){
// 'this' is the clicked anchor
var text = this.text;
var href = this.href;
alert(text);
// here add to local storage;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
First of all, you have to be more specific about what elements you want to add a listener to. You have to add a specific class to these elements. Then you can do this easily with jQuery:
$(".yourClassName"){
//$(this) will refer to the element
}
That way you can store in local storage the content of the clicked element:
$(".yourClassName"){
var value = $(this).text();
var id = $(this).attr("id");
localStorage.setItem(id , value );
}
And that way you retrieve their value:
var value = localStorage.getItem(itemId);
On my mobile part of the site I want to show the submenu without having to click/hover the parent.
HTML:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown "><a class="dropdown-toggle" href="/">Home</a>
<ul class="dropdown-menu" >
<li>News</li>
<li>Contact
<li>About us</li>
</ul>
<li>
</ul>
</div>
I want to show the submenu without having to click or hover the parent. Codes I'm using is CSS, Javascript and Jquery so I can use one (or all) of them to make this. Using the latest version of Bootstrap to make the site (3.3.6).
EDIT
The JSFiddle: https://jsfiddle.net/uvd5jp0o/
Here you can also see I've made the submenu display on hover in jquery.
You can add the class visible-xs- to make the nav displayed in mobile browsers
Checkout the bootstrap website
http://getbootstrap.com/css/
So, for extra small (xs) screens for example, the available
.visible-- classes are: .visible-xs-block, .visible-xs-inline, and
.visible-xs-inline-block.
Try This:
DEMO
Use some piece of script :)
HTML:
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul id="Drp" class="dropdown-menu visible-xs">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
SCRIPT:
$(document).ready(function(){
CheckScreenSize();
});
window.onresize = function(event) {
CheckScreenSize();
};
function CheckScreenSize(){
if($(window).width()<768){
$("#Drp").addClass('visible-xs');
}else
{
$("#Drp").removeClass('visible-xs');
}
}
Or you can set a width when you whant the menu to show, like this:
window.onload = checkWindowSize;
window.onresize = checkWindowSize;
function checkWindowSize() {
if ($(window).width() < "768") { //example width of 768px
$("#bs-example-navbar-collapse-1 li").addClass('open');
}else{
$("#bs-example-navbar-collapse-1 li").removeClass('open');
}
}
Or you can use the built in class in bootstrap and add it to your ul-element like this:
<ul class="dropdown-menu visible-xs">
The codes will check the window width and only react when the width is smaller then 768px
Rookie here trying to learn code on my own.. I have ran into a problem where my Navbar-collapse now overlaps the content of my page and this time it is a problem because i'd like the background of the navbar-collapse to have background: transparent; .. My Jquery sucks but i'm thinking that it may need to be used here.. it also needs to account for the dropdown menus .. as they may need to push the body of the page down as well.. my code:
<body>
<!-- Start Navbar -->
<nav class="navbar navbar-default" role="navigation" id="myNavbar">
<div class="container">
<!-- Brand and Toggle get grouped -->
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target ="#navbar-responsive-collapse">
<span>Tap me!</span>
</button>
<img src="images/pencil-logo-80x80.png" class="navbar-brand" alt="Our Brand: Folio">
Folio
</div><!-- end navbar-header -->
<div class="collapse navbar-collapse" id="navbar-responsive-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li class="dropdown hidden-sm">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Services</a>
<ul class="dropdown-menu" role="menu">
<li id="borderTop">Services</li>
<li>Services Small</li>
</ul><!-- end menu -->
</li>
<!-- delete class="dropdown-toggle" data-toggle="dropdown" to make the dropdown only open on hover -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Portfolio</a>
<ul class="dropdown-menu" role="menu">
<li id="borderTop">Portfolio 2 Column</li>
<li>Portfolio 3 Column</li>
<li>Portfolio 4 Column</li>
<li>Single Column</li>
</ul><!-- end menu -->
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Pages</a>
<ul class="dropdown-menu" role="menu">
<li id="borderTop">About Me</li>
<li>Team Page</li>
<li>Page Sticky Header</li>
<li>Background Video</li>
<li>Preloader</li>
</ul><!-- end menu -->
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Blog</a>
<ul class="dropdown-menu" role="menu">
<li id="borderTop">Blog Overview Grid</li>
<li>Blog Sidebar</li>
<li>Blog Post</li>
</ul><!-- end menu -->
</li>
<li>Contact</li>
</ul><!-- end navbar-right -->
</div><!-- end navbar-responsive-collapse -->
</div><!-- end container -->
</nav><!-- end navbar -->
<!-- Start Intro -->
<div class="headerWrapper" id="intro">
<h1>Hello. I'm Folio a <strong>small</strong> creative portfolio</h1>
<p>Specialized in design and coding graphics and websites.</p>
</div><!-- end Intro -->
</body>
CSS:
/*-------------------------------
Global Styles
---------------------------------*/
body {
background: url('http://www.controltheweb.com/images/desktop-background-large/magneticField.jpg') no-repeat center center fixed;
/*-- Makes backgrnd responsive --*/
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#intro {
text-align: center;
margin-top: 120px;
font-family: Paytone One;
}
Hmm not sure if more css is needed but the navbar functions great .. it just is overlapping my page header like bootstrap usually does, but with background: transparent; it looks awful .. the only way i can think of doing this with css/html is using padding somehow but i think a slide effect would be alot nicer looking.. thnx in advance
Here is a bootply that shows my problem: http://www.bootply.com/n7dkI2ZpVX
If I understand the question, what you want is that the content should move down once the dropdown is opened. And should move back once nav-menu collapses. If that is right all you need to do is remove the fixed height from #myNavbar
#myNavbar {
/* height: 80px; */
margin-top: 30px;
background: transparent;
border: none;
}
I am really new with bootstrap, and I'm trying to apply the active class to a menu, but for some reason is not working, I don't know if it is the jquery function (I got it from a tutorial) or if bootstrap won't allow the use of active links.
JS Fiddle Demo
HTML
<div class="masthead">
<nav id="topNav" role="navigation" aria-label="Top Navigation">
<ul class="nav nav-justified">
<li>Home</li>
<li>Cars</li>
<li>Models</li>
<li>Colors</li>
</ul>
</nav> <!-- /Top Navigation -->
</div> <!-- /masthead -->
CSS
nav-justified a.activee {
background:red !important;
}
JS
jQuery(function() {
jQuery('.nav-justified a').each(function() {
if (jQuery(this).attr('href') === window.location.pathname) {
jQuery(this).addClass('activee');
}
});
});
In your JavaScript code you're checking to make sure that the href attribute of your link is equal to window.location.pathname but, in your JSFiddle, none of the links have a matching attribute. Try this instead:
<div class="masthead">
<nav id="topNav" role="navigation" aria-label="Top Navigation">
<ul class="nav nav-justified">
<li>Home</li>
<li>Cars</li>
<li>Models</li>
<li>Colors</li>
</ul>
</nav> <!-- /Top Navigation -->
</div> <!-- /masthead -->
http://jsfiddle.net/021qbcvd/7/
Note that window.location.pathname is equal to everything after the main URL. I had to do an alert(window.location.pathname) to get the correct one for the JSFiddle.
if you use twitter-bootstrap 3,can use this code :
<div class="navbar navbar-inverse navbar-static-top">
<div class="container-fluid">
<ul class="nav navbar-nav navbar-left">
<li class="active">Home</li>
<li>CARS</li>
<li>MODEL</li>
<li>COLORS</li>
</ul>
</div>
</div>
and use class="active" in li tag to show active page