I am creating an UI using Angular on the front end. I have a directive which is the navbar. Since I am using ngRoute, I have used that directive inside my partial for /home. Everything works fine, but the navbar does not start from the top of the page. Instead there is a small pane below which the navbar starts. I want it to be something like how the stack overflow navbar in the top is.
This is my index.html
<body>
<ng-view></ng-view>
</body>
I've tried by using ng-view inside div but still it does not work.
home.html
<nav-bar></nav-bar>
<div class="container">
<div class="row-fluid">
<div class="col-md-12">
<div class="well well-sm">{{flashMessage}}</div>
</div>
</div>
<div class="row-fluid">
<div class="col-md-3 well pre-scrollable scroll-pane">
<span class="glyphicon glyphicon-folder-close"></span>
<a href="#toparentnode">
..
</a>
<br/>
<p>nodes list goes here</p>
</div>
<div class="col-md-9 pre-scrollable scroll-pane">
<table class="table table-striped table-bordered wrap-table text-center">
<thead>
<tr>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>Value1</td>
<td>
<button class="glyphicon glyphicon-edit"></button>
<button class="glyphicon glyphicon-remove"></button>
</td>
</tr>
<tr>
<td>Value2</td>
<td>
<button class="glyphicon glyphicon-edit"></button>
<button class="glyphicon glyphicon-remove"></button>
</td>
</tr>
<tr>
<td>Value3</td>
<td>
<button class="glyphicon glyphicon-edit"></button>
<button class="glyphicon glyphicon-remove"></button>
</td>
</tr>
<tr>
<td>Value4</td>
<td>
<button class="glyphicon glyphicon-edit"></button>
<button class="glyphicon glyphicon-remove"></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
navbar.html ( which is the templateUrl for navBar directive )
<nav class="navbar navbar-default navbar-inverse">
<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 navbar-right" href="#/">
<img style="max-width:100px; margin-top: -7px;" src="images/logo.png" alt="Logo">
</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><span class="glyphicon glyphicon-home"></span> Home<span class="sr-only">(current)</span></li>
<li>Link</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-out"></span> Logout</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
I have used Twitter bootstrap and one css named signin.css which is one found in the official website example - css
This is the unnecessary pane in the top
But I want it to look like how stack overflow has the navbar.
I've tried adding the navbar directly to the main index.html and it works as expected. This unnecessary pane appears only when I use it as a directive. Hope my question is clear.
from CSS try removing
body {
padding-top: 40px;
}
ViChU Hi there.
Can you give this a try to see if it helps you here.
Add navbar-fixed-top
<nav class="navbar navbar-inverse navbar-fixed-top ">
Related
My navbar is overlapping my web, and I don't know how to change it.
Now is :
You can see the number of events and the blue button for create a new event, are cut in the middle by navbar.
My templates are:
navbar.html
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".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 class="navbar-brand" href="{% url 'events_app:panel' %}">Eventus</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav pull-right">
<li><p class="navbar-text">Bienvenido, {{ user.username|capfirst }}</p></li>
<li>Logout</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
panel.html
{% block title %}Panel{% endblock title %}
{% block content %}
{% include "events/panel/navbar.html" %}
<div class="container">
<div class="page-header ">
<h4>
<strong>
Tienes <span class="label label-warning">0</span> Eventos disponibles
</strong>
<a class="btn btn-primary pull-right" href="{% url 'events_app:nuevo' %}">
<span class="glyphicon glyphicon-plus"></span> Crear un evento nuevo
</a>
</h4>
</div><!-- page-header -->
<div class="row">
<div class="col-md-12">
<table class="table table-striped table-hover">
<thead>
<tr>
<th colspan="2">Nombre del evento</th>
<th>Categoría</th>
<th>Inicio</th>
<th>Fin</th>
<th>Monto</th>
<th class="text-center">Acciones</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="" alt="" width="60" class="img-rounded">
</td>
<td>name</td>
<td>category</td>
<td>start</td>
<td>finish</td>
<td>
<span class="label label-default">Gratuito</span>
<span class="label label-info">S/. 0.00</span>
</td>
<td class="text-right">
<span class="glyphicon glyphicon-eye-open"></span>
<span class="glyphicon glyphicon-pencil"></span>
<span class="glyphicon glyphicon-trash"></span>
</td>
</tr>
</tbody>
</table>
</div><!-- col-md-12 -->
</div><!-- /row -->
</div><!-- /container -->
{% endblock content %}
I try to change class="navbar navbar-default navbar-fixed-top" but it don't change my view of the webpage.
According to Bootstrap docs:
Body padding required
The fixed navbar will overlay your other content, unless you add padding to the top of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
Copy
body { padding-top: 70px; }
Make sure to include this after the core Bootstrap CSS.
https://getbootstrap.com/docs/3.3/components/#navbar-fixed-top
I'm new to Bootstrap and I want to have my navbar and footer with the same structure, it means colors and font family mainly, I've took code from Bootstrap themes for each of and from different sources, I've done the navbar part and I now want the footer to be with same structure but I don't understand how to do it.
Navbar part:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" >
<div class="container" >
<!-- 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-left" href="#"><img src="images/_ressources/logo.svg" height="50px"></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> ACCUEIL </li>
<li> BOUTIQUE </li>
<li> CONTACT </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li> MON COMPTE </li>
<li>
<div class="input-group-btn">
<button type="button" class="btn btn-default btn-lg" style="background-color:orange"> <span class="glyphicon glyphicon-lock" ></span> </button>
</div>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Recherche un produit">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
<!-- /.navbar-collapse -->
</div>
</div>
<!-- /.container -->
</nav>
Footer part:
<footer id="footer">
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-3 column">
<h4>Information</h4>
<ul class="nav">
<li>Products</li>
<li>Services</li>
<li>Benefits</li>
<li>Developers</li>
</ul>
</div>
</div>
</div>
</footer>
Here's what I want to have :
Thanks for the help !
You could use your own stylesheet, which overrides the bootstrap one. Just put this in the head section
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>
To modify or apply additional styling to your web page, simply add the proper code to your custom.css file. There is no need to edit any of the original Bootstrap styles directly.
For example, if you decided that you did not like the rounded corners on the buttons, you could apply the following style in your custom.css file.
.btn {
border-radius: 0px;
}
Now if you add a button to your web page with the default Bootstrap styles (.btn class), the corners aren’t rounded. This is due to the fact that your custom stylesheet overrides the default Bootstrap stylesheet.
source: https://bootstrapbay.com/blog/customize-bootstrap/
I have made a header prototype using bootstrap. The problem is I couldn't understand why I have such big padding for the right side. If I add one more letter after Корзина HTML gives me a new line. How could I get rid of this free space? Here is the image
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<!-- Navigation -->
<!-- Heading beginning -->
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-md-2"><img src="http://placehold.it/75x75" id="nttLogo"></div>
<div class="col-md-8">
<input type="text" name="searchPattern" placeholder="Введите название лекарства, или препарата" id="searchForm">
<button type="button">Search</button>
<span class="glyphicon glyphicon-heart-empty"><p id="websiteSlogan">Отложенное </p></span>
<span class="glyphicon glyphicon-folder-open"><p id="websiteSlogan">Корзина</p></span>
</div>
<div class="col-md-8">
<small>Например, лекарства для диабетиков</small>
</div>
</div>
<nav class="navbar navbar-inverse" role="navigation">
<div class="container">
<!-- 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="#">Start Bootstrap</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>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</div>
</div>
<!-- Heading end-->
</body>
You need to increase the col-md-8 to col-md-10 and float the elements to right to remove empty space from right.
here is the updated demo
I want my search box to appear in the nav bar on the desktop and in mobile. Currently, when I reduce the width, the search bar drops to the next line. I can't figure out how to keep it flush with the nav bar.
Here's the code: http://plnkr.co/edit/Unr6MEiIkF6WpXwCCgkF?p=preview
I was able to accomplish the desired affect by inserting a second search box within the 'navbar-header' section, but that caused by typeahead code to go crazy.
Code
Here's the header section of my HTML:
<header>
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle collapsed" data-target=".navbar-collapse" data-toggle="collapse" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="hidden-xs">
<a class="navbar-brand" href="/">Some Project</a>
</div>
<div class="visible-xs">
<a class="navbar-brand" href="/">P</a>
</div>
</div>
<div class="navigation">
<div class="pull-right" id="navbar-search-area">
<form class="navbar-form site-search" id="new_search" action="/search" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓">
<div class="form-group">
<div class="icon-addon addon-sm">
<input id="search" placeholder="search" input-html="col-xs-5 col-sm-3 col-md-4" type="text" name="search[term]" />
<label class="glyphicon glyphicon-search" rel="tooltip" title="search"></label>
</div>
</div>
</form>
</div>
<div class="collapse navbar-collapse header-collapse" id="navbar-section-1">
<ul class="nav navbar-nav">
<li>
Pick Me!
</li>
<li>
me me me me!
</li>
</ul>
</div>
</div>
</div>
</div>
</header>
Any guidance would be appreciated.
References
Other people have had similar questions but they all seem a little different, in large part because there isn't a super-standard way to do this, and because people want their web pages to behave in different ways.
Aligning search bar for mobile with bootstrap 3
[update] updated css in plunkr to show that the nav bar stretches across the top in a different background color.
Pulling the search and collapsed navbar out of the header and right aligning them seems to do the trick
http://plnkr.co/edit/B4gIfAkNiwkBId9fbLVi?p=preview
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<title>AngularJS Plunker</title>
<!-- your app.js file -->
<script src="app.js"></script>
<!-- bootstrap css -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<!-- your style.css file -->
<link href="style.css" rel="stylesheet" />
</head>
<body class="pages welcome">
<style>
body { background-color: #F9F7F5; }
</style>
<header>
<div class="navbar navbar-default navbar-static-top" role="navigation">
<button class="pull-right navbar-toggle collapsed" data-target=".navbar-collapse" data-toggle="collapse" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="pull-right" id="navbar-search-area">
<form class="navbar-form site-search" id="new_search" action="/search" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓">
<div class="form-group">
<div class="icon-addon addon-sm">
<input id="search" placeholder="search" input-html="col-xs-5 col-sm-3 col-md-4" type="text" name="search[term]" />
<label class="glyphicon glyphicon-search" rel="tooltip" title="search"></label>
</div>
</div>
</form>
</div>
<div class="container">
<div class="navbar-header">
<div class="hidden-xs">
<a class="navbar-brand" href="/">Some Project</a>
</div>
<div class="visible-xs">
<a class="navbar-brand" href="/">P</a>
</div>
</div>
<div class="navigation">
<div class="collapse navbar-collapse header-collapse" id="navbar-section-1">
<ul class="nav navbar-nav">
<li>
Pick Me!
</li>
<li>
me me me me!
</li>
</ul>
</div>
</div>
</div>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-push-2">
<h1 class="page-title">Welcome to the Project</h1>
<p>This is the body.</p>
</div>
</div>
</div>
</body>
</html>
There's one link that stays up on the top line, next to "search jobs by," in certin screen resolutions of the collapsed navbar. Also, within these same resolutions, the client login continues to work like the "desktop/laptop" client login instead of the mobile login. I'm having this problem with various tablet resolutions only (when width is between 768px and 1023px).
The "State" link, between widths 768px and 1023px, is still on the same line as the "Search jobs by:" text in the collapse navbar, as per the photo I uploaded. Also, the client login dropdown is operating like the expanded navbar version instead of the collapsed navbar version within the 768px and 1023px width range. The picture above shows this weird appearance.
See visual below:
http://www.bootply.com/Cl8RGWpCqv
What's the best way to fix this in bootstrap 3 (Note: I'm using regular css/css3, neither less nor sass)?
<nav class="navbar navbar-default navbar-static-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 collapsed" data-toggle="collapse" data-target="#tusaj-main">
<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 brandmedia" href="#"><img src="img/logo_final.png" alt=""></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="pspacerv20t spacerh10r">
<div class="collapse navbar-collapse" id="tusaj-main">
<ul class="nav navbar-nav navbar-right">
<p class="navbar-text">Search Jobs By:</p>
<li>State</li>
<li class="divider-vertical"></li>
<li><div class="spacerh80"> Category</div></li>
<li>Post Jobs</li>
<li class="divider-vertical"></li>
<li class="dropdown">
Client Login <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>
<form class="form-inline no-margin center-block" role="form">
<div class="form-group pspacerv10b pspacerv10t">
<div class="col-sm-5">
<input type="text" placeholder="Username" class="form-control">
</div>
</div>
<div class="form-group pspacerv10b">
<div class="col-sm-5">
<input type="password" placeholder="Password" class="form-control">
</div>
</div>
<!--<div class="form-group pspacerv10b">
<div class="col-sm-6">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
</div> /-->
<div class="form-group center-block pspacerv10b">
<div class="col-sm-3">
<button type="submit" class="btn btn-success">Sign in</button>
</div>
</div>
</form>
</li>
</ul>
</li>
</ul>
</div>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
<div class="tagline col-lg-12">
<p class="taglinealignright pspacerv15t spacerh25r">Search Jobs and Careers: Find Your Ideal Job. 1,000s of New Jobs Daily!</p>
<br />
</div>
</nav>
Demo