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
Related
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 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 ">
li href with '#' works fine but I'd like to write url of the another page. I tried to add some divs, forms or btn from bootstrap but that solution makes my page messy(unexpected margins or something strange).
I have no idea how to solve the problem.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- 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="#menu">
<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="wow fadeInRight" data-wow-duration="2s">
<a class="navbar-brand" href="#home"></a>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="menu">
<ul class="nav navbar-nav navbar-right">
<!-- Sklep -->
<li>Sklep
</li>
<!-- SOCIAL -->
<li style="padding-top:9px; margin-left:50px;">
<a href="https://www.facebook.com" target="blank" style="padding:0 5px; margin-top:auto;margin-bottom:auto;" class="social">
<img src="img/ikony/facebook-2-32.png" alt="">
</a>
<a href="https://www.youtube.com" target="blank" style="padding:0 5px; margin-top:auto;margin-bottom:auto;" class="social">
<img src="img/ikony/youtube-2-32.png" alt="">
</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
I don't completely understand your question, however when I have formatting issues with href tags, I tend to use JavaScript:
<div onclick="http://ebay.com" />
Perhaps if you explain your question a little better I may be able to help.
I want to create a twin navbar (two rows) with Bootstrap.
The navbar template doesn't really meet my design goals, which look something like:
(this demo)
+-------------+--------------------------------+
| title | | this part does not collapse
+-------------+--------------------------------+
| two-line | two-line | | on smaller screens,
| button | button | | collapses to 'hamburger' menu
+----------------------------------------------+
I am having difficulty collapsing the 2nd row into the hamburger menu.
My code is: (did this manually to achieve look as above)
<table>
<tr>
(1 cell for title, 1 cell for rest of row)
</tr>
<tr class="nav2">
<td style="width:100%;" colspan="2">
<table style="width:600px;">
<tr>
<td style="width:100%;">
<div class="container-fluid">
<div class="row">
<a href="#"><div class="col-xs-3">
<span class="link">Heatmap</span>
</div></a>
<a href="#"><div class="col-xs-3">
<span class="link">Basic<br>Reports</span>
</div></a>
<a href="#"><div class="col-xs-3">
<span class="link">Group-aware<br>Reports</span>
</div></a>
<a href="#"><div class="col-xs-3">
<span class="link">Auto Group<br>Identification</span>
</div></a>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
(...)
I would replace that whole container-fluid with a navbar, but then I wouldn't be able to achieve the design as linked in: (demo). I tried adjusting the CSS parameters, but wasn't able to get the look and precise measurements.
Any way to make the 2nd row collapsible on mobile, manually or otherwise, while preserving the design?
Here's a slightly different idea. I like Macsupport's second navbar from your original design, but the toggle button on a second row on a mobile device doesn't make a lot of sense to me. Especially on mobile where space is limited. Having a hamburger button on the far right doesn't really detract from the logo at all.
Here's a pretty standard navbar example, except I've added the class .twoRow
<div class="navbar navbar-inverse twoRow">
<div class="container">
<!-- Header -->
<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>
<a class="navbar-brand" href="#">
Bootstrap 3 Skeleton
</a>
</div>
<!-- Navbar Links -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
For the CSS, on a widescreen device, just clear the .navbar-collapse float so it creates a new line:
#media (min-width: 768px) {
.twoRow .navbar-collapse {
clear: left;
}
}
Working Demo in jsFiddle
Which will look like this:
Here is a rough example:
/* CSS */
.nav2 {
margin-top: 50px;
}
<!-- HTML -->
<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"/>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<a class="navbar-brand" href="#">Brand</a>
</div>
</nav>
<nav class="navbar navbar-inverse nav2" 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="#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>
</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">Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>