Navigating through the website has become quite challenging due to the malfunctioning navigation bar. Instead

I recently completed a website and designed an awesome navigation bar in a separate file. However, when I combined them together, the navigation bar disappeared. The background of my "list" div should be filled in and larger, but it's not working as expected. I'm seeking assistance to ensure both the navigation bar and the site appear on the same page. Thank you for your help!

        
.list {
  background-color: #666;
    color: #111111;
    height: 105px;
    width: 100%;
}

.list a {
    
  margin-top: 20px;  
  float: right;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 25px;   
}

... (CSS code continues)

<!DOCTYPE html>
<html>
<head>
    <title>Resource Rangers</title>
    <link href="CSS for 4th project (1).css" rel="stylesheet">
</head>
<style>
... (HTML and CSS code continues)
</script>

</html>
htmlcssuinavigationbar

Answer №1

Make sure to match the case sensitivity when applying classes in your HTML and CSS. For example, if you are using the class List in your HTML, then your CSS should reference it as .list (lowercase "l").

To resolve this issue, simply change your HTML class from List to list and everything should work correctly.

Answer №2

Modified the code snippet to use 'list' instead of 'List' in the HTML. Additionally, I have set the .list position as fixed.

.list {
  background-color: #666;
    color: #111111;
    height: 105px;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 1000;
}

.list a {
    
  margin-top: 20px;  
  float: right;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 25px;   
}

.list a:hover {
  background-color: #70b5ff;
  color: #111111;
}

.list a.on {
background-color: #81ff7c;
  color: #005604; 
}

.imagefornav {
 
    width: 160px;
    height: 100px;
}

body, html {
    height: 100%;
    margin: 0;
    margin-top: 0;
    padding: 0;
    font-family: Verdana, sans-serif;
    line-height: 35px;  
    font-weight: 300;
    color: #797a7c;
}

.title {
      letter-spacing: 5px;
    color: #1d3863; 
      text-align: center;
      text-decoration: underline overline;
    font-size: 35px;
      line-height: 75px;
    margin-top: 13%;
      text-transform: uppercase;
    opacity: 1.00;
    padding-right: 370px;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 370px;
    animation: Fadein 2s ease-in;
}

@keyframes Fadein {
    
 from {
     opacity: 0;
    }
    
    to {
        opacity: 0.80;
    }
    
}

.imgc1, #imgc2, #imgc3, #imgc4 {
 position: relative;
     opacity: 0.80;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}


...

</script>
</html>

Answer №3

Within your HTML code, you have a class named "List", while in the corresponding CSS it is called "list". Make sure to update the class name in the HTML from "List" to "list" to ensure both files work correctly.

.list {
    background-color: #666;
    color: #111111;
    height: 105px;
    width: 100%;
}
    <div class="List">
    
    </div>
    
<!--    in the above class name is "List". change it to "list" -->
   <div class="list">

   </div>

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

simultaneous image hover effect for all images

I am experiencing an issue with my CSS and Bootstrap hover effect. The overlay tags are enclosed within a div class, but they all hover simultaneously. Each overlay belongs to a different Bootstrap grid, yet the effect extends even to the empty spaces betw ...

htmlcsstwitter-bootstrap

Tips for focusing on a background image without being distracted by its child elements

I am trying to create a zoom effect on the background-image with an animation but I am encountering issues where all child elements are also animated and zoomed. When hovering over the element, I want only the background part to be animated and zoomed, and ...

htmlcsstwitter-bootstrapcss-selectors

Move the DIV from the left side with a nice slide

I'm working on using a basic div (leftContainer) and want to create an effect where it slides from the left to its full width when the page loads, without requiring a button click. Below is my code snippet: <div class="leftContainer "> <div ...

jqueryhtmlslide

Execute a JavaScript function when a form is submitted

Seeking to reacquaint myself with Javascript, encountering difficulties with this fundamental issue. https://jsfiddle.net/gfitzpatrick2/aw27toyv/3/ var name = document.getElementById("name"); function validate() { alert("Your name is " +name); } < ...

javascripthtmlonsubmit

A guide to toggling the check/uncheck status of a list box by clicking on a checkbox using

I am using a div and CSS id to control the checkbox check and uncheck functionality, but I am not getting the desired outcome from my source code Step 1: By default, the checkbox is unchecked and the listbox is disabled Step 2: When the checkbox is check ...

