Why are my navigation bar items stacking vertically instead of lining up horizontally?

My navigation links are displaying vertically instead of horizontally. Additionally, the color of the links changes when hovered over, but does not reflect the active page. Can anyone help with:

  1. Fixing the layout so that the links appear side by side.
  2. Ensuring the color of the nav links reflects the current page when active.
htmlcssangulartwitter-bootstrap

Answer №1

To resolve your issue, simply add the nav class to the <ul class="navbar-nav"> element.

@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;
}
/* adjust brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
  color: rgba(255,255,255,.8);
}
/* modify link color */
.navbar-custom .navbar-nav .nav-link {
  color: rgba(255,255,255,.5);
}
/* change active or hovered links color */
.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: Ensure the snippet is displayed at full width for optimal functionality. To maintain consistent link alignment on smaller devices, implement media queries in your CSS.

This guidance should effectively address your concerns.

Thanks for reaching out.

Answer №2

The reason for the default vertical stacking of an unordered list ( 

<ul><li></li></ul>
) is due to its inherent behavior. To change this layout, one option is to utilize flex properties on the parent element to control the positioning of its child elements. In the code snippet below, the navigation bar has been styled using flex properties:

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

Experiment with using display: inline-block for the li elements

/* Customize your navigation bar styles here */
@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;
}
/* Adjusting brand and text colors */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
    color: rgba(255,255,255,.8);
}
/* Modifying link color */
.navbar-custom .navbar-nav .nav-link {
    color: rgba(255,255,255,.5);
}
/* Changing active or hovered link colors */
.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>

For more guidance, check out this resource on why RouterLink might not be functioning as expected

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>

Experience various examples of navigation bars, including the Navbar:

  • Home
  • About
  • Services

To explore more navbar options, visit:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Karma error `An unhandled exception occurred: Cannot locate module ‘karma’` is encountered during Jest Angular testing

Looking to implement Jest testing in my Angular project, I have followed all the setup instructions provided here. Here is an excerpt from my package.json: { "name": "jest-test", "version": "0.0.0", ... } Additionally, here ...

angularunit-testingjestjsts-jest

I'm encountering issues with this code for a dice game. It's strange that whenever I click the roll dice button, it disappears. Additionally, linking an .css sheet seems to cause the entire page to

I'm currently working with two separate codes: one for HTML and the other for JavaScript. I am facing an issue where the button keeps disappearing when I try to add any CSS styling to it. Even a basic CSS file seems to override everything else and lea ...

javascripthtml

Looking to retrieve the selected item from the list using console.log

Brief explanation: I am trying to retrieve the clicked item from a list using console.log(i.match). Please refer to my **home.html** code snippet below for how the list is dynamically generated. home.html <ion-card> <ion-card-content *ngFor="l ...

angularionic-frameworkionic2ionic3

Is it possible to extract data from a table by adjusting Javascript in the inspector tool? The page is only showing today's data, but I'm interested in retrieving historical data by going back

My Desired Action: I am interested in extracting data from the 2nd and 3rd tables on this page. However, the data displayed is specific to the current 'day'. I wish to access readings from September 1st and import them into a Google Sheet. Speci ...

javascripthtmlweb-scraping

Span element not found using xpath

Recently updated the outer html and encountered a new error. It appears that the element was identified but failed to be clicked on. My script fails at the element below. I have attempted various methods to reconstruct the xpath, but the robot continues t ...

cssseleniumxpathrobotframework

Tips for managing sessions using Angular2 and Node.js

After extensive experience with express-session using mongodb as a session store, I now have the opportunity to work with Angular 2 on the frontend. I am curious about how to maintain session across both the frontend and server, considering they are operat ...

node.jsangularexpress-sessionangular2-jwt

Choosing specific information in Typescript response

I am encountering an issue with my HTML where it displays undefined(undefined). I have checked the data in the debugger and I suspect that there may be an error in how I am using the select data. Here is a snippet of the code: <div *ngIf="publishIt ...

javascriptangularasp.net-mvctypescript

Is there a way to remove the 'Previous' button from the first page in Angular 15?

Within my app, there is a 'form' that requires users to select an option before moving on to the next page where they must make another selection. Each list of options corresponds to a different component. Additionally, there is a static header c ...

angulartypescriptconditional-statementsrendering

Can I use jQuery to disable all elements within a div, including anchor and paragraph tags?

Can anyone offer assistance with HTML and CSS? I am trying to disable all content inside a div that has the class "main-wrapper" when a user clicks on a logout button using a jQuery function. I have attempted two methods, but so far without success! funct ...

jqueryhtmlcssjquery-ui

A different component experiences an issue where Angular Promise is returning undefined

This is the carComponent.ts file containing the following method: async Download() { try { const settings = { kit: true, tyres: true, serviced: false, }; const [kits, tyres] = await Promise.all([ this.c ...

javascriptangular

Unraveling the mysteries of Google web application parameters

I am currently in the process of gaining a better understanding of the Google web applications. The HTML source I am looking at contains JSON data that has been encoded in a way that is unfamiliar to me and I am seeking to decode it. The HTML source includ ...

htmljsonbase64decode

The directive is dynamically altering the disable attribute of its parent element

I am faced with a scenario where I have both a button and a directive in my template. The button can be disabled based on certain parameters defined in the template itself, as well as by the directive (it gets disabled in case of a double click event). B ...

angular

Endlessly scrolling text using CSS

Is it possible to create a continuous rolling text effect on an HTML page without any gaps, similar to a ticker tape display? For example, displaying "Hello World ... Hello World ... Hello World ... Hello World ..." continuously. I attempted using the CSS ...

javascripthtmlcssanimation

Tips on adjusting the scrollbar color with CSS

Check out my jsfiddle here I am attempting to modify the color of the scrollbar, but unfortunately it is not working as expected. This is the CSS code I am using: .flexcroll { scrollbar-face-color: #367CD2; scrollbar-shadow-color: #FFFFFF; ...

css

Ways to extract href attributes from a div element using xpath

I currently have a div setup like this: <div class="widget-archive-monthly widget-archive widget"> <h3 class="widget-header">Monthly <a href="http://myblog.com/blogs/my_name/archives.html">Archives</a></h3> < ...

htmlcssxpath

Encountering a HTTP 404 error message upon completing the deployment of Angular application on Her

After going through this particular guide and also checking out another guide, I am currently in the process of deploying my Angular application on Heroku. I have two applications - one is running smoothly while the other is facing issues, leaving me puzz ...

angularheroku

Connecting an external SVG file to its corresponding HTML code

Can I connect my SVG file to my CSS file for a line animation? I'm uncertain about including the SVG code directly in my HTML file. ...

htmlcsssvg

Dynamic circuit animation in motion

I have a div on my website with margins only, and I'm looking to create a cool effect when the page loads. I want it to look like there is a circuit running through the div, starting from the positive terminal (where a battery image overlaps the div) ...

css

Is it possible to achieve a seamless interaction by employing two buttons that trigger onclick events to alternately

I have a specific goal in mind: I want to create two buttons (left and right) with interactive cursors. The left button should initially have a cursor of "not-allowed" on hover, indicating that it cannot be clicked at the beginning. When the right button ...

javascripthtmlbuttononclickevent-listener

Tips for changing a UTC time to local time with the date pipe in Angular

Is there a way to convert from UTC to local datetime using the date pipe? I've only been able to find information on converting from local to UTC, but I'm specifically looking for how to convert from UTC to local datetime. ...

angular