I am trying to use the Bootstrap class="icon-bar" but its not showing up on the screen.
The elements are present in the screen but default height and width is showing up 0.
I have been through multiple questions on Stack Overflow and different sites but no help.
Following is the code:
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top bg-light">
<div class="containter">
<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>
</nav>
</body>
Image:
Links that I have followed:
Bootstrap icon-bar span not visible
Bootstrap icon-bar not showing
Bootstap:span class icon bar not working
As answered in the comments by #Akhi, there is no span.icon-bar in Bootstrap 4.
Instead we need to use the class: <span class="navbar-toggler-icon"></span>
Doing so has resolved my problem.
Related
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.
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 want to make my logo overlap my navbar but i dont know how. I tried to increase the size of the picture but that didn't work out, the navbar just enlarged. I also want it to be in the same div class because else it won't be nice on the mobile version of the site. I'll add pictures of what it looks like and what i want it to be and the code. Thanks in advance
Code:
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<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>
<img style="max-width:80px; margin-top:0px;" src="img/logo.png" class="logo navbar-brand">
<a class="navbar-brand" rel="home" href="index.html"><b>MY WEBSITE</b></a>
</div>
give your logo a class of "logo" then add:
.logo {
position: fixed;
top: 1em;
left: 1em;
display: inline;
}
fix your nav bar as well.
Hope that helps!
Just put the logo outside the nav bar div. And align it top:0px left:0px.
Or if you want the logo on the left at all times then just float it left.
Apologies if this has already been asked, but I am trying to center my navbar if the user shrinks their display.
Right now I have the navbar-items floated to the right and the brand on the left for large displays. These remain on the right and left as the display shrinks.
I'd like for them to be centered instead when the display shrinks.
For large displays this is what I want. (What I'm getting now)
For small displays I want the navbar and brand to be centered. (Not what I'm getting right now)
It may not be the best way to do it, but you could just use an image instead and then apply the "center-block" class to it
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<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>
<img class="img-responsive center-block" src="img/logo.png" alt="">
</div>
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.