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
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!
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...
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.
When i tried to make my navbar static I came across something weird. I am having a space between the navbar and the topside of my website.
Any ideas on how to fix this so that my navbar will be in the place of the open space? (I am bad at explaining things i know....)
<body>
<div id="wrapper">
<div class= "navbar navbar-inverse navbar-static-top">
<div class="container">
BlahBlahism
<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>Home</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
There is no CSS involved
This code works fine when i tried running.
but still you should try using this.
some versions of internet explorer do not support class nav or nav-bar please check
hope this would help
body, html {
margin: 0px;
padding: 0px;
}
I don't know what your code says, but I'm guessing it has something to do with the default behaviour of the elements in question.
Possible solution:
Make a little CSS and remove padding and/or margin.
<style>
#theNavbarID{
padding: 0px;
margin: 0px;
}
</style>
Post some code and I'll expand upon it if need be.
EDIT:
Code works just fine, you can try it here:
JSFiddle
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>