Why are my navbar links appearing vertically rather than horizontal? - html

Question

My nav links are appearing like so:
/* You can add global styles to this file, and also import other style files */
#import '#angular/material/prebuilt-themes/deeppurple-amber.css';
#import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css';
mark {
background-color: yellow !important;
color: black;
}
.navbar-custom {
background-color: #4082e485;
}
/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
color: rgba(255,255,255,.8);
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
color: rgba(255,255,255,.5);
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link{
color: #ffffff !important;
}
.navbar-custom .nav-item:hover .nav-link {
color: blue !important;
}
<nav class="navbar navbar-custom">
<div class="container" id="navbarNav">
<a class="navbar-brand" routerLinkActive="active" [routerLink]="['/']"><fa-icon [icon]="faGlobeAmericas"></fa-icon> Offshore</a>
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/']"><fa-icon [icon]="faHome"></fa-icon> Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/results']" ><fa-icon [icon]="faSearch"></fa-icon> Search</a>
</li>
<li class="nav-item active">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/links']" ><fa-icon [icon]="faLink"></fa-icon> Links</a>
</li>
</ul>
</div>
</nav>
Rather than side by side.
Anyone know how to
Fix this so that the links appear horizontally.
The colour of the nav links do change when I hover over them, however they don't reflect the page I'm currently on - so it would be a great if I could have this working too.

Answer 1

you just have to add nav class to <ul class="navbar-nav"> your problem will solve.
#import '#angular/material/prebuilt-themes/deeppurple-amber.css';
#import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css';
mark {
background-color: yellow !important;
color: black;
}
.navbar-custom {
background-color: #4082e485;
}
/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
color: rgba(255,255,255,.8);
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
color: rgba(255,255,255,.5);
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link{
color: #ffffff !important;
}
.navbar-custom .nav-item:hover .nav-link {
color: blue !important;
}
<nav class="navbar navbar-custom">
<div class="container" id="navbarNav">
<a class="navbar-brand" routerLinkActive="active" [routerLink]="['/']"><fa-icon [icon]="faGlobeAmericas"></fa-icon> Offshore</a>
<ul class="navbar-nav nav">
<li class="nav-item active">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/']"><fa-icon [icon]="faHome"></fa-icon> Home</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/results']" ><fa-icon [icon]="faSearch"></fa-icon> Search</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/links']" ><fa-icon [icon]="faLink"></fa-icon> Links</a>
</li>
</ul>
</div>
</nav>
Note: make snippet full width and check it will work perfect. if you want to make all the link in same line in small devices also you need to make media css for that.
I hope this will help you.
Thank You...

Answer 2

Try inline-block on li
/* You can add global styles to this file, and also import other style files */
#import '#angular/material/prebuilt-themes/deeppurple-amber.css';
#import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css';
mark {
background-color: yellow !important;
color: black;
}
.navbar-custom {
background-color: #4082e485;
}
/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
color: rgba(255,255,255,.8);
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
color: rgba(255,255,255,.5);
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link{
color: #ffffff !important;
}
.navbar-custom .nav-item:hover .nav-link {
color: blue !important;
}
.nav-item{
display: inline-block;
margin-right: 10px;
}
<nav class="navbar navbar-custom">
<div class="container" id="navbarNav">
<a class="navbar-brand" routerLinkActive="active" [routerLink]="['/']"><fa-icon [icon]="faGlobeAmericas"></fa-icon> Offshore</a>
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/']"><fa-icon [icon]="faHome"></fa-icon> Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/results']" ><fa-icon [icon]="faSearch"></fa-icon> Search</a>
</li>
<li class="nav-item active">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/links']" ><fa-icon [icon]="faLink"></fa-icon> Links</a>
</li>
</ul>
</div>
</nav>
And second for second try this RouterLink does not work

Answer 3

It is because the default behaviour of an unordered list ( <ul><li></li></ul> ) is to stack vertically. One way to style this differently is by making its parent flex and justify it's child elements in a way you prefer. In the following example this has been done with flex:
.navbar-custom {
background-color: #4082e485;
}
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
color: rgba(255,255,255,.8);
}
.navbar-custom .navbar-nav .nav-link {
color: rgba(255,255,255,.5);
}
.navbar-custom .nav-item.active .nav-link{
color: #ffffff !important;
}
.navbar-custom .nav-item:hover .nav-link {
color: blue !important;
}
/* added code to make the navigation horizontal */
#navbarNav {
display: flex;
justify-content: center;
align-items: center;
}
.navbar-nav {
display: flex;
justify-content: space-evenly;
}
.navbar-nav li {
list-style-type: none;
padding: 0 15px;
}
<nav class="navbar navbar-custom">
<div class="container" id="navbarNav">
<a class="navbar-brand" routerLinkActive="active" [routerLink]="['/']"><fa-icon [icon]="faGlobeAmericas"></fa-icon> Offshore</a>
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/']"><fa-icon [icon]="faHome"></fa-icon> Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/results']" ><fa-icon [icon]="faSearch"></fa-icon> Search</a>
</li>
<li class="nav-item active">
<a class="nav-link" routerLinkActive="active" [routerLink]="['/links']" ><fa-icon [icon]="faLink"></fa-icon> Links</a>
</li>
</ul>
</div>
</nav>

Answer 4

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main_nav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main_nav">
<ul class="navbar-nav">
<li class="nav-item active"> <a class="nav-link" href="#">Home </a> </li>
<li class="nav-item"><a class="nav-link" href="#"> About </a></li>
<li class="nav-item"><a class="nav-link" href="#"> Services </a></li>
</ul>
</div> <!-- navbar-collapse.// -->
</nav>
Here are more examles of navbars
Navbar
Home
About
Services
Here are more examles of navbars https://bootstrap-menu.com/index.html