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

Developing an interactive contact page using bootstrap technology

I am looking for a way to structure my contact page using Bootstrap. https://i.sstatic.net/e3TCu.png If you're interested, the code for this layout can be accessed here: https://codepen.io/MatteCrystal/pen/xxXpLmK <div class="container" ...

cssdynamicbootstrap-5

Is there a way to upload numerous images from my local disk onto a canvas using Fabric.js?

I'm currently working on an innovative Image Collage application using the power of HTML5 canvas and Fabric.js. One of the key features I want to implement is the ability for users to simply drag and drop files into the designated 'File Drag and ...

javascripthtmlhtml5-canvasfabricjs

Implementing a tooltip popup inside the header cell of the ordering table

Apologies in advance for my lack of experience with coding more complex website features. I'm attempting to incorporate a tooltip popup into one of the header cells to provide additional information to users. While I have all the necessary component ...

htmlcss

What is the preferred approach in JavaScript: having a single large file or multiple smaller files?

Having a multitude of JavaScript files loaded on a single page can result in decreased performance. My inquiry is this: Is it preferable to have individual files or combine them into one JavaScript file? If consolidating all scripts into one file is the ...

javascripthtmlperformance

Column-oriented and Slim-fit packaging

I have been working on designing a layout with a fixed height that will display multiple columns of specified size to accommodate flowing text. While I have successfully implemented this, I am facing an issue where the enclosing div does not adjust its siz ...

htmlcss

Enhancing a popup with animated effects

I have been working on a popup that I want to add a subtle animation to. A fade effect seems like the perfect solution. Here is the code for the button: <a href="javascript:void(0)" onclick="document.getElementById('back_overlay').style.disp ...

javascriptjqueryhtmlcss

Utilizing JQuery's $(document).ready() function following a window.location change

I'm having trouble getting a JavaScript function to run after being redirected to a specific page like "example.com" when the DOM is ready for it to work with. Unfortunately, it seems that $(document).ready() is running before "example.com" finishes l ...

javascriptjqueryhtml

Adjust the hue of the SVG sprite

I am currently using an SVG sprite as the background image for my project: .naar-logo { background: url(images/salt_sprite.svg) no-repeat -8px -78px; width: 36px; height: 49px; position: relative; top: 38px; } <div class="naar-logo ...

htmlcsssvg

The mysterious case of the vanishing close button on Curator.io's mobile

Currently, I am using curator.io aggregator to showcase my Instagram feed on the website. An issue arises when switching to mobile view as the close button (class="crt-close") disappears. You can see an example of this here: To replicate the pr ...

javascripthtmlcss

Angular - when removing items from ngRepeat, the remaining elements do not transition smoothly; instead, they abruptly snap or jump into position

Currently using AngularJS v1.4.8 with ngAnimate injected into my controller. In the process of creating a dynamic list using ngRepeat, tied to an array. The addition and updating of items in the list function smoothly with animations working as intended. ...

cssangularjsanimationangularjs-ng-repeatng-animate

bootstrap used for creating horizontal radio buttons

I'm attempting to horizontally align radio buttons within a form without relying on the Bootstrap library. The following code achieves this: <form id="test_form"> <div class="control-group"> <label for="Q1">First question</ ...

javascripthtmltwitter-bootstrap

Having trouble with React image rendering using webpack?

Struggling to display an image in my React Web App, I encountered a broken image despite the correct file path appearing in the console log. We're utilizing url-loader and file-loader with webpack, importing the file path directly as necessary. Attemp ...

htmlreactjsimagewebpackwebpack-dev-server

What is the best way to open a browser window at a quarter of its default size?

Is there a way to open a window at 25% of its default device browser window size? I attempted the code below, which worked. However, it only accepts pixel inputs and not relative % values. This makes it non-scalable across various devices. window.resizeT ...

javascripthtmlcss

Scrollbar becomes inactive following the loading of AJAX content

Having an issue with loading a div using Ajax. The div loads, however the scrollbar within it stops working afterwards. In Main.html, I load content from other HTML files like so: <div id="content1" > </div> The content is loaded as follows: ...

javascriptjqueryhtmlajaxjquery-load

Gather information using HTMLParser

<tr> <td style="color: #0000FF;text-align: center"><p>Sam<br/>John<br/></p></td> </tr> Utilizing the python's HTMLParser module, I am attempting to retrieve the entries Sam and John from the provided ...

pythonhtmlhtml-parsinghtml-parser

The custom HTML menu implementation is causing the jQuery autocomplete to lose its "Select" functionality

Seeking assistance in implementing jQuery autocomplete with a custom drop down menu. I have managed to customize menu items using the data()._renderItem method (which is currently commented out), however, this approach disables the menu "Select" function ...

jqueryhtmlmenuautocomplete

Concealing my menu with overflow-x: hidden on the body is not an option

Despite setting overflow-x: hidden on the body element, I'm still experiencing horizontal scrolling and can't seem to find a solution. I've searched online for solutions without success. That's why I'm reaching out here in hopes o ...

javascripthtmlcss

CSS: A guide to correctly setting an image URL for a checked checkbox

In my current situation, I have a list of checkboxes with corresponding images. When a checkbox is checked, I would like to add a black circle behind the image. Here is an example of the current output: This is what I expect the output to look like: Her ...

htmlcssreactjscheckbox

Creating lasting placeholder text with gaps between each word

Looking to create a unique text input with static content on the right and editable text on the left https://i.stack.imgur.com/K0YfM.png Any suggestions? ...

htmlcss

The mobile screen size shortcuts are malfunctioning, while the regular links are functioning properly

ISSUE: Links in alias buttons are not working on mobile screen size, while normal links to other webpages like social media work fine. Description I created a project using an HTML, CSS, JS building tool from The project was exported and placed into a ...

javascriptpythonhtmlcssdjango