Why are my navbar links appearing vertically rather than horizontal?

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.

set `float:left` css property on `li` tag else you can use `flexlayout` — Nethra, Dec 11 '19 at 11:49
If you are using bootstrap, simply follow the guidelines for navbar. To have an active status class in the menu and you are not using a CMS with functions already made for it, you will have to do something like this: https://stackoverflow.com/a/13338058/9225418 — Rinho, Dec 11 '19 at 12:05

KuldipKoradia · Accepted Answer · 2019-12-11T13:32:32.903

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...

hello dude, please replay here did this answer is work for you or not? — KuldipKoradia, Dec 12 '19 at 05:34
if you don't have a time to review answers here then why you post your question here to waste others time? — KuldipKoradia, Dec 12 '19 at 12:30
Hi, sorry I've been busy at work. This solved part of my problem - the link colour now reflects the active page. However the issue with the links appearing vertically still persists. — JohnD91, Dec 12 '19 at 13:20
ya but not in big screens this problem is only for small devices screen only right? — KuldipKoradia, Dec 12 '19 at 13:43
I'm using a 22" monitor and had the issue on that. I've fixed it with the following css: .navbar-nav { display: flex; justify-content: space-evenly; flex-direction: row; } — JohnD91, Dec 12 '19 at 13:49

score 0 · Answer 2 · answered Dec 11 '19 at 11:51

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

score 0 · Answer 3 · answered Dec 11 '19 at 11:55

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>

I got it working with your solution - but it was missing one thing. I had to also add flex-direction: row; to the navbar-nav element in the css. In the original bootstrap this was set to column, which was causing issues. — JohnD91, Dec 12 '19 at 13:30

score 0 · Answer 4 · answered Dec 13 '19 at 18:25

<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

Why are my navbar links appearing vertically rather than horizontal?

4 Answers4