How to add a text inside bootstrap mobile menu button?
<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>
</div>
<div class="navbar-collapse sidebar-navbar-collapse collapse" aria-expanded="false" style="height: 1px;">
<ul class="nav navbar-nav">
<li class="nav_bar_title"></li>
<li class="page_item"></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
Example, what i want to achieve:
you can add a list item just for the text and the rest for menu items:
<li class="page_item class-for-styling-the-text">your text here</li>
and use the a certain class to style that element or use css :first-child selector.
hope that helps.
Something like this :
Bootply: https://www.bootply.com/JH4FMuvYMe
HTML
<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="text">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse sidebar-navbar-collapse collapse" aria-expanded="false" style="height: 1px;">
<ul class="nav navbar-nav">
<li class="nav_bar_title"></li>
Css
span.text {
float: left;
margin-right: 30px;
}
.navbar-toggle .icon-bar{
margin-left: auto;
}
you can try this:
<div class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span style="display:inline-block; margin:2px;">menu text</span>
<span style="display:inline-block;">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
Related
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 2 years ago.
I have the following navbar using bootstrap
I have created it using the following code snippet (Here I'm using bootstrap version 3.3.5)
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="http://www.someone.com/">Home</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>About</li>
</ul>
</div>
</div>
</nav>
</body>
But I wanted center this navbar to the center of the page like below
I need to know how to do this using additional css styling .
You can try like this:
Here I have added one class navbar-content to second line.
<nav class="navbar navbar-default">
<div class="container-fluid navbar-content">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="http://www.someone.com/">Home</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>About</li>
</ul>
</div>
</div>
</nav>
Put bellow styles in your css file.
.navbar-content {
display: flex;
justify-content: center;
}
Apply margin: 0 auto; to navbar class to center.
.navbar {
width: 500px;
margin: 0 auto;
}
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="http://epidemicdash.epizy.com/">Home</a>
<a class="navbar-brand" href="http://epidemicdash.epizy.com/">User</a>
<a class="navbar-brand" href="http://epidemicdash.epizy.com/">About</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>About</li>
</ul>
</div>
</div>
</nav>
I made a dropdown menu, but now I want this menu to only show in mobile view, and not in other views. I guess it's done using "visible-xs" or something like that, but I couldn't code it.
Here's my HTML,
<nav class="navbar navbar-custom">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Food, LLC</a>
</div>
<div>
<button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#collapsable-nav" aria-expanded="false">
<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 id="collapsable-nav" class="collapse navbar-collapse">
<ul id="nav-list" class="nav navbar-nav navbar-right">
<li>Chicken</li>
<li>Beef</li>
<li>Sushi</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar navbar-custom">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Food, LLC</a>
</div>
<div>
<button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#collapsable-nav" aria-expanded="false">
<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 id="collapsable-nav" class="collapse navbar-collapse visible-xs">
<ul id="nav-list" class="nav navbar-nav navbar-right ">
<li>Chicken</li>
<li>Beef</li>
<li>Sushi</li>
</ul>
</div>
</div>
</nav>
The links do not appear on the button when the compact page.
The button is dead, does not respond.
This is my code:
<div id="geral" class="container">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!--Navbar header-->
<div class="navbar-header">
<!--Button-->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar1" 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>
<!--Nome do projeto-->
<a class="navbar-brand" href="#">Project name</a>
</div>
<!--navbar collapse-->
<div id="navbar1" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Link </li>
<li>Link2 </li>
<li>Link3 </li>
</ul>
</div>
</nav>
</div>
I am trying to code my team's website. The navbar will not collapse on mobile screens. I added the "data-target" to target the class in the list. When clicking the button, the list should collapse, but it doesn't.
<!-- Navbar -->
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/Home">Team 3774</a>
</div>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<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="collapse navbar-collapse navHeaderCollapse" style="height: 0.866667px;">
<ul class="nav navbar-nav">
<li>Team Bio</li>
<li>Our Coach</li>
<li>Gallery</li>
<li>Outreach</li>
<li>Youtube</li>
</ul>
</div>
</div>
</div>
Try this out:
<div class="navbar navbar-inverse navbar-fixed-top" role="banner">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<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="/Home">Team 3774</a>
</div>
<div class="collapse navbar-collapse navHeaderCollapse" role="navigation">
<ul class="nav navbar-nav">
<li>Team Bio</li>
<li>Our Coach</li>
<li>Gallery</li>
<li>Outreach</li>
<li>Youtube</li>
</ul>
</div>
</div>
</div>
Remove the style="height: 0.866667px;"
Add a separate id tag for targetting by the dropdown and button (semantic practice).
You have two navbar-header classes (Remove the second one and combine the button and the brand anchor. Here's a jsfiddle of the working navbar: https://jsfiddle.net/AndrewL32/e0d8my79/6/
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/Home">Team 3774</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navHead">
<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="collapse navbar-collapse" id="navHead">
<ul class="nav navbar-nav pull-right">
<li>Team Bio</li>
<li>Our Coach</li>
<li>Gallery</li>
<li>Outreach</li>
<li>Youtube</li>
</ul>
</div>
</div>
</div>
I'm using Bootstrap and I have a problem with the collapsing Navbar, it shows wrong on Chrome for Android, I tried stock navbar's without modifying and still happens (www.tasqueo.com)
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="page-scroll" href="#page-top">Inicio</a></li>
<li><a class="page-scroll" href="#contact">Contacto</a></li>
</ul>
</div>
</div>
</nav>
Yes Drip is correct,
So I came to understand one thing.
we have to use https for secured links especially for maxcdn.bootstrapcdn.com
or
If you give http:// in this code the output is coming like above.
MY CODE:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a class="page-scroll" href="#page-top">Inicio</a></li>
<li><a class="page-scroll" href="#contact">Contacto</a></li>
</ul>
</div>
</div>
</nav>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>