Just started my first bootstrap theme, i have design in mind but the code i written doesn't showing output as expected,
with the design like (header + footer) this, and centered content are this
So far I have write this code, but didn't work well,
if there is any expert, please help me.
<!--start: Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" 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>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container" style="border: black solid medium;">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div><!-- /.container -->
Fiddle
Since you are using a fixed navbar the content is starting from above and so its hidden behind the navbar. Add padding-top to body and it will work
body {padding-top: 70px}
Fiddle
Related
I am developing a website using ASP.NET MVC. Bootstrap is used for the UI. I have the below HTML in my layout view.
<body>
#*Header*#
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" 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>
<a class="navbar-brand" href="#">App Name</a>
</div>
<div id="navbar" class="navbar-collapse collapse navbar-right">
<ul class="nav navbar-nav">
#*<li class="active">Dashboard</li>*#
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div>
#RenderBody()
</div>
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<p class="navbar-text pull-left">
© 2017 xxxxxxxxxx
</p>
<a class="navbar-btn btn-default btn pull-right">
<span class="glyphicon glyphicon-tower"></span> <strong>This is test</strong>
</a>
</div>
</div>
</body>
When I try to see the page in smaller devices (iPhone5/6) etc, I see that the contents from my content page grows below the sticky footer and hence not getting displayed. But, the display is fine in bigger devices. How can I add a scrollbar, or make the content scrollable when viewed in smaller devices?
Fixed navbars overlap main content by default. To avoid this you need to add margins to your content block. According to bootstrap 3 it will look like this:
<div class="page-content">
#RenderBody()
</div>
And then in your styles file:
.page-content {
maring: 50px 0;
}
i'm trying to create a navbar with logo, like this layout: Layout on desktop
and with mobile, like this layout: Layout on mobile
In the first layout, i need that the navbar is center vertically. I have write this snippets of code:
<div class="row">
<div class="col-md-3">
<a href="#" class="pull-left">
<img src="image/logo.png" height="300px" id="logo" class="img-responsive">
</a>
</div>
<div class="col-md-9">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#example-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>
</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Search</li>
<li>Archives</li>
<li>Education</li>
<li>About</li>
</ul>
</div>
</nav>
</div>
</div>
That's work, except the vertically centered navbar and the logo on mobile go under the navbar, how i can obtain this two layout? Thanks in advance. :)
Your images do not appear making the question unclear on what you're trying to achieve. From what I understand is that you run out of space on mobile causing the elements to stack. Try adding a resizing attribute to the logo to make it a compatible size for mobile. Please revise your question though.
You can try align="center":
<div align="center" style="max-height:inherit">
<div class="col-md-9">
<nav align="center" class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#example-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>
</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Search</li>
<li>Archives</li>
<li>Education</li>
<li>About</li>
</ul>
</div>
</nav>
</div>
And please tell me if it works.
im building a "one page" website with two different navbars, one for desktop and the other for small screen sizes. The links in both navbars are same, just the appearance is different. My problem is that i havent find a way to scrollspy both of them, i tried this way but it didnt work:
<body data-spy="scroll" data-target=".navbar, .mobinavi" data-offset="0">
Heres the HTML:
<!-- NAVIGOINTI -->
<div class="container hidden-xs">
<div class="row">
<div class="col-sm-12 navilaatikko">
<nav class="navbar navbar-default navbar-static-top paanavi" data-spy="affix" data-offset-top="140">
<div class="container">
<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>
<span class="navbar-brand"></span>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>Sulka</li>
<li>Tapahtumat</li>
<li>Galleria</li>
<li>Yhteystiedot & Palaute</li>
<li>Henkilökunta</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</div>
<div class="visible-xs mobinavi" data-spy="affix" data-offset-top="140">
Sulka
Tapahtumat
Galleria
Yhteystiedot & Palaute
Henkilökunta
</div>
<!-- /NAVIGOINTI -->
Any help? Thanks.
I'm working my way through Microsoft's Intro to Bootstrap course (DEV203x) on edx. I came across this piece of info on there:
To add normal links that are not to be considered as part of the navbar, add the navbar-link class to the a element. The anchor must be contained inside of a navbar-text container.
<div class="navbar-text">
<a class="navbar-link" href="URL here">
Follow us!
</a>
</div>
Normal links are supposedly added like this:
<ul><li>
<a href="URL here">
A normal link!
</a>
</li></ul>
There doesn't seem much difference in how these links appear on page. Only the styling for navbar-text is applied to navbar-link because it's enclosed in that tag.
Am I missing something here?
Just to be safe, normal links are added with <ul class="nav navbar-nav">, not just a ul (which I'm pretty sure you know allready).
For folks using standard links that are not within the regular navbar
navigation component, use the .navbar-link class to add the proper
colors for the default and inverse navbar options.
The differences may be subtle but they're important to know as they can be very useful. links that are not within the regular navigation is where this comes into play as you can use these classes to add text or links to your navbar that does not fall withing the standard ul + li structure.
In the examples you provide, there are differences (if even very small). There probably wouldn't be a need for this (see Example 3):
<div class="navbar-text">
<a class="navbar-link" href="URL here">
Follow us!
</a>
</div>
as Bootstrap takes care of HREFs inside a li class as far as positioning and styling for it's navigation components so this wouldn't make sense and actually does break if you reduce your browser and open the collapsed navbar you'll see the link out of place in Example 3. You'll also see that if you hover over that first link, it will be underlined. This is not the case for a default navigation link.
As examples: If you need some text/link(s) to remain exposed when your navbar collapses for mobile, use these tags inside your navbar-header and they'll be positioned/styled appropriately so you won't (necessarily) have to write the CSS yourself. As well as inside the navbar-collapse panel but outside of the ul class.
See 3 examples in the following Snippet at Full Page.
1) Using these classes appropriately.
2) Same example structure as the First but without these classes applied.
3) What I believe your example illustrates.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<h3 class="alert alert-success">Example 1: Using Bootstrap classes</h3>
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-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="#">Brand</a>
<p class="navbar-text navbar-left">This is navbar-text and this is a navbar-link
</p>
</div>
<div class="collapse navbar-collapse" id="bs-1">
<p class="navbar-text">This is navbar-text and this is a navbar-link
</p>
<ul class="nav navbar-nav">
<li class="active">Link
</li>
</ul>
</div>
</div>
</nav>
<hr>
<h3 class="alert alert-info">Example 2: Not using Bootstrap classes</h3>
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-2" 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="#">Brand</a>
<p class="not-navbar-text">This is NOT navbar-text and this is NOT navbar-link
</p>
</div>
<div class="collapse navbar-collapse" id="bs-2">
<p class="not-navbar-text">This is NOT navbar-text and this is NOT navbar-link
</p>
<ul class="nav navbar-nav">
<li class="active">Link
</li>
</ul>
</div>
</div>
</nav>
<hr>
<h3 class="alert alert-warning">Example 3: You example</h3>
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-3" 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="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-3">
<ul class="nav navbar-nav">
<li>
<div class="navbar-text">Follow us!
</div>
</li>
<li>Follow us!
</li>
</ul>
</div>
</div>
</nav>
<hr>
<h3 class="alert alert-success">Example 4: Navbar-Link</h3>
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-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="#">Brand</a>
<p class="navbar-text"> Normal Link Navbar-link
</p>
</div>
<div class="collapse navbar-collapse" id="bs-1">
<ul class="nav navbar-nav">
<li>Normal Link
</li>
<li>Navbar-link
</li>
</ul>
</div>
</div>
</nav>
The first example is using the bootstrap structure for css/styling, while the second example is bare bones html. Bootstrap may not be applying anything in this case due to your own css/stylesheets overriding them, with out more information it is difficult to tell.
You will also want to confirm that you have bootstrap properly setup, as those should look different as per Bootstraps look. See here for an example of a navbar-link; http://getbootstrap.com/components/#navbar-links.
I am having a bit of trouble with my top fixed collapsible bootstrap navbar.
Whenever I click on a link of my navigation bar, a strange horizontal bar that looks like a horizontal scrollbar appears above the navbar and then disappears instantly.
I tried removing all my JS , CSS, and the rest of the page leaving only the navbar, and the bug is still there, so I assume it is something about the syntax of that navbar.
Below is the code
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">My Web</a>
</div>
<div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Proyecto</li>
<li>Galería</li>
<li>Planos</li>
<li>Ubicación</li>
<li>Contacto</li>
</ul>
<ul class="nav navbar-nav">
<li style="font-size:12px"><a>(0000) 4444-4444</a></li>
</ul>
</div>
</div>
</div>
</nav>
Also, bootstrap scrollspy is not working for me on this navbar. I guess it might be the same issue.
Thank you very much for your assistance
EDIT: I found that the problem is on making the navbar collapsible. If I remove the data attributes from the li elements, this problem is gone, but on mobile when I touch on some link the navbar doesnt collapse back.
There is a known bug in bootstrap, according to this post :
Bootstrap 3 nav dropdown
You have to add some CSS to fix it :
.navbar-collapse.in {
overflow-y: visible;
}
This a demo page you need to modify as you needs..DEMO Page
HTML part
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<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="#">My Application</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>Home</li>
<li>Home</li>
<li>Home</li>
</ul></div>
</div></nav>
I found the solution to my problem.
The solution was adding .in class to the data-target attribute of the li elements on the navbar.
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.php">My Web</a>
</div>
<div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li data-toggle="collapse" data-target="#navbar.in">Home</li>
<li data-toggle="collapse" data-target="#navbar.in">Proyecto</li>
<li data-toggle="collapse" data-target="#navbar.in">Galería</li>
<li data-toggle="collapse" data-target="#navbar.in">Planos</li>
<li data-toggle="collapse" data-target="#navbar.in">Ubicación</li>
<li data-toggle="collapse" data-target="#navbar.in">Contacto</li>
</ul>
<ul class="nav navbar-nav">
<li style="font-size:12px"><a>(54+11) 4444-4444</a></li>
</ul>
</div>
</div>
</div>
</nav>
Maxime Mettley's comment helped. Thank you. But since I was seeing a scrollbar during the collapsing activity, I needed to fix it like this:
.navbar-collapse.in, .navbar-collapse.collapsing {
overflow-y: visible;
}
Bootstrap applies the "collapsing" class as the menu collapses, then "in" once the collapse is complete. I hope this helps someone else.