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>
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>
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>
I'm working with the DDR Menu of DotNetNuke. I'm using it on this page:
http://lumenis.bondtest.nl/Aesthetic
The menu on the bottom is the ddr menu.
For some reason, the dropdown menu is not getting between the li's, but on top of them.
I'm using this code:
<nav class="navbar navbar-default lumenisInnerMenu">
<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>
</div>
<div class="collapse navbar-collapse lumenisListItems" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
[*>NODE]
</ul>
</div>
</div>
</nav>
[>NODE]
<li class="[?SELECTED]dir current[/?][?NODE]HasChildren dropdownmenu [/?]">
[?ENABLED]
<a [?!NODE] href="[=URL]" [/?] [?TARGET]target="[=TARGET]"[/?] class="[?NODE]dropdown-toggle[/?]" data-toggle="collapse" data-target="#[=ID]">
<span>[=TEXT]</span>
</a>
[?ELSE]
<a href="#" [?NODE] [/?]> [?NODE]
<span>[=TEXT]</span>[/?]
</a>
[/?]
[?NODE]
<ul class="dropdown-menu dropdown[=DEPTH]" id="[=ID]">
[*>NODE]
</ul>
[/?]
</li>
[/>]
Does anybody have any idea what I'm doing wrong?
Thanks in advance.
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>