I'm working on my first website with bootstrap 4 and have some trouble with my collapsible navbar and the hamburger icon. I want to expand the navbar on medium screens, when smaller I want a hamburger icon to appear instead.
So far the Navbar is expanding nicely when the screen reaches the wanted size. Only the Hamburger icon becomes invisible (though cilckable!) to early, I think it already disappeares on sm. So I end up with a certain viewport with no menu visible. I habe absolutely no idea what the problem could be...
I tried severeal different browsers and also several different kinds of buttons / icons and none seem to work. In Opera none of the ones I tried showed at all.
```html
<!-- Navigation-->
<nav class="navbar navbar-expand-md bg-warning">
<div class="container-fluid">
<a class="navbar-brand" href="index.shtml"><img src="img/schriftzug.png" width="262px"></a>
<!-- Toggler/collapsibe Button -->
<button class="navbar-toggler first-button" type="button" data-toggle="collapse" data-target="#collapsibleNavbar" aria-controls="collapsibleNavbar" aria-expanded="false" aria-label="Toggle navigation">
<div class="animated-icon"><span></span><span></span><span></span></div>
</button>
</div>
<!-- Links-->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav nav-tabs nav-justified">
```js
<script>
$(document).ready(function () {
$('.first-button').on('click', function () {
$('.animated-icon').toggleClass('open');
});
});</script>
etc.
Okay, I managed to solve the problem. There must have been some blunder in my custom css. I didn't find the specific mistake, but I started from scratch and copied the original code back into the custom and made the same changes again - it works finde now...
Related
I'm new at Bootstrap. I'm trying to implement a dropdown menu for my website, and used Bootstrap documentation (5.1) to put up a working example.
Currently the dropdown menu is working as expected but only in the homepage. Here's the code I'm using:
<head>
...
...
<link href="https://getbootstrap.com/docs/5.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://getbootstrap.com/docs/5.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
...
...
<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark" >
<div class="container-fluid">
<a href="{{.Site.BaseURL}}" class="navbar-brand">
<img src="{{.Site.BaseURL}}{{ .Site.Params.site_logo }}" alt="" width="70%" height="auto" class="d-inline-block align-text-top"></a>
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse justify-content-between" id="navbarCollapse">
<div class="navbar-nav ms-auto">
Cursos
ConsultorÃa
<div class="nav-item dropdown">
Recursos
<div class="dropdown-menu">
Contacto
Blog
Descargas
Acerca de
</div>
</div>
Suscribirse
</div>
</div>
</div>
</nav>
...
</body>
The dropdown Menu is named Recursos and in the homepage it works as expected, i.e. the menu items appear when clicking on the dropdown:
However, when I navigate to a subpage the dropdown menu stops working, and nothing happens when i click on it. So the problem lies here:
Recursos
I've noticed that in the homepage, the link points to homepage/# when hovering over the dropdown menu, and it works like a charm. However, for sub-pages the link automatically gets updated and points to the URL of the corresponding subpage (for example to homepage/blog/# or homepage/about/#) and then it stops working.
How can I prevent Bootstrap from updating the dropdown's link?
I've tried also leaving empty the href field when creating the dropdown component (href="") and the problem persists.
I've also tried the solutions proposed in a similar question, to no avail.
Any help is appreciated!
Solved it!
I was calling a local version of bootstrap.bundle.min.js:
<script src="js/bootstrap.bundle.min.js"></script>
but forgot to include / at the beginning of the path, and thus when rendering the subpage the .js file was not found.
Once corrected:
<script src="/js/bootstrap.bundle.min.js"></script>
everything worked as expected!
When I open the Boostrap 4 Modal on my page, it shifts the page contents to the left slightly. I have managed to prevent this from happening to most of the content by adding a css class to the body when the modal is opened. However, for some reason this is not working for my nav's contents and they are being shifted to the left still when the modal is open. How can I fix this? Any help would be great, thanks.
HTML
<body>
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="navFixed">
<div class="container-fluid container">
<a class="navbar-brand" href="javascript:void(0);" onclick="navigateToPage()">
MyNav
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#myNavbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0);" onclick="navigateToPage()" title="Home">Home</a>
</li>
...
</ul>
</div>
</div>
</nav>
...
</body>
JS
$('#demoModal').on('show.bs.modal', function (e) {
$('body, nav > .container').addClass('test');
})
CSS
.test[style] {
padding-right: 0 !important;
color: red;
}
.test.modal-open {
overflow: auto !important;
}
body.modal-open {
margin-right: 0px
}
When trying to find the cause of this kind of errors what i do is remove all the page CSS (commenting it or renaming the css file and creating a blank one) then start uncommenting / adding css rules by blocks or by importance (for instance the first one you may want to add is the boostrap css file) and test and repeat until i find the culprit
My second aproach is to do the opposite, create a blank page and start adding the code (html, css, javascript) from the most important to the least important (first jquery then boostrap, the bootstrap blank page html, modal example...)
Same with the javascript, because sometimes javascript also changes CSS, specially if you have javascript plugins
I have created an application where the search function is the most important part. Therefore, I decided to put the search form in the title bar to have it available on every page. Works great, only on mobile devices I have the problem that the fluid layout causes the search fields to cover up most of the screen.
Thus, it would be great to collapse this title bar on mobile devices the same way a navigation bar does. Unfortunately, I did not get this working. I tried solving this with a navbar which did not work at all (see below).
Another idea of mine was to create two different search bars, a collapsed one and a hidden one and use Bootstrap's .hidden-* and .visible-* classes. Not sure how this would perform, apart from that I have not figured out yet how to create a non-navigation title bar in Bootstrap.
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid col-md-12">
<div class='row'>
<div class='col-md-8'>
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="./index.php">Home</a>
</div>
<form method='post' class='form-inline' role='form' action='./search.php'>
<div id='menu' style='display:table-cell;vertical-align:middle;padding:10px;'>
<!-- several form elements (search boxes) go here -->
</div>
</form>
</div>
<div class='col-md-4' style='padding-top: 7px;'>
<!-- Session & status information go here -->
</div>
</div>
</div>
</nav>
Any idea how I can show my search fields on large screens and collapse them on mobile devices?
You did not give us much to work with, but as far as the collapsing goes I would go for a combination of css and jQuery. Here is the gist of how I would go about solving this problem by simply creating your own little "bootstrap-like" collapse.
html: Make your own little navigation structure with a button that will display your form on mobile devices.
<ul class="search-nav">
<li class="collapse-button">ICON</li>
<li class="search-form">
<form method='post' class='form-inline' role='form' action='./search.php'>
<div id='menu' style='display:table-cell;vertical-align:middle;padding:10px;'>
<!-- several form elements (search boxes) go here -->
</div>
</form>
</li>
</ul>
css: Make the collapse-button not show on large screen devices. On small screen devices the collapse-button can be displayed, but the form has to be hidden by default. All of this can be achieved using media queries:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
.collapse-button{
display: none;
}
.search-form{
display: block;
}
#media (max-width: 480px){
.collapse-button{
display: block;
}
.search-form{
display: none;
}
}
jQuery: If the user clicks on the collapse-button the form will toggle between being displayed and not. Something like this:
$( ".collapse-button" ).click(function() {
$( ".search-form" ).toggle(function() {
$( ".search-form" ).css("display","block");
}, function() {
$( ".search-form" ).css("display","none");
});
});
This is just the general idea. I would probably actually go with setting max-height of the form to 0 and overflow:hidden on devices with small screen and a bigger max height on devices with a larger screen. This way you could add a css transition that would make it expand more fluently.
Question Background:
I'm using Twitter Bootstrap on my site and have incorporated a collpasing navbar for my sites menu.
The Issue:
The NavBarcollapses to a button as expected but when the screen hits a certain width the logo I have within the NavBarand the menu items split onto two separate lines. The following shows the issue:
This is the navbar with the page fully expanded and working as desired:
This is with the page slightly minimized and response, notice the NavBar has now split into two lines. This is not the desired behavior I want. I ideally I want the option to stay on the same line or collapse to a button:
This shows the NavBar fully collapsed:
The Code:
This is my NavBar markup. I cannot see why I'm seeing the above unwanted behavior with the NavBarseparating into two lines:
<div class="navbar navbar-fixed-top">
<nav class="navbar navbar-default" role="navigation" id="nav">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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">FM<b>FC</b></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>Welcome</li>
<li>Club</li>
<li>About Us</li>
<li>Gallery</li>
<li>Committee</li>
<li>Contact Us</li>
<li>Location</li>
<li><a href='#Url.Action("FutureEvents", "Events", new { pageNo = 1 })'>Events</a></li>
</ul>
</div>
</div>
</nav>
</div>
Any help in working out this issue would be appreciated.
The nav is wrapping in to 2 lines because you have many menu items and the Bootstrap container switches to 750px as the screen width shrinks. You have 2 options..
One option is to use the full width container-fluid (this may not work for your design):
http://codeply.com/go/TfbwIivilI
Another option is to decrease the point at which the navbar collapses. This requires CSS to override the default navbar collapse point. In your case around 1000px seems to work best:
http://codeply.com/go/kcaXYh7ARB
It happenes because you have so many li elements, so what you need is to change the collapse break point. Just add the following to your css
#media(max-width:992px) {
.nav>li>a {
padding-left: 10px;
padding-right:10px
}
}
bootply.
I'm using Bootstrap navbar with the bootstrap.min.css file.
This navbar stretches to the entire screen, where in the CSS file do I change the navbar settings (I don't want it to stretch)? There are a lot of navbar classes there and I can't seem to locate the right one.
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
Imperia Bank
<button class="navbar-toggle" data-toggle="collapse"
data-target=".navHeaderCollapse">
<span class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Login</li>
<li>Register</li>
<li>Clients</li>
<li>Administrator</li>
<li>Accounts</li>
<li>Illustration</li>
<li >Atm</li>
</ul>
</div>
</div>
</div>
Place <div class="container"> above <div class="navbar navbar-inverse navbar-static-top">.
For anyone trying to make the navbar a custom width in Bootstrap 4, just override the navbar css width.
For example:
.navbar {
width: 400px;
}
In case you have more than 1 navbars (?!) just specify a custom class/id for the one you want to alter.
You should be able add your own styles on top of the existing styles. Using a tool like the chrome debugger you should b able to find the style rule that is doing this and then in your own stylesheet just use a more specific CSS selector to override it.
You can place the navbar in its own container (with applicable ID) and adjust the width of the container in your stylesheets. As Swagata said, you should be able to just flip the div tags and adjust your css accordingly. I'd give it a memorable name, though, for the sake of editing.
There is no pretty way to do this, considering .navbar was built to span the screen. But it can be accomplished fairly easily using the built in grid.
<div id='row'>
<div id='col-md-6'>
INSERT NAVBAR HERE
</div>
<div id='col-md-6'>
INSERT WHATEVER YOU WANT ON THE OTHER HALF OF THE SCREEN HERE
</div>
</div>