I created a Navbar and added searchbar and login signup options however before adding them, code for toggle was working fine and it was responding on small screens but now it is not working.
can you help me to find out where I am making mistake....
I am using Bootstrap-5 here.
I am expecting toggler to respond on small screens which is not working right now.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/css/bootstrap.min.css">
<nav class="navbar navbar-expand-lg navbar-dark shadow-10-strong bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Travel <b> Friend </b> </a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collection of Nav Links , forms and other content for toggeling -->
<div class="collapse navbar-collapse justify-content-start" id="navbarNav">
<!-- There are two ways to add feature lists one was to use UL and LI and second was to just add A tag which was easy -->
<div class="navbar-nav">
Home
About
Pricing
Blog
Contact
</div>
<!-- for searchbar -->
<form class="navbar-form form-inline">
<div class="input-group search-box">
<input type="text" id="search" class="form-control bg-transparent" placeholder="Search here..." />
<div class="input-group-append">
<span class="input-group-text bg-transparent">
</span>
</div>
</div>
</form>
<!-- Form close here -->
<!-- Login and Sign Up icons here -->
<div class="navbar-nav ms-auto action-buttons">
Login
Sign up
</div>
</div>
</div>
</nav>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0/dist/js/bootstrap.min.js"></script>
Related
I have a navbar with a search form, where I get the results from Algolia with their autocomplete solution. This is the navbar:
<nav class="navbar" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<div id="nav-icon1" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span></span>
<span></span>
<span></span>
</div>
<a href="{{ url('/') }}">
<img class="logo logo-small" src="{{ asset('/img/logo-small.png') }}" alt="logo">
<img class="logo logo-big" src="{{ asset('/img/m2.png') }}" alt="logo">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<form action="/search" method="get" class="navbar-form navbar-search-form active" role="search">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<button type="submit"><i class="ion-ios-search-strong"></i></button>
</span>
<input type="text" id="search-input" name="q" class="form-control" placeholder="Search for videos or players..." value="{{ Request::get('q') }}" autofocus>
</div>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li>
Sign in
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
On small screens I have a problem, that the results are inside of the navbar dropdown menu
Where I would like them to go over the dropdown menu. I have tried with setting the z-index for various elements of algolia dropdown:
.algolia-autocomplete {
z-index: 999999 !important;
}
But that didn't work, not sure where exactly should I change the z-index, since the element is created on autocomplete so I am not able to see the structure before I type in something. How can I fix that?
The problem was in the bootstrap class:
.navbar-collapse.in {
overflow-y: auto;
}
I had to change it to overflow-y: visible; and then it worked.
I tried this link solution but not able to conclude. I am new to this..tried everything but all vain I want something like this what to do
check this How to close collapse panel when we click link inside the panel in bootstrap
my code:
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- ***** -->
<!-- <a href="#" class="btn btn-default" data-toggle="collapse" href="#collapse1">
<i class="material-icons" style="font-size:53px;">menu</i>
</a> -->
<!-- ****** -->
<div class="navbar navbar-default navbar-static-" role="navigation">
<div class="container">
<button class="btn btn-default" data-toggle="collapse" data-target="#menu"><span class="material-icons" style="font-size:40px;">menu</span></button>
</div>
</div>
</div>
<!-- Menu -->
<div id="menu" class="panel panel-default panel-collapse collapse bottom padding">
<div class="container collapse navbar-collapse" id="myNavbar">
<ul class="bottom padding list-inline">
<li>ABOUT US / </li>
<li><a href="#services" >SERVICES</a> / </li>
<li>HOTELS / </li>
<!--<li>PRICING</li>-->
<li>CONTACT</li>
</ul>
<div class="container bottom padding">
<div class="row">
<div class="text-center">
<p class="white">Some of our partner hotels</p>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="tile">
<h3 class="title">Hilton Grosvenor House</h3>
<p>The definition of luxury</p>
</div>
</div>
<div class="col-sm-4">
<div class="tile">
<h3 class="title">Marriott</h3>
<p>Service paradise</p>
</div>
</div>
<div class="col-sm-4">
<div class="tile">
<h3 class="title">Ramada</h3>
<p>For the business traveller</p>
</div>
</div>
</div>
</div>
</div>
<div class="text-center padding padding">
<img src="images/TTB_Logo_small.png"/>
<h1>Tourists Travel Bureau UK Limited</h1>
</div>
</div>
and javascript:
<script type="text/javascript">
$(document).ready(function () {
$(document).click(function (event) {
var clickover = $(event.target);
var _opened = $(".navbar-collapse").hasClass("navbar-collapse in");
if (_opened === true && !clickover.hasClass("navbar-toggle")) {
$("button.navbar-toggle").click();
}
});
});</script>
To the link or the button give
data-target = "#idofthepanel"
Refer to the panel using id instead of class
Also,
You have given data-target="#mynavbar" , but navbar is a class and not an id.
I am having troubles with Isotope on Navbar. I would like the content to be switched when selecting different Navbar items.
Not sure what do I have to do, this is simplified version of what I have for now.
I guess I need some Javascript that will handle the switching from navbar's href's to isotope's classes? Is this possible like this?
HTML Navbar
<nav class="navbar">
<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>
</div>
<div class="collapse navbar-collapse navbar-main-collapse" id="#options">
<ul class="nav navbar-nav">
<li>
Home
</li>
<li>
About
</li>
</div>
</nav>
HTML Content
<section class="main-content">
<div class="isotope-elements-grid" id="isotope-elements-grid">
<div class="isotope-element home">
<p>Some random text on Home</p>
</div>
<div class="isotope-element about">
<p>Some random text on About</p>
</div>
</div>
</section>
Javascript
$('.isotope-elements-grid').isotope({
// options
itemSelector: '.isotope-element',
layoutMode: 'fitRows'
});
I've searched and searched and can't seem to find my issue. I apologize if this is answered somewhere else. I inherited a "simple" site that needs scrollspy implemented and I can't get anything to work for the life of me.
Here are some excerpts from the code:
HTML NAV
<div class="row" style="width:100%" id="topnav">
<nav id="anchored" role="navigation">
<ul class="nav top-menu fade-in">
<li class="mission_anchor">SERVICES</li>
<li class="stories">ABOUT</li>
<li class="supporters_anchor">REQUEST DEMO</li>
</ul>
</nav>
</div>
<br />
SAMPLE OF FIRST "SERVICES DIV"
<section class="module content">
<div id="services" class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<h1>HOW SUPER AGENT MARKETING CAN HELP YOUR AGENTS</h1>
<br />
JAVASCRIPT
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$("#topnav").on("activate.bs.scrollspy", function(){
alert('smomething happened')
});
$('#topnav').affix({
offset: {
top: 0
}
});
$('body').scrollspy({ target: '#topnav' });
<br />
Full demo site can be found here:Demo Site
Any help would be greatly appreciated as I'm sure it is probably something minor I am overlooking but haven't been able to find in 6 hours of playing with it.
in order to use bootstrap scrollspy your navigation have to be as bootstrap's navigation .
build your NAV as this link below and it will work
http://getbootstrap.com/components/#navbar
try the below example.
$(function(){
$('body').scrollspy({ target: '#myNav' })
})
section > div[id]{
height:800px;
padding-top:50px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<nav id="myNav" class="navbar navbar-default 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="#bs-example-navbar-collapse-1">
<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="mission_anchor active">SERVICES</li>
<li class="stories">ABOUT</li>
<li class="supporters_anchor">REQUEST DEMO</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<section class="module content">
<div id="services" class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<h1>Services Section</h1>
</div>
</div>
<section>
<section class="module content">
<div id="about" class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<h1>About Section</h1>
</div>
</div>
<section>
<section class="module content">
<div id="demo" class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<h1>Demo Section</h1>
</div>
</div>
<section>
I'm developing this website using twitter Bootstrap 3 as I've done a few times. But in this particular one the navbar, when collapsed, is having an odd behavior. When I click on the toggle button, the list items are displayed first aligned right, without some css styles, and then centered as it should be.
When I hit the close button, something strange happens too, as the toggle button itself floats left for a second and then return to the center as it should be.
I've tried a lot of things here. Rebuilding the menu, deleting some custom css, upgrading/downgrading my jquery...here's a jsfiddle of it, the bug is not exactly the same but it's very close to it:
https://jsfiddle.net/grpaiva/oznL3ogb/
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<!-- You'll want to use a responsive image option so this logo looks good on devices - I recommend using something like retina.js (do a quick Google search for it and you'll find it) -->
<div class="col-md-2"><a class="navbar-brand relative" href="index.html"><img class="logo-header" src="" alt="Descola" /></a></div>
</div>
<div class="dropdown pull-right">
<a class="red" href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="hidden-sm hidden-xs">ENTRE OU CADASTRE-SE </span><b class="caret hidden-sm hidden-xs"></b><span class="glyphicon glyphicon-user hidden-lg hidden-md"></span></a>
<ul class="dropdown-menu">
<li>
<form role="form" method="post" action="" novalidate>
<div class="form-group"><input type="email" class="form-control" name="user_email" value="" placeholder="EMAIL" /></div>
<div class="form-group"><input type="password" class="form-control" name="user_password" value="" placeholder="SENHA" /></div>
<div class="row">
<div class="col-lg-12">
<input type="hidden" name="url" value="" />
<button type="submit" class="btn btn-default" name="">ENTRAR</button>
</div>
</div>
</form>
<div class="clear"></div>
<div class="row">
<div class="col-lg-12">
<p class="pull-left" id="login-over-esqueci">Esqueci minha senha</p>
</div>
</div>
<p class="clear"></p>
<div class="row">
<div class="col-lg-12">
<p id="top-facebook-login"></p><!-- retirei o codigo do facebook -->
<p>Ainda não é um membro?</p>
<p><a class="regular" href="">Cadastre-se aqui</a></p>
</div>
</div>
<div class="row mtop20">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<p id="top-login-logout" class="pull-right"><span class="glyphicon glyphicon-off" aria-hidden="true"> </span> Sair</p>
</div>
</div>
</li>
</ul>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse pull-right">
<ul class="nav navbar-nav navbar-right">
<li>o que é a descola?</li>
<li>cursos</li>
<li>drops</li>
<li>contato</li>
<li>faq</li>
<li>para empresas</li>
</ul>
</div><!-- /.navbar-collapse -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div><!-- /.container -->
</nav>
Does anyone have a clue on that one?
I got it!
The problem was in the custom CSS, I had to add the class .collapsing to my li items.
Thanks!