There are other posts about this but nothing helps/works and the section of removing responsiveness in Bootstrap isn't what I want to do. I want to completely KILL, DISABLE by overwriting the media queries that show the button and mobile vertical menu.
You can view the source on live pages Here
If I remove this button tag:
<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>
Then the button and the vertical menu are gone but so is the horizontal menu. What's the exact media query(s) needed to kill this button and menu but retain the horizontal one.
From Bootstrap documentation:
Change the point at which your navbar switches between collapsed and horizontal mode. Customize the #grid-float-breakpoint variable or add your own media query.
No need to go disabling media queries.
There should be a subsequent div with an id of bs-example-navbar-collapse-1. This div should also have a class collapse. Remove this class.
Assuming you aren't compiling with less or sass.
Related
Security made me upgrade jQuery from 3.2.1 to 3.6.0 and bootstrap from 3.3.7 to 5.0.1 using NuGet, and to get rid of old hand-installed jQuery/bootstrap files, and now I am having some layout problems that I cannot fix.
Symptom 1
Here I got a visible button "Toggle navigation". Before, this button was invisible. The info I found on css class sr-only said that it should make invisible on a screen reader (reading screen content to a blind computer user), but I don't have a screen reader but a firefox/chrome browser. I would guess this class should show for Screen Reader Only. In any case, this button does nothing so I commented it out.
<nav>
<div class="navbar navbar-default">
<div class="container-fluid">
<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 href="/" class="pull-left">
<img src="/Images/company_logo.png" />
</a>
<span id="span_pagetitle" class="pull-left span_pagetitle" runat="server">
Page Title
</span>
</div>
Strange still that the Chrome dev tools, under Elements, Styles, show that sr-only was handled by bootstrap.min.css, but with the new Bootstrap5 by _reboot.scss . The underscore suggests that this is a temp file, and the extension that it has to do with the higher level CSS system SCSS or SASS
In the DevTools, under Network, I still see that bootstrap.min.css was downloaded from the Content folder.
Symptom 2
In the above header code, the logo image and page title showed nicely on the same height in a light grey header bar. But after the upgrade, the layout is gone, ruined. Image and text have lowered, but with different amounts, and there is no light grey header bar as background for the image and text.
Do I need to learn SASS to fix this problem?
Or did something possibly go wrong with installing bootstrap?
To be honest, I had to manually copy the jQuery files from packages to Scripts.
I am now also wondering about jquery-ui.min.js/css and jquery-latest.min.js from a not upgraded version from package mutty-keyboard, as shown by the Network tab of DevTools. Could that cause interference with bootstrap???
Thanks for any hint that may possibly nudge me in the right direction.
Update:
While the answer on this question is actually very useful, I also found out that there is no such thing as an upgrade from Bootstrap 3 to 5. Those are just different toolkits. So this question is in a way obsolete. The real answer should be, don't upgrade. Use Bootstrap 5 on your new project.
The security scan that suggested this upgrade is doing too many upgrade suggestions, perhaps to get you scared and take your wallet out :-)
Actually, many things have changed in the newer version of the bootstrap. First, you don't need to learn SASS for this, this is only gameplay of class names that have changed in the newer versions.
For example, you have highlighted the sr-only class but in the newer version, the name of this class has changed.
Renamed .sr-only and .sr-only-focusable to .visually-hidden and .visually-hidden-focusable
The only thing you have to do is go through this documentation and your all problems will be solved.
Also, in the newer version, there is no need for jQuery.
Read all about Bootstrap version migrations in these document - https://getbootstrap.com/docs/5.0/migration/
How to disable navbar in Twitter Bootstrap 3 to stack toggle button into new line, when the page is accessed via mobile phone?
I always get something like this:
(source: toile-libre.org)
I've tried everything, from adding custom CSS to modifying .less files and further recompiling the whole Bootstrap style (I've been changing #grid-float-breakpoint variable and I even have played with navbar.less), but unfortunately I had no success.
Can somebody help me, please? I'm desperate because I've lost a whole day trying to fix this.
try removing the collapse class from the menu, and deleting the button:
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Solved it, I had to add width attribute to the div container which has these two buttons from the right. The div was improperly resizing, hence it was putting the second (toggle) button in the new line.
The .navbar-toggle has property float: right;. Check the HTML-code of your navbar. The toggle button should be placed first, before the other parts of the menu.
I have used Knockout.js and added a click event to a href on the navbar of a site I'm working on. The click event works but one of the unfortunate side effects is that the navbar doesn't automatically close when using it on a mobile device.
Is there a way to "force" bootstrap to close the navbar after the Knockout function has completed?
--Updated--
I have tried returning true from the function in the ViewModel, and also from the function declaration on the href element, i.e.
My Bookings
but to no avail - the nav bar still refuses to close. I've also tried using a button in the navbar instead of a href element but it still does the same. Problem can be replicated if you shrink a desktop web browser right down so that the site goes "into" mobile mode (I know, I know).
Any ideas?
This is a simple solution... But it works
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
add this where you want to trigger collapse...
$('button[data-toggle]').click()
Boostrap3 uses this code to make a toggle button within a navbar in mobile view, but why don't just use a image instead of empty elements?
<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>
http://getbootstrap.com/components/#navbar
Most likely to maintain a "forward" thinking approach to web design. There's no reason to make an unnecessary media request if the same visual effect can be achieved using only html and css. Similarly, the advancement in css has allowed transitions that were once only possible with javascript or flash.
If you inspect the html of that mobile menu icon, it is pretty apparent what it is doing and how the loading of even a small image takes more processing than a small amount of markup. Succinctly, it is just a better approach at modern design.
I have a light Twitter Bootstrap menu, but want the button that toggles a drop down menu in phones and tablets to be dark. I've added the following style. It works in Firefox, but the style changes are not displaying in Android. Any idea what I need to do differently to make it display correctly in most if not all browsers?
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse" style="color: #000000; background-color: #121212;
background-image: linear-gradient(to bottom, #0d0d0d, #1a1a1a);">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Usage of CSS3 background gradients is different between browsers. To make sure that your code is supported in all browsers, you need to add vendor prefixes. Also, even with vendor prefixes, code for background gradients is different between browsers.
I will recommend ColorZilla, great tool for cross-browser background gradients. There is many examples, and you may edit colors, direction of gradien, even add multiple gradients. Try it.
The easiest way to customize the colors of Twitter Bootstrap elements is using LESS.
You can customize them in the official page, download and do it in the variables.less file or try online tools like Bootswatcher.
This assures you don't have to use all the vendor CSS3 prefixes.