I do have a bootstrap#3 navigation bar in my Angular 7 project.
nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" routerLink="/">
<div class="container" style="padding-left: 0px; padding-right: 0px; height: 20px; width: 40px">
UTCN
</div>
</a>
<div class="navbar-brand" style="margin-left: 3px;"><i class="fas fa-bars"></i></div>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<ng-template [ngIf]="!authService.isAuthenticated()">
<li routerLinkActive="active"><a routerLink="/signup">Register</a></li>
<li routerLinkActive="active"><a routerLink="/signin">Login</a></li>
</ng-template>
</ul>
</div>
</div>
</nav>
I need to obtain a responsive behaviour, but the right side content, the div element with class 'nav navbar-nav navbar-right' is dissapearing when screen size is small (xs).
How can i make the that div to use the left-side available space and not vanishing?
Related
I'm trying to get a picture (below I've tested with a single background color) to cover the navbar aswell as the showcase/jumbotron. However I can't get it to cover both correctly and the navbar is left untouched - even if I create a div that surround the navbar and jumbotron and assign a background picture to this.
Additionally when I try a picture it is stretched in a rather random way across the showcase, how do I get this to cover the elements correctly ?(image size is 1400x693 svg).
<header class="nav-header">
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="container">
<span class="navbar-brand"><i>Logo</i></span>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse"
aria-controls="navbar-collapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#">How it works</a></li>
</ul><!--//nav-->
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">My Profile</a>
</li>
<li class="nav-item">
<a class="btn btn-outline-success" href="#">Log out</a>
</li>
</ul>
</div>
</div>
</nav><!--//header-->
</header>
<section>
<div class="showcase">
<div class="container">
<div class="jumbotron jumbotron-fluid showcase-content text-white">
<div class="row">
<div class="col-lg-6">
<h2 class="display-4">Some title.</h2>
<p class="lead">Some additional showcase text.</p>
<p>
<a class="btn btn-secondary text-white " href="#">Get Started -></a>
</p>
</div>
<div class="col-lg-6">
<image></image>
</div>
</div>
</div>
</div><!--//container-->
</div>
</section><!--//promo-->
Css
.showcase {
background-color: red;
background-size: cover;
}
.nav-header {
background-color: transparent;
}
.showcase-content {
background-color: transparent;
}
Codepen:
https://codepen.io/anon/pen/vjqvEE
The issue was having bg-light within the navbar which was overriding assigning the colour to the navbar too.
I have to create a layout in which a content grid has to be on the full remaining page, but the layout has also a navigation bar.
In order to do this I decided to place the navigation bar in a flex container and the content in a row with height 100%. I need the content to fill the rest of the remaining space. The menu is dynamic so I can not know how the height of the navigation bar is.
However on smaller screens the navigation bar does not resize correctly. If the menu is expanded the menu is overlayed with the content.
<div class="container-fluid h-100 d-flex flex-column">
<nav class="navbar navbar-expand-sm s-navbar">
...
</nav>
<div class="row h-100">
...// content presented here
</div>
</div>
You can see it here
https://jsfiddle.net/ej9fd368/8/ that the last menu item is cut because of the yellow content.
My requirement is that the content should fill the rest of the page.
Instead of using h-100 on the yellow content area, add an extra CSS class to make it flex-grow:1 in height...
.flex-fill {
flex:1 1 auto;
}
https://www.codeply.com/go/xBAMfbHqbN
<div class="container-fluid h-100 d-flex flex-column">
<nav class="navbar navbar-expand-sm s-navbar">
<a class="brand navbar-brand" href="/">Brand</a>
<button class="navbar-toggler s-btn-hamburger order-first s-color-icons" aria-expanded="true" aria-controls="navbar-test" aria-label="Toggle navigation" type="button" data-target="#navbar-test" data-toggle="collapse">
<span class="navbar-toggler-icon k-icon k-icon-md k-i-hamburger"></span>
</button>
<div class="navbar-collapse s-menu-content collapse show" id="navbar-test">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="dropdown1" aria-expanded="false" aria-haspopup="true" data-toggle="dropdown">Menu Item</a>
<div class="dropdown-menu" aria-labelledby="dropdown1">
<a class="dropdown-item" href="/Device">Sub menu</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="/Test">Test</a>
</li>
</ul>
</div>
</nav>
<div class="row flex-fill">
<main class="col" style="background-color: yellow"></main>
</div>
</div>
Note: The flex-fill utility class will be included in the next Bootstrap 4.1 release:
https://github.com/twbs/bootstrap/commit/2137d61eacbd962ea41e16a492da8b1d1597d3d9
(Updated Bootstrap 4.1 demo)
Related question: Bootstrap 4: How to make the row stretch remaining height?
.sub-navbar {
background-color: #002b31;
height:57px;
font-size: 13px;
margin-top: 175px;
}
This is my CSS file ,
And this is my HTML file
<div class="container-fluid">
<div class="row">
<nav class="navbar navbar-default sub-navbar">
<div *ngFor="let nav of navMenu">
<ul class="nav navbar-nav ">
<div *ngIf="nav.link == currentLink">
<li *ngFor="let sub of nav.subMenu">
<a [routerLink]="[sub.link]">
{{sub.name}}
</a>
</li>
</div>
</ul>
</div>
</nav>
</div>
Here is what it looks like the sub menu because menu is okay / Photo
i found a solution :D - weekend
<div class="container-fluid ">
<div class="row">
<nav class="navbar navbar-default sub-navbar">
<div *ngFor="let nav of navMenu">
<ul class="nav navbar-nav " *ngIf="nav.link == currentLink">
<!--<div *ngIf="nav.link == currentLink" >-->
<li *ngFor="let sub of nav.subMenu">
<a [routerLink]="[sub.link]">
{{sub.name}}
</a>
</li>
<!--</div>-->
</ul>
</div>
</nav>
</div>
the problem was in the tag with the ngIf
I'm having a bit of a problem with the Bootstrap nav I've placed on a website I'm making.
When collapsed on smaller screens, the drop down navigation menu doesn't span 100% of the screen - It looks as if there's a 1px gap on either side of the menu and I can't seem to figure out how to fix this.
** EDIT **
Due to bad markup in my original post - I've updated this (still having probelems, but this represents my problem better) at JSFIDDLE
<div class="navbar navbar-custom">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation">
<span class="fa fa-bars fa-2x"></span> Menu</button>
<span class="logo"> Logo</span>
</div>
<div class="collapse navbar-collapse" id="navigation">
<ul class="nav navbar-nav navbar-right">
<li>Book A Repair </li>
<li>About </li>
<li>How it Works </li>
<li>Testimonals </li>
<li>Contact </li>
</ul>
</div>
</div>
It's happening because of the Bootstrap margin on the .navbar-collapse.. which is a negative margin of 15px. Just move it out a pixel on each side:
.navbar-custom .container >.navbar-collapse {
margin-right: -16px;
margin-left: -16px;
}
Bootply
I'm trying to create a pretty simple double-navbar effect with Bootstrap. The only problem I have right now is that the second/bottom navbar isn't stretching across the whole browser width. Here's my code...
<nav class="navbar navbar-fixed-top navbar-inverse">
<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" style = "line-height: 30px;">
<span class="sr-only">Toggle navigation</span>
<span class="glyphicon glyphicon-menu-hamburger" style="color:#fff;"></span>
</button>
<a class="navbar-brand" href="#" style = "line-height: 30px;">brand</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<!-- <li>Button</li> -->
</ul>
</div><!-- /.nav-collapse -->
<!-- this is the second navbar element that never takes up the full width available-->
<div class="nav navbar-default" style="background-color: #66CCFF;">
<ul class="nav navbar-nav">
<li></li>
<li class="divider-vertical"></li>
<li></li>
<li class="divider-vertical"></li>
<li></li>
</ul>
</div>
</div><!-- /.container -->
</nav><!-- /.navbar -->
I've played with various different navbar types and css styles (e.g. width:100%), but I can't seem to figure out how to make the second navbar (i.e. the one containing the 3 glyphicons) the same width as its parent.
Really appreciate any ideas on what I might be doing wrong!
You need to use container-fluid instead of container since latter has a fixed width.
.container-fluid still contains CSS rules for padding. You may try to overwrite it using custom class.
.container-fluid.no-padding {
padding: 0;
}
.no-padding .navbar-header {
padding-left: 10px; /* Align the Brand text */
}
#media (max-width: 768px) {
.no-padding .navbar-nav {
padding-left: 10px; /* Align the icons on small screens */
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />
<nav class="navbar navbar-fixed-top navbar-inverse">
<div class="container-fluid no-padding">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" style="line-height: 30px;">
<span class="sr-only">Toggle navigation</span>
<span class="glyphicon glyphicon-menu-hamburger" style="color:#fff;"></span>
</button>
<a class="navbar-brand" href="#" style="line-height: 30px;">brand</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<!-- <li>Button</li> -->
</ul>
</div>
<!-- /.nav-collapse -->
<!-- this is the second navbar element that never takes up the full width available-->
<div class="nav navbar-default" style="background-color: #66CCFF;">
<ul class="nav navbar-nav">
<li>
</li>
<li class="divider-vertical"></li>
<li>
</li>
<li class="divider-vertical"></li>
<li>
</li>
</ul>
</div>
</div>
<!-- /.container -->
</nav>
<!-- /.navbar -->
.navbar > .container {
padding-left: 0;
padding-right: 0;
}
just removing the padding from container changes all the instances of container on your page.
you then want to add padding back to your navbar-header
.navbar > .container {
padding-left: 0;
padding-right: 0;
}
.navbar .navbar-header {
padding: 5px 10px;
}