When I use the bootstrap template in my Flask project there is no button on my website when I debug it.
And jquery version is 3.3.1 min , bootstrap version is 4 min
Fig1 is my html, and Fig2 is expected. My navigation button does not appear
my htmlexpected html elements review by chrome
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand navbar-title" href="/">ATM Tech</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>艾特码科技</li>
<li>彭锟的技术博客</li>
</ul>
</div>
</div>
Try changing the size of your browser window, or inspect in responsive mode. Also, go to bootstrap docs and see if you have all the right class names, collapsed doesn't seem like a valid one.
Related
I need be able to use a bootstrap nav menu however their is a probelm here I have attached navbar on the advance settings of a menu item in joomla however the menu does not look anything like it should do.
<nav class="navbar navbar-default" role="banner">
<div class="container">
<div class="navbar-header">
<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>
</button>
<a class="navbar-brand" href="index.html"><img src="<?php echo $this->baseurl ?>/images/us2pk.png" alt="US2PK"></a>
</div>
<div class="collapse navbar-collapse navbar-right">
<jdoc:include type="modules" name="position-7" style="none" />
</div>
</div><!--/.container-->
</nav><!--/nav-->
Here menu is wrong
http://us2pk.solitudesoftware.co.uk/how-us2pk-works
Here it is correct.
http://us2pk.solitudesoftware.co.uk/
Most importantly, the markup on the correct menu has <li><a>|</a></li> - elements between the actual menu elements. You can add something similar by adding new menu items to your menu between each item, where you choose menu item type System links->Text separator. Here you simply add a | as the title. This is rendered with <li class="item-122 divider"><span class="separator ">|</span></li>, and should be easy enough to style similar to the correct menu.
I have tried just about everything to get the toggle navigation to work and I have had no luck. Is it just a simple mistake or piece of code I'm missing? I have tried loading different scripts but still nothing.
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="background-color: #f2f2f2">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#nav-collapse" style="margin-top: 20px;">
<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="#/home" class="navbar-brand">
<img src="img/evodent-logo.png" alt="evodent-logo" style="width:190px;">
</a>
</div>
<div class="collapse navbar-collapse" id="nav-collapse">
<ul class="nav navbar-nav navbar-right">
<li>
ABOUT
</li>
<li>
CONTACT
</li>
</ul>
</div>
</div>
</nav>
It seems like the code is working just fine as is. Make sure that you are including the bootstrap.min.js file on your page as well. As the collapsible components in bootstrap require this plugin/file.
Here is the official documentation on the Bootstrap Navbar that mentions that the plugin is required: http://getbootstrap.com/components/#navbar
Requires JavaScript plugin
If JavaScript is disabled and the viewport is narrow enough that the navbar collapses, it will be impossible to expand the navbar and view the content within the .navbar-collapse.
The responsive navbar requires the collapse plugin to be included in your version of Bootstrap.
I am looking to add a glyphicon-menu-left icon to the sidebar of my application so that when it is clicked, the sidebar collapses to a hamburger menu icon. However with my present code the icon itself (a left arrow) does not appear, and when the button is clicked, nothing happens.
Here is the html segment with the glyphicon button:
<div class="container">
<div class="row">
<!--Collapsable navbar-->
<div class="sidebar-nav">
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header" >
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<span class="visible-xs navbar-brand">Logo</span>
</div>
<div class="navbar-collapse collapse sidebar-navbar-collapse">
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-menu-left leftarrow" aria-hidden="true"></span>
</button>
<ul class="nav navbar-nav mylist" style="align-items:center">
Why isn't the icon itself appearing, and why doesn't the icon perform the required functionality?
Many thanks in advance :)
I had the same issue and I fixed it by upgrading Bootstrap version from 3.3.1 to 3.3.7.
You should find the following code inside the bootstrap.css file
.glyphicon-menu-left:before {
content: "\e257";
}
I have made a bootstrap responsive navigation menu, where it collapses into a box when the page gets small. Pretty much the standard one with bootstrap. However, when the page gets small the menu appears out automatically instead of me having to click the toggle box. Any ideas on how to fix this?
<div class="navbar-header">
<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>
</button>
</div>
<div class="navbar-collapse" collapse">
<div id="navigation">
<ul class="nav navbar-nav navbar-center">
<li>Budget Tracker</li>
<li>Interactive Globe</li>
<li>Travel Quiz</li>
<li>Forum</li>
</ul>
</div>
</div>
This is the code for my bootstrap collapsable menu.
Also does anyone know how to make the toggle box appear in the center of the screen, rather than on the right?
It was the " between the "navbar-collapse" collapse" classes
You need to remove the " that's breaking up the classes in navbar-collapse
You are referencing the wrong element with your data-target. Give this a shot.
button type="button" class="navbar-toggle" data-toggle="collapse" data- target="#navigation">
Also, W3Schools has a great tutorial on this.
Hi I am trying to customize the boostrap default navbar.
I do not expect you to do all my work, but I need help to style the li field so it hangs over the navbar.
How do I make that?
Code I have:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavigation-collapse">
<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 hidden-lg hidden-md hidden-sm" href="#">Caleum Wellness</a>
</div>
<div class="collapse navbar-collapse" id="mainNavigation-collapse">
<ul class="nav navbar-nav">
<li class="active">Om oss</li>
<li>Behandlingar</li>
<li>Tidsbokning</li>
<li>Blogg</li>
<li>Kontakta</li>
</ul>
</div>
</div>
</nav>
The first image show how it is now, and the second image is how I want it.
You can try the Bootstrap customizer http://getbootstrap.com/customize/
Just change less variables how you want and then download it.
Solved the issue by creating a background image with height lower than the navigation wrapper.
The wrapper is still the same size but it looks like it is smaller.