How can i have multiple Navbars in a page - twitter-bootstrap-3

I am building a CMS editor and one of the things that can be customized is the text appearing in the Navbar. I am having a problem with showing two Navbars. Most examples i have seen are multiple Navbars one below the other and is not what i need.
I need the first Navbar to be the editor's own Navbar, while the second Navbar is somewhere below the first Navbar but not directly below it.

You have to remove navbar-fixed-top from the second nav
html would be like this
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">Project name</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<h1>Conent</h1>
<p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
</div> <!-- /container -->
<div class="navbar ">
<div class="navbar-inner">
<div class="container">
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
in bootply

Related

Bootstrap4 nav-item issue

I am movig a project from Bootstrap 3 to Bootstrap 4...
the following code was working fine w Bootstrap 3 , but it's not with Bootstrap 3...
here is the jsFiddle test and the html code
Boostrap3 behavior :
initial button 1 is active
when the user click on one of the 3 buttons, it displays the corresponding tab. And the button is raised up, the other buttons stay down.
Boostrap 4 behavior :
initial button 1 is active
when the user click on one of the 3 buttons, it displays the corresponding tab. And the button is raised up, the other buttons never go down.. they stay active...
<section id="memberships" class="memberships">
<div class="container">
<div class="row d-flex justify-content-center">
<div class="col-lg-8 text-center">
<h2 class="header-text">TEST</h2>
<div class="memberships-mockup">
<div id="nav-tabContent" class="tab-content">
<div id="nav-first" role="tabpanel" aria-labelledby="nav-first-tab" class="tab-pane fade show active"><p>1111111111</p></div>
<div id="nav-second" role="tabpanel" aria-labelledby="nav-second-tab" class="tab-pane fade"><p>2222222222</p></div>
<div id="nav-third" role="tabpanel" aria-labelledby="nav-third-tab" class="tab-pane fade"><p>3333333333</p></div>
</div>
</div>
</div>
</div>
<div id="myTab" role="tablist" class="nav nav-tabs">
<div class="row">
<div class="col-sd-4">
<a id="nav-first-tab" data-toggle="tab" href="#nav-first" role="tab" aria-controls="nav-first" aria-expanded="true" class="nav-item nav-link active"><span class="number">1</span></a>
</div>
<div class="col-sd-4">
<a id="nav-second-tab" data-toggle="tab" href="#nav-second" role="tab" aria-controls="nav-second" class="nav-item nav-link"><span class="number">2</span></a>
</div>
<div class="col-sd-4">
<a id="nav-third-tab" data-toggle="tab" href="#nav-third" role="tab" aria-controls="nav-third" class="nav-item nav-link"><span class="number">3</span></a>
</div>
</div>
</div>
</div>
</section>
If you want the nav-tabs behavior to work properly in Bootstrap 4, each tab should be a direct sibling, not in separate columns.
https://www.codeply.com/go/Wu5OKQvDiQ
<div id="myTab" role="tablist" class="nav nav-tabs">
<a id="nav-first-tab" data-toggle="tab" href="#nav-first" role="tab" aria-controls="nav-first" aria-expanded="true" class="nav-item nav-link active"><span class="number">1</span></a>
<a id="nav-second-tab" data-toggle="tab" href="#nav-second" role="tab" aria-controls="nav-second" class="nav-item nav-link"><span class="number">2</span></a>
<a id="nav-third-tab" data-toggle="tab" href="#nav-third" role="tab" aria-controls="nav-third" class="nav-item nav-link"><span class="number">3</span></a>
</div>

Bootstrap 2 to Bootstrap 3

So there is my problem. I'm working to a project and intitally was made with bootstrap 2. Now i want to change the codesto bootstrap 3, but i've encountered some issues. Can someone help me to change the following part?
<body>
<div class="hero-unit">
<div class="container">
<div class="navbar">
<div class="navbar-inner">
Brand
<nav class="pull-right">
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>
</nav>
</div><!-- end navbar inner -->
</div><!-- end navbar -->
<div class="hero-unit-inner text-center">
<h1>Text</h1>
<h4>Text </h4>
Get Started
<a href="#" >Learn More</a>
<img src="img/browser.png">
</div>
</div><!-- end of container -->
</div><!-- end jumbotron -->
</body>
Here is the Bootstrap 3 code:
<div class="container-fluid">
<div class="jumbotron">
<div class="container">
<div class="navbar">
Brand
<nav class="pull-xs-right">
<ul class="nav">
<li class="nav-item">Home
</li>
<li class="nav-item">About Us
</li>
<li class="nav-item">Services
</li>
<li class="nav-item">Blog
</li>
<li class="nav-item">Contact Us
</li>
</ul>
</nav>
</div>
<!-- end navbar inner -->
</div>
<!-- end navbar -->
<div class="hero-unit-inner text-xs-center">
<h1>Text</h1>
<h4>Text </h4>
Get Started
Learn More
<img src="img/browser.png" />
</div>
</div><!-- end jumbotron -->
</div><!-- end of container -->
http://getbootstrap.com/migration/ for a list of class changes, depredations etc.
Sorry I must have missed that one... It becomes "jumbrotron". See the link I shared so you can match up the classes. http://getbootstrap.com/migration/
Yes it's CSS. Keep in mind that some classes have changed while other have been deprecated.
If you used a theme to build your site with, then I advise having a look at the site where you downloaded the template as in most cases they update the templates...

