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>
Related
I'm not able to hide the navbar after the link is clicked. I'm using bootstrap 3. I have added the script that should work. I'm not able to find the error. Can someone go through this code. Please
$('.navbar-collapse ul li a').click(function() {
$(".navbar-collapse").collapse('hide');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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"/>
<nav class="navbar navbar-inverse navbar-fixed-top">
<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="#topFixedNavbar1" 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>
<ul class="nav navbar-nav navbar-left">
<li>
<a class="navbar-brand" href="#"><img src="images/logo-inv.png" width="30" height="30" alt=""></a>
</li>
<li><a class="navbar-brand" href="#" onMouseOver="this.style.color='#fff'">पBrand</a></li>
</ul>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="topFixedNavbar1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#aboutUs"><span class="glyphicon glyphicon-question-sign"></span>
About Us</a></li>
<li><a href="#"><span class="glyphicon glyphicon-picture"></span>
Gallery</a></li>
<li><span class="glyphicon glyphicon-pawn"></span> Awards</li>
<li><a href="#"><span class="glyphicon glyphicon-paste"></span>
Documents</a></li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
According to docs you have to put collapse in class
.collapse hides content
.collapsing is applied during transitions
.collapse.in shows content
But this is not enough.
I'm not able to hide the navbar after the link is clicked.
Would you like to hide the whole navbar or the menu section which appears on small screen sizes?
If you want the first one you have to put classes in nav tag and use different query in jquery
Example
$(function() {
$('.navbar-collapse ul li a').click(function() {
$(".navbar-collapse").collapse('hide'); // hides menu on lower screens
//$(".navbar").collapse('hide'); // hides the whole navbar
});
})
html,
body {
height: 100%;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.js"></script>
<div class="container">
<nav class="collapse in navbar navbar-inverse navbar-fixed-top">
<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="#topFixedNavbar1" 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>
<ul class="nav navbar-nav navbar-left">
<li>
<a class="navbar-brand" href="#"><img src="images/logo-inv.png" width="30" height="30" alt=""></a>
</li>
<li><a class="navbar-brand" href="#" onMouseOver="this.style.color='#fff'">पBrand</a></li>
</ul>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse in navbar-collapse" id="topFixedNavbar1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#aboutUs"><span class="glyphicon glyphicon-question-sign"></span>
About Us</a></li>
<li><a href="#"><span class="glyphicon glyphicon-picture"></span>
Gallery</a></li>
<li><span class="glyphicon glyphicon-pawn"></span> Awards</li>
<li><a href="#"><span class="glyphicon glyphicon-paste"></span>
Documents</a></li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
Did you try Something like this :
<!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.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#aboutUs"><span class="glyphicon glyphicon-question-sign"></span>
About Us</a>
</li>
<li class="nav-link" class="nav-item">
<a class="nav-link" href="#"><span class="glyphicon glyphicon-picture"></span>
Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><span class="glyphicon glyphicon-pawn"></span> Awards</a>
</li>
</ul>
</div>
</nav>
<br>
</body>
</html>
Use this in js
$(function () {
$(".navbar-collapse ul li a").click(function() {
$(".navbar-collapse").collapse('hide');
});
$(".navbar-collapse ul li a").click(function (event) {
$(event.target).focus();
});
});
I have a web page with a menu made with the bootstrap framework. This menu in its mobile version appears when you click on the toggle button that appears in the upper right corner. This menu slides from the top down and looks like this:
The code of this header menu is this:
<!--========== HEADER ==========-->
<header class="header navbar-fixed-top">
<!-- Navbar -->
<nav class="navbar">
<div class="container" id="main_header_container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="menu-container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="toggle-icon"></span>
</button>
<!-- Logo -->
<div class="logo">
<a class="logo-wrap" href="https://pixels.com/index">
<img class="logo-img logo-img-main" src="img/logo2.png" alt="Logo">
<img class="logo-img logo-img-active" src="img/logo2.png" alt="Logo">
</a>
</div>
<!-- End Logo -->
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse nav-collapse">
<div class="menu-container">
<ul class="navbar-nav navbar-nav-right">
<li class="nav-item"><a class="nav-item-child nav-item-hover" href="https://pixels.com/index">HOME</a></li>
<li class="nav-item dropdown">
<a class="nav-item-child nav-item-hover" id="a_leistungen" href="#">LEIST</a><a id="arrow_to_dropdown-mob" onclick="myFunction()" class="nav-item-child dropbtn">LEIST</a>
<ul class="dropdown-menu" id="ul_dropdownIDDesktop" aria-labelledby="dLabel">
<li><a class="dropdown-item" href="https://pixels.com/webdesign">Webdesign</a></li>
<li><a class="dropdown-item" href="https://pixels.com/marketing">Marketing</a></li>
<li><a class="dropdown-item" href="https://pixels.com/corporate-design">Corporate Design</a></li>
</ul>
</li>
<div id="myDropdown" class="dropdown-content">
<li><a class="drop-item" href="https://pixels.com/webdesign">Webdesign</a></li>
<li><a class="drop-item" href="https://pixels.com/marketing">Marketing</a></li>
<li><a class="drop-item" href="https://pixels.com/corporate-design">Corporate Design</a></li>
</div>
<li class="nav-item dropdown">
<a class="nav-item-child nav-item-hover" id="a_lasungen" href="#">LOSING</a>
<a id="arrow_to_dropdown-mob" onclick="myFunctiondrop()" class="nav-item-child dropbtn">LOSING</a>
<ul class="dropdown-menu" id="ul_dropdownIDDesktop" aria-labelledby="dLabel">
<li class="dropdown-item"><a class="drop-item" href="https://nivamedia.ch/kurier-lieferdienst">PixelsMarket</a></li>
</ul>
</li>
<div id="myDropdown1" class="dropdown-content1">
<li class="drop-item"><a class="drop-item" href="https://pixels.com/kurier">PixelsMarket</a></li>
</div>
<li class="nav-item"><a class="nav-item-child nav-item-hover" href="https://pixels.com/referns">REFERNS</a></li>
<li class="nav-item"><a class="nav-item-child nav-item-hover" href="https://pixels.com/contact">CONTACT</a></li>
</ul>
</div>
</div>
<!-- End Navbar Collapse -->
</div>
</nav>
<!-- Navbar -->
</header>
<!--========== END HEADER ==========-->
What I would like to do is that the header menu slide from left to right, something like this:
How Can I do that with css?
change this class : navbar-nav-right to navbar-nav-left
<ul class="navbar-nav navbar-nav-left">
<li class="nav-item"><a class="nav-item-child nav-item-
hover" href="https://pixels.com/index">HOME</a></li>
I have 4 navtabs that when pressed display different #navs. On mobile I would like them to display nothing when clicked and instead direct to a specific url. Anyone got an idea as to how this would be possible?
Using Bootstrap hide and show nav tags - use different nav url in <li> tags
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<!--Below nav Visible only in Mobile-->
<nav class="navbar navbar-expand-sm bg-light visible-xs">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#link1">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#link2">Link 2</a>
</li>
</ul>
</nav>
<!--Below nav will be hide in Mobile view-->
<nav class="navbar navbar-expand-sm bg-light hidden-xs">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#link1">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#link3">Link 2</a>
</li>
</ul>
</nav>
Reference: https://getbootstrap.com/docs/3.3/css/
I have been encountering a problem from sometime now.Looked up with similar problems on stackoverflow.But none could help me.
Problem is that my html page is jumping, when i scroll it.
If the content is less than the total height of the page, it doesnt jump, but as the content go little bigger than the total height of the page it starts jumping
What are the possible solution, if anyone could help me a bit.
Thanks in advance.I am using bootstrap.
html
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" rel="home" href="/welcome">
<img src="/resources/images/senabLogo.jpg">
</a>
</div>
<!-- navbar-header -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home
</li>
<li>Offers</li>
<li>Settings</li>
<li class="dropdown menu-item">
Language
<ul class="dropdown-menu">
<li>EN</li>
<li>SV</li>
<li>NO</li>
</ul>
</li>
</ul>
<!-- nav navbar-nav -->
<div class="col-sm-3 col-md-3 pull-right">
<ul class="LoginDetailsH">
<li>Sales</li>
<li>Log out <span class="fa fa-sign-out"> </span></li>
<li class="dropdown menu-item pull-right">
<span class="fa fa-question-circle"> </span>
<ul class="dropdown-menu">
<li>View open and closed questions</li>
<li>Ask a new question</li>
</ul>
</li>
</ul>
<!-- LoginDetailsH -->
</div>
<!-- col-sm-3 col-md-3 pull-right -->
</div>
<!-- collapse navbar-collapse -->
</nav>
<div class="container">
</div>
</body>
CSS
.navbar-fixed-top {position:relative !important;}
I have referrd to the foloowing
Prevent page from jumping while changing position of element on scroll function
How do I stop a web page from scrolling to the top when a link is clicked that triggers JavaScript?
my dropdown menu in navbar works fine when the browser is maximized but if i resize the browser to a mobile size then the dropdown menu does not show up as well as the menu button toggled up. here is my navbar code with dropdown. I am using bootstrap 3.when i clicked EBBL the dropdown menu does not show up and the whole navbar menu is toggled up.
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="<?php echo site_url('home/index')?>">BCTF</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right navbar-main-collapse ">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
</li>
<li>
<a class="page-scroll" href="<?php echo site_url('home/index')?>">Home</a>
</li>
<li>
<a class="page-scroll" href="<?php echo site_url('home/show_about')?>">About</a>
</li>
<li>
<a class="page-scroll" href="<?php echo site_url('home/show_open_butterfly_park')?>">Open Butterfly Park</a>
</li>
<li class="dropdown">
</span>
<ul class="dropdown-menu">
<li>About EBBL</li>
<li>Content 1</li>
<li>Content 2</li>
<li>Content 3</li>
<li>Content 4</li>
</ul>
</li>
<li>
<a class="page-scroll" href="<?php echo site_url('home/show_biography')?>">Biography</a>
</li>
<li>
<a class="page-scroll" href="<?php echo site_url('home/show_gallery')?>">Gallery</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>