The CSS styles are not properly applied to my HTML page, causing it not to display

I have customized my navbar but it is not appearing on the HTML or the website. I am also aiming to alter the font and add color to each section of the navbar. Below you will find my CSS and HTML code.

.header_area .main-menu .navbar .navbar-brand{
padding: 0 2rem 0 5rem;
}

.header_area .main-menu .navbar{
padding: 1rem 20rem;
}

.header_area .main-menu .nav-item .nav-link{
font-family: "Lato", cursive;
text-transform: uppercase;
font-weight: 500;
padding: 1.7rem;
color: black;
}

Here is my HTML code:

  <header class="header_area">
    <div class="main-menu">
        <nav class="navbar navbar-expand-lg navbar-light">
            <div class="container-fluid">
              <a class="navbar-brand" href="#"><img src="/img/logos.png" alt="logo" width="40" height="40"></a>
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse justify-content-end" id="navbarNav"></div>
                <div class="mr-auto"></div>
                <ul class="navbar-nav">
                  <li class="nav-item">
                    <a class="nav-link " aria-current="page" href="#">Home</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">About Me</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Projects</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Skills</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Contigency Plans</a>
                  </li>
htmlcssbootstrap-4

Answer №1

It seems like your HTML code is not complete. If your CSS is located in another folder, you need to link it like this:

<link rel="stylesheet" href="style.css" />

Here is an example of how your HTML code should look:

Below are the complete codes:

In your style.css file, add the CSS code

In your index.html file, add the following code:

<head>
<title>My codes</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
  <header class="header_area">
    <div class="main-menu">
        <nav class="navbar navbar-expand-lg navbar-light">
            <div class="container-fluid">
              <a class="navbar-brand" href="#"><img src="/img/logos.png" alt="logo" width="40" height="40"></a>
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse justify-content-end" id="navbarNav"></div>
                <div class="mr-auto"></div>
                <ul class="navbar-nav">
                  <li class="nav-item">
                    <a class="nav-link " aria-current="page" href="#">Home</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">About Me</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Projects</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Skills</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Contigency Plans</a>
                  </li>
</ul>
</div>
</nav>
</div>
</header>
</body>
</html>

Answer №2

Your code is functioning perfectly. All the properties you specified are working smoothly.

I have a desire to modify the font type and add color to each segment of the navigation bar.