Bootstrap 3 Navigation bar with Divs on top as part of it?

I am not sure why my drop down menus are not showing as buttons for this prototype with bootstrap 3?
Also, how can I make this the correct layout if I want some content for above a navigation menu? I am trying to do this without editing the bootstrap CSS and use it natively.
http://www.bootply.com/8IqCa4lI6T
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-4">
<img src="" class="img-responsive" alt="" height="50px" width="50px">picture
</div>
<div class="col-xs-4">
action
</div>
<div class="col-xs-4">
<span id="title">4rows text</span><br>
<span id="title">4rows text</span><br>
<span id="title">4rows text</span><br>
</div></div>
<!-- nav bottom -->
<div class="row">
<ul class="nav nav-pills navbar-nav navbar-left">
<li>menuleft1</li><li>menuleft2</li><li>menuleft3</li>
</ul><!-- /nav -->
<ul class="nav nav-pills navbar-nav navbar-right">
<li>menuright1</li><li>menuright2</li><li>menuright3</li>
</ul><!-- /right_nav -->
</div>
Here is a Bootply with the appropriate HTML to accomplish what I believe you are trying to:
http://www.bootply.com/eTDrQdGYJ7
As for placing something above the navbar. You do not need to modify the Bootstrap CSS. By giving the navbar an ID, and giving a CSS attribute to that ID, that will supercede the Bootstrap CSS.
Alternatively, it's typically okay practice to override the Bootstrap classes in a separate CSS file that is loaded in after the Bootstrap CSS file. That way you are not changing the Bootstrap CSS itself, but have control to modify styling as needed.

Bootstrap tabs are not acting as expected

I tried to setup bootstrap tabs without javascript (like written here: http://getbootstrap.com/javascript/#markup).
Code copied from bootstrap page:
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">Tab 1</div>
<div role="tabpanel" class="tab-pane" id="profile">Tab 2</div>
<div role="tabpanel" class="tab-pane" id="messages">Tab 3</div>
<div role="tabpanel" class="tab-pane" id="settings">Tab 4</div>
</div>
</div>
https://jsfiddle.net/Zoker/w6xeyznk/
As you can see, it does not work and I don't know why. Anybody got an idea?
Have you included the jquery.js and the bootstrap.js it's important for work because you don't have to code the js part but bootstap already have it.
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>

Carousel indicators to target slides

So I wish to target slides with the indicators in Twitter-Bootstrap-3 but having some difficulty in doing so.
Here is my code:
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="1" class="active"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner">
<div class="item active" data-id="1">
<img src="/assets/example/bg_suburb.jpg">
<div class="container">
<div class="carousel-caption">
<h1>Bootstrap 3 Carousel Layout</h1>
<p><small>This is an example layout with carousel that uses the Bootstrap 3 styles.</small></p>
</p></div>
</div>
</div>
<div class="item" data-id="2">
<img src="http://lorempixel.com/1500/600/abstract/1">
<div class="container">
<div class="carousel-caption">
<h1>Changes to the Grid</h1>
<p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
</div>
</div>
</div>
<div class="item" data-id="3">
<img src="http://placehold.it/1500X500">
<div class="container">
<div class="carousel-caption">
<h1>Percentage-based sizing</h1>
<p>With "mobile-first" there is now only one percentage-based grid.</p>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="carousel-control left" href="javascript:;" data-target="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="carousel-control right" href="javascript:;" data-target="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
<!-- /.carousel -->
<script>
$('.carousel-indicators li').click(function(e){
e.stopPropagation();
$('#myCarousel').carousel($(this).data('slide-to')-1);
});
</script>
I need to change the indicators to words of my choosing and also add captions to each slide not siting on top of the slide so the indicators to be underneath the carousel with the caption underneath the indicators too. I have tried all manners of things but getting nowhere.