Im trying to make my Bootstrap Navbar responsive and when the browser scales down to phone size, the navbar does shrink and hide everything, but the navigation button doesn't show up. Can someone take a look at my code and see if im doing something wrong? Everything seems fine. Thanks for taking a look.
<nav class="navbar navbar-default navbar-inverse" id="navpad">
<!-- Navbar -->
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapse" data-toggle="collapse" data-target=".nav-collapse #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>
IC <!-- Brand -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!-- Links -->
<ul class="nav navbar-nav">
<li class="active">Home<span class="sr-only">(Current)</span></li>
<li>Nosotros</li>
<li class="dropdown">
<!-- Dropdown -->
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-expanded="false">Ministerios<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>Ministerio 1</li>
<li>Ministerio 2</li>
<li>Ministerio 3</li>
<li>Ministerio 4</li>
<li>Ministerio 5</li>
</ul>
</li>
<!-- /Dropdown -->
<li>Servicios</li>
<li>Miembros</li>
<li>Contacto</li>
</ul>
</div>
<!-- /Navbar Collapse -->
</div>
<!-- /Navbar Header -->
</div>
<!-- /Container-fluid -->
</nav>
<!-- /Navbar -->
Remove the collapse from the navbar toggle, and set the correct data-target..
<div class="container-fluid">
<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>
...
http://codeply.com/go/3kSRfMNfmj
Related
I'm currently creating a responsive Bootstrap navbar in Angular. I'm using Bootstrap v3.
However, the toggle navigation doesn't open in a mobile view and the "Manage" dropdown isn't working.
app.component.html
<div class="container">
<div class="row">
<div class="col-sm-12">
<app-header></app-header>
</div>
</div>
</div>
header.component.html
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<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="#">Recipe Book</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Recipes <span class="sr-only">(current)</span></li>
<li>Shopping Lists</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Manage <span class="caret"></span>
<ul class="dropdown-menu">
<li>Save Data</li>
<li>Fetch Data</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
I'm having a hard time figuring out how I can implement bootstrap 3 menu in a way such that it's right-floated and part of it collapse, e.g.:
Brand Item 1 Item 2 Item 3 Item 4
when collapsed look that way:
Brand Item 4 [Toggle menu]
I think I'm getting close, but can't make it work properly:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".menu-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="#">Brand</a>
</div>
<div class="navbar-right">
<div class="collapse navbar-collapse menu-collapse">
<ul class="nav navbar-nav">
<li>Test right-middle</li>
</ul>
</div>
<ul class="nav navbar-nav">
<li>Test right-most</li>
</ul>
</div>
Any ideas how I can fix "test right-most" not to get pushed to next line?
Include a separate navbar-header for the non-collapsible item
<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Title -->
<div class="navbar-header pull-left">
BRAND
</div>
<!-- 'Sticky' (non-collapsing) right-side menu item(s) -->
<div class="navbar-header pull-right">
<ul class="nav pull-left">
<li class="navbar-text pull-left">Item 3</li>
</ul>
<!-- Required bootstrap placeholder for the collapsed menu -->
<button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
</div>
<!-- Additional navbar items -->
<div class="collapse navbar-collapse navbar-right">
<!-- pull-right keeps the drop-down in line -->
<ul class="nav navbar-nav pull-right">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</div>
</nav>
JSFIDDLE
Try to place the contents inside of a div with the class: navbar-header
So instead of declaring:
<div class="navbar-right">
Use the following class instead:
<div class="navbar-header pull-right">
my problem is on this pic:
On mobile view have the same dropdown list like normal screen.
Code Here:
<nav class="navbar navbar-default box-centered" role="navigation">
<div class="container-fluid menu-box">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">"logo here"</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav nav-justified menu" style="margin:0 auto;">
<li class="dropdown">
List ext <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li class="text-padding">something</li>
<li class="text-padding">other</li>
</ul>
</li>
<li class="text-padding">Two</li>
<li class="text-padding">Three</li>
<li class="text-padding">Fouuur</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
My classes for those elements from stylesheet:
http://pastebin.com/HUUShLNQ
I want to menu look like this, with each element under previous:
Can you help me solve this?
check this fiddle:
https://jsfiddle.net/1ummyodw/1/
you have removed navbar-nav class from navigation ul so if you add that this will work, Updated HTML snippet:
<nav class="navbar navbar-default box-centered" role="navigation">
<div class="container-fluid menu-box">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">"logo here"</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav nav-justified menu" style="margin:0 auto;">
<li class="dropdown">
List ext <span class="caret"></span>
<ul class="dropdown-menu text-center" role="menu">
<li class="text-padding">something</li>
<li class="text-padding">other</li>
</ul>
</li>
<li class="text-padding">Two</li>
<li class="text-padding">Three</li>
<li class="text-padding">Fouuur</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
The navbar that I have managed to create is working just fine. However, when I collapse the navbar by re-sizing the window it disappears as I try to open the menu in that view.
Why is the drop-down menu disappearing in mobile view. What am I doing wrong?
HTML code:
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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>
<a class="navbar-brand page-scroll" href="#page-top">Kirori Mal College</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Why Recruit? <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Why Recruit?</li>
<li>Demographics</li>
<li>Faculty</li>
<li>Academics</li>
<li>Alumni</li>
</ul>
</li>
<!-- End of nav bar tabs -->
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
Link to Website and
Link to CSS file.
I have created a navbar and made it container width by adding .container to the .navbar classes. I have created a new row below but its container is less wide than the navbar. I'm sure I've done something stupid but not sure what
<div class="navbar navbar-default navbar-fixed-top container" role="navigation" id="topnavbar">
<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="#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>
<a class="navbar-brand" href="#"><img src="assets/newOrangelogo2.svg" width="300"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav pull-right">
<li class="active">Home</li>
<li class="dropdown">
About <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><a class="sliding-u-l-r" href="#">About Me</a></li>
<li>Services</li>
<li>Process</li>
<li>Clients</li>
<li>Prices</li>
</ul>
</li>
<li>Work</li>
<li>Contact</li>
<li>Blog</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</div>
<div class="container">
<div class="row no-gutter">
<div class="col-md-12 mainImage">
Image
</div>
</div>
</div>