I'm trying to figure out why my changes to the padding and margin properties of the various navbar assets is failing to allow for the menu to resize properly on mobile.
JsFiddle is at https://jsfiddle.net/phobrla/b9zpbejg/
<html>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<!-- Collect the nav links, forms, and other content for toggling -->
<ul class="nav navbar-nav">
<li>The Burkean<br/>Pentad</li>
<li class="active">Intro <span class="sr-only">(current)</span> </li>
<li>Act</li>
<li>Scene</li>
<li>Agent</li>
<li>Agency</li>
<li>Purpose</li>
<li>Quiz</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</html>
Chande .navbar-inverse by .navbar-default
Regards!
JSFIDDLE
.navbar-outer .navbar-default{
background:red;
}
<div class="navbar-outer">
<nav class="navbar navbar-default">
Related
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...
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>
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
as the title says. Here is the code I'm using this theme http://startbootstrap.com/template-overviews/grayscale/
Edit where is the whole code to make it clear:
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand page-scroll" href="#page-top">
<!-- <i class="fa fa-play-circle"></i> <span class="light">Start</span> Bootstrap -->
<img class="img-responsive" src="img/ssmk_logo.png">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
</li>
<li>
<a class="page-scroll" href="#weather">Weather Forecast</a>
</li>
<li>
<a class="page-scroll" href="#download">Estate Agent</a>
</li>
<li>
<a class="page-scroll" href="#contact">Stocks</a>
</li>
<li>
<a class="page-scroll" href="#about">About Us</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
Should the objective be to get your logo into the Bootstrap navbar, you'll have to resize the image in some way. Your options for that are to do it with CSS, or to make a smaller version of it to be served up to your site. My solution resizes it using CSS.
img {
margin-top: -11px;
height: 40px;
width: 45px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="http://i.imgur.com/9PRm767.png" />
</a>
</div>
</div>
</nav>
Per the documentation for Bootstrap nav branding using images, this is how you add an image to your navbar instead of text for branding purposes. The documentation also says you'll need to either override some CSS depending on your image. My CSS here gets rid of some of the margin the navbar-header creates so the image is nice and flush with the rest of the navbar. Should you want a larger image to be used, you'll need to mess with the width of your navbar.
Using the img-responsive class from Bootstrap is not appropriate here due to the widths of various components in the navbar for Bootstrap, which only collapses down in smaller viewports and does not, itself, dynamically resize along all dimensions as the viewport gets wider. The Bootstrap navbar is easily the most inflexible item in the entire framework, but that's not a bad thing because really, you shouldn't be messing with the size of the navbar too much.
UPDATE
With the correct closing tags that should work. As you can see if you resize Maradona image, it appears to be responsive. I suggest you to validate your entire HTML and check if there is some error on it.
http://jsfiddle.net/xd1p8pov/
Your html (as we see it) is missing one div and one nav closing tags. Have you tried to inspect the .img-responsive class? By default in Bootstrap should be :
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
I am creating a responsive design in bootstrap3.
I want to modify my template design for tabs. And for that I am using a external js file.
For now I am planning to show them in only desktop version. I am not sure how to have same kind of effect in mobile. SO for now just dektop.
When I am integrating with Bootstrap3 responsive its not working.
However with a plain html file without bootstrap code its working fine.
Would anyone be able to help me to achieve this using Bootstrap3?
I have added the code in js fiddle #
http://jsfiddle.net/monicaRegal/do5b3ko3/1/
Thank You
Regards,
Monica Mandal
If you're needing tabs made with Bootstrap to expand to the full width of the page or their container, use the nav-justified class in your markup.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
Body Content Here
<br />
<br />
<div role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs nav-justified" role="tablist">
<li role="presentation" class="active">The Americas</li>
<li role="presentation">Europe</li>
<li role="presentation">Middle East/Africa</li>
<li role="presentation">Asia/Pacific</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">The Americas content</div>
<div role="tabpanel" class="tab-pane" id="profile">Europe content</div>
<div role="tabpanel" class="tab-pane" id="messages">Middle East/Africa content</div>
<div role="tabpanel" class="tab-pane" id="settings">Asia/Pacific content</div>
</div>
</div>
You can then style your tabs however you need. View the snippet in full page mode to see it properly.