.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
Related
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?
I am using Bootstrap Beta 4 and I found that nav overlaps my column div, what I might have done wrong here?
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
<a class="navbar-brand" href="#">Nav Link</a>
<div id=navbar class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href=#>Dashboard</a>
</li>
</ul>
</div>
</nav>
<div class="row">
<div class="col border">
Left panel
</div>
<div class="col border">
Right panel
</div>
</div>
</div>
</body>
</html>
if you remove the class fixed-top from your nav element it will stop the overlap.
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-light bg-light"><!--Removed fixed-top-->
<a class="navbar-brand" href="#">Nav Link</a>
<div id=navbar class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href=#>Dashboard</a>
</li>
</ul>
</div>
</nav>
<div class="row">
<div class="col border">
Left panel
</div>
<div class="col border">
Right panel
</div>
</div>
</div>
</body>
</html>
Alternatively you could add some css to override the positioning of the nav element. (This way you don't have to remove the fixed-top class from your nav)
<style>
.fixed-top{
position:relative
}
</style>
Hope this helps :-)
On the picture is right side of my site. Some elements out from bootstrap grid.
<div class="container">
<div class="col-md-12">
<div class="row">
First
<nav class="main_menu clearfix">
<button class="main_menu_button hidden-md hidden-lg"><i class="fa fa-bars"></i></button>
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
</div>
</div>
</div>
Why element nav can out from bootstrap grid? My main part is gray
Not really sure what is wrong with your markup or style, it's hard to understand from the given content, but you should put .col-md-12 inside of .row not the other way around.
Here are some examples: https://getbootstrap.com/examples/grid/
I would definitely familiarize yourself with how the HTML and CSS classes should be structured with bootstrap. You will need to start with a container class(eg. class="container"). Inside the container goes rows (class="row"), and inside the rows is your columns(eg. class="col-md-12").
Check out this page: http://getbootstrap.com/css/
If you are looking to build a nav out in bootstrap you do not necessarily need to re-invent the wheel and can use their Navbar Template: http://getbootstrap.com/examples/navbar/
Possibly something like this would work for you:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-xs-3">
First
</div>
<div class="col-xs-9">
<nav class="main_menu clearfix">
<button class="main_menu_button hidden-md hidden-lg">menu</button>
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
You should try using bootstrap4 class.
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="brand" href="#">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="nav navbar">
<li class="nav-item"><a class="nav-link" href="#">Home</li>
<li class="nav-item"><a class="nav-link" href="#">career</li>
<li class="nav-item"><a class="nav-link" href="#">Contact</li>
<li class="nav-item"><a class="nav-link" href="#">about</li>
</ul>
</div>
</nav>
in case of you want to have vertical navigation then in nav tag remove the navbar-expand class.
I am using Bootstrap v3 for a layout and have added a dropdown to the navbar but when I add btn-primary the text is black so cannot be seen, if I remove the btn-primary then the corner radius seems to overlap the menu.
Any help is appreciated.
<div class="container">
<div class="col-md-12 column">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="Javascript:void(0);">Title Information </a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown btn-primary">
<a class="dropdown-toggle btn-primary" href="Javascript:void(0);" data-toggle="dropdown">Actions<strong class="caret"></strong></a>
<ul class="dropdown-menu">
<li>
Action 1
</li>
<li>
Action 2
</li>
<li>
Action 3
</li>
<li class="divider"></li>
<li>
Close
</li>
</ul>
</li>
</ul>
</div>
</nav>
<div role="tabpanel" class="col-md-12 column">
<!-- 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">...</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div>
<div role="tabpanel" class="tab-pane" id="messages">...</div>
<div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>
</div>
</div>
</div>
</div>
some images:
https://www.dropbox.com/s/fuirgtcfc0obl04/Image1.JPG?dl=0
https://www.dropbox.com/s/en0vooc1z99hbkh/Image2.JPG?dl=0
Take out the "btn-primary" but change it to "btn" only, that should fix it.
Remove both btn-primary classes, as these aren't required.
You also have </div> and </nav> closing in the wrong order, and two extra </div> at the bottom of your code.
With the btn-primary removed, and the above fixed, then you get the following:
https://jsfiddle.net/9jym0k8r/
You can customize the style of bootstrap button.
I just added this to change the color of text :
.navbar-default .navbar-nav>li>a {
color: #FFF;
}
Link Demo : http://www.bootply.com/Ukp9KCUuFP
You can also give an "unique id" then customize the style for this button.
<a id="test" class="dropdown-toggle btn-primary" href="Javascript:void(0);" data-toggle="dropdown">Actions<strong class="caret"></strong></a>
css:
#test {
color:white;
}
#test:hover{
color:black;
}
Link : http://www.bootply.com/XWF4x6uhmz
Why span5 not going to the right position? Span5 is go to under Span6.I'm linked to bootstrap
My code:
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<header>
<div class="container">
<div class="row">
<div class="span6">
<a href="#">
<img src="image/logo.png" class="logo_img" />
</a>
</div>
<div class="span5">
<ul class="nav nav-pills nav-pos">
<li>Ваш город
</li>
<li>Клиники
</li>
<li>Врачи
</li>
<li>Диагностика
</li>
</ul>
</div>
</div>
</div>
</header>
Use display: inline-block.
.span6, .span5 {
display: inline-block;
vertical-align: top;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<header>
<div class="container">
<div class="row">
<div class="span6">
<a href="#">
<img src="http://dummyimage.com/40/" class="logo_img" />
</a>
</div>
<div class="span5">
<ul class="nav nav-pills nav-pos">
<li>Ваш город
</li>
<li>Клиники
</li>
<li>Врачи
</li>
<li>Диагностика
</li>
</ul>
</div>
</div>
</div>
</header>
From your snippet, it's hard to advise you're best option. Although one 'simple' styling would be to add float:right to your css like so:
.span5{
float:right;
}
The Demo below shows this in action:
.span5{
float:right;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<header>
<div class="container">
<div class="row">
<div class="span6">
<a href="#">
<img src="image/logo.png" class="logo_img" />
</a>
</div>
<div class="span5">
<ul class="nav nav-pills nav-pos">
<li>Ваш город
</li>
<li>Клиники
</li>
<li>Врачи
</li>
<li>Диагностика
</li>
</ul>
</div>
</div>
</div>
</header>
you could also use the display options, like below (aligning logo next to links):
div{
display:inline-block;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<header>
<div class="container">
<div class="row">
<div class="span6">
<a href="#">
<img src="image/logo.png" class="logo_img" />
</a>
</div>
<div class="span5">
<ul class="nav nav-pills nav-pos">
<li>Ваш город
</li>
<li>Клиники
</li>
<li>Врачи
</li>
<li>Диагностика
</li>
</ul>
</div>
</div>
</div>
</header>