Initially, you need to acquire a font from Google Fonts. Typically, hyperlinks appear blue in color, but you have the ability to modify them [if that's your intention]

.header_area .main-menu .navbar .navbar-brand{
padding: 0 2rem 0 5rem;
}

.header_area .main-menu .navbar{
padding: 1rem 20rem;
}

.header_area .main-menu .nav-item .nav-link{
font-family: "Lato";
text-transform: uppercase;
font-weight: 500;
padding: 1.7rem;
color: black;
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">

<header class="header_area">
    <div class="main-menu">
        <nav class="navbar navbar-expand-lg navbar-light">
            <div class="container-fluid">
              <a class="navbar-brand" href="#"><img src="/img/logos.png" alt="logo" width="40" height="40"></a>
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse justify-content-end" id="navbarNav"></div>
                <div class="mr-auto"></div>
                <ul class="navbar-nav">
                  <li class="nav-item">
                    <a class="nav-link " aria-current="page" href="#">Home</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#" style="color:red">About Me</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Projects</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Skills</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Contigency Plans</a>
                  </li>

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

Troubleshooting jPlayer Preload Problem

Currently, I am utilizing HTML5 jPlayer to play audios through a recursive method. While everything is functioning smoothly and the audio is playing, there seems to be a delay when loading the new audio. To eliminate this delay between audios, I aim to pr ...

jqueryhtmljplayer

When it comes to choosing between CSS and Angular Animations for supporting animations on both browsers and NativeScript mobile applications, which approach is more effective?

Are angular animations my only option or can I also utilize css animations with native elements on mobile devices? How are css animations from an angular application translated to native mobile, and is this method less effective than angular animations? I ...

cssangularnativescriptnativescript-angularangular-animations

Angular directive failed to correctly retrieve object

I have a person object loaded from the backend that is structured as follows: { "PersonId":"19894711-2eb9-4edf-92c6-85de2b33d1bb", "Firstname":"Jacky", "Lastname":"Chan", "DateOfBirth":"1963-09-18T00:00:00", "CreateDate":"2015-12-11T09 ...

javascriptjqueryhtmlangularjsasp.net-web-api2

Ways to select the initial 10 rows, final 3 rows, and middle 2 rows using Javascript

As a newcomer to Javascript, I have a couple of questions: 1) How can I retrieve the first 10 rows, the last 3 rows, and the 2 rows in the center using the code var firstTable = $('#aaa table').eq(0); 2) Is there a way to create and assign new ...

javascriptjqueryhtml

Utilizing PHP for file uploading and inserting the file path into a MySQL database

FileUpload.php: <?php //Directory to save uploaded images $targetDir = "img/"; $targetFilePath = $targetDir . basename($_FILES['uploadedFile']['name']); //Get form data $fileName = $_POST['uploadedFile']; $fileDescriptio ...

phphtmlmysqlweb

What are the steps to configure Bootstrap for optimal performance?

Here is the code snippet: <template lang="pug"> b-container b-row b-col h1 strong LICOTA® — ПРОФЕССИОНАЛЬНЫЙ ИНСТРУМЕНТ ВЫСШЕГО КЛАССА ДЛЯ АВТОСЕРВИСОВ И ПРОМ ...

vue.jsbootstrap-4pugbootstrap-vue

Turn off and then turn on user input without exiting the textarea

I've been working on a small project that requires me to enable and disable text input in a textarea using key commands, similar to Vi/Vim's insertion and command modes. However, I'm struggling to find an elegant solution. Disabling the tex ...

javascriptjqueryhtml

What is the best way to iterate through multiple iframes?

I need help figuring out how to load one iframe while having the next one in line to be displayed. Is there a way to create a script that cycles through multiple iframes after a certain amount of time? ...

javascriptjqueryhtmlajaxiframe

send the user to a different page while transferring post data using Javascript

Currently, I have an HTML form that utilizes the post method to send data to a PHP page for processing into a MySQL database. However, before the user submits the form, there is a button that allows them to view a PDF of the entered data on a new page. Whi ...

phpjavascripthtmlpost

Could Safari 7.1 be causing issues with outline-color and overflow?

After upgrading to Safari 7.1, I noticed that a couple of my css lines have stopped working. These lines were functioning fine with Safari 7.0.x and are still working in browsers like Chrome. overflow: hidden; and outline-color: [color]; Specifically, ...

csssafari

Adjusting the inner div dimensions to be 100% of the body's size without relying on the parent div using JavaScript

I have a main layer with multiple layers stacked on top of it. I need the second layer to extend its width to match the body's width. Main Project: http://example.com What I've tried: I looked into: Solution for matching div width with body ...

javascriptjqueryhtmlcss

Tips for customizing the transparency of a Bootstrap dropdown menu

I'm currently working with .navbar-default { z-index:99; opacity:0.8; } However, I am looking to adjust the opacity of dropdown menu items to 0.9. I have attempted several solutions without success. Here are a few examples: .dropdown-menu>li> ...

csstwitter-bootstrapmenutransparencyopacity

Having difficulty automatically adjusting the width of HTML columns according to their content

I have a HTML table that I want to automatically set the width of the table columns, adjusting based on the content within. Despite setting the width to auto, as shown in the image below, the content in the ID column does not stay confined to a single line ...

htmlcssbootstrap-4

Steps to implementing a function just before a form is submitted

Imagine a scenario where you have the following HTML form: <form action="myurl.com" method="post" id="myForm"> <input type="number" name="number" class="numberInput"> <input type="number" name="number"> <input type="submit ...

javascripthtmlforms

What is the best way to close the space between a box-shadow and a div background when incorporating semi-transparent rgba() values?

There seems to be an issue arising when applying partially transparent rgba() background-color and box-shadow color values to an element with a non-fixed (percent-based) border-radius. This combination results in a minuscule transparent gap appearing at th ...

cssborderbackground-colorrgbabox-shadow

Fixed position of the element within a parent stacking context

How can I ensure that the #icon appears below the #dropdown in the following example? https://i.stack.imgur.com/GoBcR.png The position: fixed of #container seems to be creating a new stacking context for its children. Changing the position value fixes th ...

htmlcss

Equal-height columns in a responsive grid system

I'm currently facing an issue with a layout that seems simple I am working on a design featuring 4 headline boxes. In the "desktop" view, all 4 boxes need to be of equal height. The same applies when viewed across 2 boxes in the "tablet" mode. Howeve ...

cssresponsive-designgrid-layout

Website Translator

I'm currently working on a website that needs to be available in two languages. One option is to do our own translations, but that could end up requiring more time for development. That's why I am exploring the possibility of finding a suitable ...

phphtmlinternationalizationwebmachine-translation

The functionality of alpine.js x-for update is not functioning as intended

I have implemented a basic x-for loop on data from the Alpine Store (need it to be global). My objective is to modify a specific row after the table has been rendered by the x-for. Codepen: https://codepen.io/roniwashere/pen/oNMgGyy <div x-data> ...

javascripthtmlalpine.js

What is the best way to create a div that maintains a consistent size while displaying images inside?

Struggling with a project and attempting to create a fixed div container for uniform picture sizes, I've tested various methods recommended by others but have had zero success in altering the size of my div container. Could it be due to my use of boot ...

htmlcsstwitter-bootstrapbootstrap-4