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!
Related
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>
This is my first post here so please don't be mad at me if I'm doing something wrong.
Here is the case: Trying to add bootstrap 3 scrollspy functionality into my code on codepen and it's basically not working. Tried different solutions from stackoverflow, etc. and nothing helps.
Is there any good person who can take look into my code?
HTML:
<div class="container-fluid">
<nav class="navbar navbar-default navbar-fixed-top">
<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="#">Patryk Jamróz</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active">About <span class="sr-only">(current)</span></li>
<li>Projects</li>
<li>Contact </li>
</ul>
</nav><!-- navbar -->
<div data-spy="scroll" data-target="#nav" data-offset="0">
<h3 class="text-center" id="about">about</h3>
<h3 class="text-center" id="projects">projects</h3>
<h3 class="text-center" id="contact">contact</h3>
</div>
CSS:
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
margin-left: 0;
margin-right: 0;
}
body {
position: relative;
}
In codepen settings tab I included:
CSS:
bootstrap.min.css
JS:
jquery.min.js
bootstrap.min.js
Here is a link to my codepen: https://codepen.io/PatrykJamroz/full/RMZJva
First thing is you need to initiate the body and not a div tag so your body should have the following:
<body data-spy="scroll" data-target=".navbar" data-offset="0">
And not the:
<div data-spy="scroll" data-target="#nav" data-offset="0">
because the body is the thing that the scroll event is attached to so initiating a div does no good unless you are scrolling with that div.
Next you need to attach it the the .navbar or the nav itself would be the best practice. And also I see that you are using jquery 3 and this may cause an issue with bootstrap 3 so you may want to switch to jquery 2.
I think that you don't really undestand how bootstrap scrollspy actually work. You have to make the 'body' as the main scrollspy container! take a look:
$('body').scrollspy({
target: '#bs-example-navbar-collapse-1'
})
$('#scrollDiv').on('activate.bs.scrollspy', function () {
//Do stuff if there is a new event in scrollspy
})
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
margin-left: 0;
margin-right: 0;
}
body {
position: relative;
}
<div id="scrollDiv" class="container-fluid" data-spy="scroll" data-target="#bs-example-navbar-collapse-1">
<nav class="navbar navbar-default navbar-fixed-top">
<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="#">Patryk Jamróz</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active">About <span class="sr-only">(current)</span></li>
<li>Projects</li>
<li>Contact </li>
</ul>
</nav><!-- navbar -->
<div>
<div id="about" class="col-md-12">
<h3 class="text-center">about</h3>
<div class="row">
<div class="col-sm-6">
<img class="img-responsive center-block" src="https://thumb1.shutterstock.com/display_pic_with_logo/2877733/272163653/stock-photo-happy-young-man-wearing-glasses-and-smiling-as-he-works-on-his-laptop-to-get-all-his-business-272163653.jpg" alt="not me">
</div>
<div class="col-sm-6">
<h4>Mechanical Designer</h4>
<p><span><i class="fa fa-user-circle"></i></span> An open-minded, creative and focused on new tech solutions</br>
<span><i class="fa fa-tv"></i></span> Excellent knowledge of such tools as SolidWorks and SolidWorks Simulation</br
<span><i class="fa fa-check"></i></span> FCT, ICT, EOL test systems, rack cabinets, inline systems and sheet metal</br>
<span><i class="fa fa-language"></i></span> English language advanced both speaking and writing</br>
<span><i class="fa fa-graduation-cap"></i></span> AGH UST graduate - Master of Engineering in Mechanical Engineering</br>
<span><i class="fa fa-coffee"></i></span> Automotive, active lifestyle, IT</p>
</div>
</div>
</div>
</div> <!-- About section -->
<hr>
<div id="projects" class="col-md-12">
<h3 class="text-center">projects</h3>
<div class="row">
<div class="col-sm-4">
<div class="well">
<img class="img-responsive center-block" src="http://www.hawkridgesys.com/blog/wp-content/uploads/2018/01/01-Improving-Assembly-Performance-with-SpeedPak.png" alt="dron">
1st well
</div>
</div>
<div class="col-sm-4">
<div class="well">
<img class="img-responsive center-block" src="https://embedwistia-a.akamaihd.net/deliveries/678ea92af801e6c2d37e149980d62bcc38d7770b.jpg" alt="engine">
2nd well
</div>
</div>
<div class="col-sm-4">
<div class="well">
<img class="img-responsive center-block" src="https://blog.onu1.com/hubfs/solidworks-2018-3d-interconnect.png?t=1520267377858" alt="whatever">
3rd well
</div>
</div>
</div> <!-- Projects 1st row -->
<div class="row">
<div class="col-sm-4">
<div class="well">
<img class="img-responsive center-block" src="https://blog.onu1.com/hubfs/solidworks-2018-3d-interconnect.png?t=1520267377858" alt="whatever">
4th well
</div>
</div>
<div class="col-sm-4">
<div class="well">
<img class="img-responsive center-block" src="https://blog.onu1.com/hubfs/solidworks-2018-3d-interconnect.png?t=1520267377858" alt="whatever">
5th well
</div>
</div>
<div class="col-sm-4">
<div class="well">
<img class="img-responsive center-block" src="https://blog.onu1.com/hubfs/solidworks-2018-3d-interconnect.png?t=1520267377858" alt="whatever">
6th well
</div>
</div>
</div> <!-- Projects 2nd row -->
</div>
<hr>
<div id="contact" class="col-md-12">
<h3 class="text-center">contact</h3>
<h3 class="text-center">Don't hesitate to contact me at:</h3>
<div class="col-xs-12" style="height:5px;"></div>
<h4 class="text-center"><span><i class="fa fa-envelope"></i></span> jamroz.patryk#gmail.com</h4>
<h3 class="text-center">...or just fill the form below!</h3>
<div class="col-xs-12" style="height:5px;"></div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">E-mail</span>
<input type="text" class="form-control" placeholder="Your E-mail address" aria-describedby="basic-addon1">
</div> <!-- email input-->
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Name</span>
<input type="text" class="form-control" placeholder="Your name" aria-describedby="basic-addon1">
</div> <!-- name input -->
<div class="input-group input-group-lg">
<span class="input-group-addon" id="basic-addon1">Message</span>
<input type="text" class="form-control" placeholder="Your message to me" aria-describedby="basic-addon1">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Send!</button>
</span>
</div> <!-- message input -->
</div>
<div class="col-xs-12" style="height:50px;"></div>
<div class="panel-footer text-center">Made by Patryk Jamróz. March 2018.</div>
</div><!-- Container fluid -->
In that way it work! Good luck, bye.
u can try whit jquery
$("#yourtarget").click(function() {
$('html, body').animate({
scrollTop: $("#yourDiv").offset().top
}, 2000);
});
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 can't find this exact question having been asked anywhere on this site, but apologies if it already has been.
I am designing a site with Bootstrap, and have a search bar inside a .jumbotron that spans all 12 columns. This has a dropdown button attached on the right to specify the type of search the user wants to perform.
The markup looks like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="col-md-12 col-sm-12 col-xs-12 jumbotron">
<div class=" col-md-12 col-sm-12 col-xs-12" id="faq_Search">
<h3>Ask a question</h3>
<div class="input-group">
<input type="text" id="faq_SearchBox" placeholder="Search..." class="search form-control"/>
<div class="input-group-btn input-group-lg input-group-md">
<button type="button" class="btn btn-danger dropdown-toggle btn-responsive" data-toggle="dropdown" aria-expanded="false">Select Search Type <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li>Search Graduate</li>
<li>Search Undergraduate</li>
</ul>
</div>
</div>
</div>
</div>
The problem is that when you view the page in the s and xs views, the search button takes up most of the search bar. I want to make the button responsive so that different text is contained within to make it smaller when in those views. Is that possible through just the bootstrap framework. Or is javascript a necessity here?
Thanks
This is possible by enclosing the button text inside an element and hiding/showing at various sizes by using the responsive utility classes. Try this, it applies hiddex-xs and hidden-sm to the normal text and adds another span with hidden-md and hidden-lg to the smaller text span.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="col-md-12 col-sm-12 col-xs-12 jumbotron">
<div class=" col-md-12 col-sm-12 col-xs-12" id="faq_Search">
<h3>Ask a question</h3>
<div class="input-group">
<input type="text" id="faq_SearchBox" placeholder="Search..." class="search form-control" />
<div class="input-group-btn input-group-lg input-group-md">
<button type="button" class="btn btn-danger dropdown-toggle btn-responsive" data-toggle="dropdown" aria-expanded="false">
<span class="hidden-xs hidden-sm">Select Search Type <span class="caret"></span></span>
<span class="hidden-md hidden-lg">Smalltext</span>
</button>
<ul class="dropdown-menu dropdown-menu-right" role="menu">
<li>Search Graduate
</li>
<li>Search Undergraduate
</li>
</ul>
</div>
</div>
</div>
</div>