CODEWITHSUNDEEP
htmlcssangulartwitter-bootstrap
JohnD91
JohnD91

Reputation: 583

Why are my navbar links appearing vertically rather than horizontal?

My nav links are appearing like so:

enter image description here

/* 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

  1. Fix this so that the links appear horizontally.
  2. 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.

Upvotes: 0

Views: 1075

Answers (4)

Vosidiy M
Vosidiy M

Reputation: 11

<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

Upvotes: 0

KuldipKoradia
KuldipKoradia

Reputation: 3031

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

Upvotes: 1

Web Tailor
Web Tailor

Reputation: 391

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>

Upvotes: 1

Awais
Awais

Reputation: 4902

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

Upvotes: 0

Related Questions