javascripthtmljquerycssajax

The text input is malfunctioning in the IE web browser

For my project, I am incorporating AngularJS but encountering an issue with the input type text in IE browsers specifically IE 11 and IE 10. The problem arises when clicking on the input box - while the focus is triggered, the cursor does not appear insid ...

jqueryhtmlangularjsinternet-explorer

Generate a custom map by utilizing JavaScript and HTML with data sourced from a database

Looking for guidance on creating a process map similar to this one using javascript, html, or java with data from a database. Any tips or suggestions would be appreciated. Thank you in advance. ...

javascriptjavahtml

What is the best way to transfer information to a different NextJS page?

I want to implement a search input field. The idea is to allow the user to type something into the search bar and then send that input to another page where an API request will be made with the search content. Essentially, when the user types "something" ...

javascripthtmlnext.js

Automatically resize ui-select dropdown box to the left side

I've been tasked with incorporating AngularJS ui-select into my project, specifically creating a multiselect dropdown. Currently, the dropdown box automatically adjusts its width based on the length of the longest selectable text, causing it to extend ...

javascripthtmlcssangularjsui-select

Steer clear of dividing words

I am attempting to showcase sentences letter by letter with a fade in/fade out effect. However, I am facing an issue where words break in the middle. How can this word breaking be prevented? var quotes = document.getElementsByClassName('quote' ...

javascripthtmlcsseffects

Initiate a CSS animation only when a different animation has completed

I am trying to create a sequence of animations using 2 squares. I want the animation for the red square to start only after the blue square's animation is complete. How can I achieve this cycle of animations? .box { width: 100px; height: 1 ...

javascriptjqueryhtmlcss

Preventing Jquery Append from Adding Previous Elements

I am struggling to figure out how to display the star rating for each hotel individually. I have 5 hotels, each with a different star rating. Here is my Javascript code: function GetStarHotel() { var parent = $(' p.star '), imagePat ...

javascriptjqueryhtml

Animation in CSS Appears Jumpy in Chrome

For some reason, the text inside a moving div (which is transitioning using CSS) seems to jitter and shake in Chrome. However, this issue does not occur in Firefox, where the movement is very smooth and achieves the desired effect. #hidexpert { display: b ...

cssgoogle-chrome

The overflowing pop-up container

When I trigger a popup that dynamically generates a fixed background with a centered dialog, it works well. However, on smaller monitors like laptops, tablets, and phones, the content can overflow beyond the visible area due to its fixed container, making ...

jquerycss

Enable row selection in UI-Grid by clicking on a checkbox with AngularJS

I am a newcomer to angular js and I am looking to have the checkbox automatically selected when clicking on a row to edit that specific cell. I have implemented a cell template to display the checkbox in the UI-grid, but now, when I select a row, the row i ...

javascripthtmlangularjscheckbox

I wonder where the file from the HTML form download has originated

Recently, I've been experimenting with the developer tools in Chrome to observe the behavior of websites at different moments. It has proven useful in automating certain tasks that I regularly perform. Currently, my focus is on automating the process ...

javascriptpythonhtmlajaxgoogle-chrome

What is preventing BODY from respecting min-height: 100% ?

Struggling to create a basic webpage with a container that extends to the bottom? Here's what I'm aiming for: #Main should be as tall as the viewport, but able to stretch further with additional content. body should match the viewport height, y ...

htmlcssheightdocument-body

What is the best way to showcase my products in a horizontal line? I am seeking a solution using PHP and Bootstrap to exhibit all the items retrieved

I am experiencing an issue with displaying the most recent events from my database using PHP. The Bootstrap framework and CSS are causing them to appear as a single column on the page, but I would like them to be displayed in rows of three. I have attempt ...

htmlcssflexboxbootstrap-4

Exploring ways to enhance Bootstrap Navigation by adding extra link options. Seeking a resolution using jQuery

Are you looking for a solution to handle site navigation with a larger number of links? When more links are added, they display in multiple lines which might not be the desired layout. You can view an example of this issue in the attached image: See here a ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to eliminate the border in IE edge that surrounds special characters?

Here is the current appearance of the cross button in IE/Edge: And here is how it is supposed to look: Upon inspecting the CSS, it reveals that the #10006 html character has a color code of FFF: I am seeking assistance on how to remove the black border ...

htmlcssinternet-explorerspecial-characters