Tips for adjusting the navigation values on a secondary page without impacting the navigation on the homepage

I'm new to working with HTML and CSS, and I'm struggling to adjust the padding and margin of my navigation bar on a second page without it impacting the main index page.

Note: I want to give the nav bar a slightly different style on the second page.

There are 2 navigation bars, .navbar and .navbar2, each with the same code.

<div class="navbar">
    <nav class="large clearfix">
      <ul>
        <li>
          <a href="index.html">Home</a>
        </li>
        <li>
          <a href="famous.html">Famous People</a>
        </li>
        <li>
          <a href="places.html">Places to Visit</a>
        </li>
        <li>
          <a href="contactus.html">Contact Us</a>
        </li>
      </ul>
      <div class="veggieburger"><a href="#nav">&equiv;</a></div>
    </nav>
</div>

How can I target and style the navbar2 UL LI properties in the CSS so that they're different from the ones on the index page?

I've attempted this unsuccessfully in the CSS:

.navbar2  > li {
  margin-top: 50px;
}
htmlcss

Answer №1

When it comes to managing different classes (.) and IDs (#), we utilize these selectors within the brackets provided.

For instance, if you need to style navbar and navbar2 separately, you can easily achieve this by using the "." selector. Simply add a "." in front of the class and apply the desired properties.

To illustrate, let's assume the HTML is already set up, the corresponding CSS would look like:

.navbar
{
width: 100%;
height: 30vw;
color: red; /*this will change the text color to red*/
}

.navbar2
{
width: 100%;
height: 30vw;
color: green; /*and this will change the text color to green*/
}

I hope that explanation was clear and beneficial!

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

Tips for horizontally centering div elements with container and row class in Bootstrap 5

I am having trouble aligning the section properly in the center, and the div does not have a container class. Is there a bootstrap class that can help with alignment, or do I need to create CSS code to align the items in the div tag? <link href="ht ...

htmlbootstrap-5

Navigate to the specified location using AJAX

When I update a comment using AJAX, I want to automatically scroll down to the updated comment: $("#aggiorna").click(function(){ var value = $("#id").val(); var dato = $("#comment_edit").val(); var dato1 = $("#user_id").val(); var dato2 = ...

javascriptjqueryhtmlajax

Problems with aligning elements to both the left and right sides of the same line

Currently, I have two divs that I would like to float on the left and right sides. However, they seem to be sticking together and I can't seem to separate them.. HTML: <nav> <div id="nav_content"> <div id="home_ico ...

htmlcss

The div containing the background image does not resize properly when using media queries

page in question. I am currently working on a chess board project where each cell is represented by a div element. My goal is to make the board expand beyond certain minimum widths using media queries, but for some reason, this functionality is not working ...

htmlcssangularjsmedia-queries

Using AngularJS to trigger a factory function from an HTML element with the ng-click directive

Need help with calling a function called myfunc, which is defined in Factory, from an HTML file: <button type="button" class="btn btn-default btn-sm" ng-click="myfunc(search_name)">Search</button> Here is the code for the controller and facto ...

javascripthtmlangularjs

Diverse Browser Outcomes with jQuery CSS

Currently, I am in the process of developing an app that utilizes percentages as offset positions for ease of calculation. For a visual example, you can visit this link: http://jsfiddle.net/WeC9q/1/embedded/result/ Although the zooming feature functions ...

javascriptjqueryhtmlcss

Discover how to determine the direction of a div element when utilizing the dir="auto" attribute in HTML5 with JavaScript

I'm experiencing an issue with a div that has the dir attribute set to auto. My goal is to retrieve the rendered direction using javascript After attempting div.dir, I only receive the 'auto' value. Is there a method available to detect if ...

javascripthtml

information not visible on the webpage

Recently, I made an alarming discovery on my website. I have implemented two different types of menus - one for the front page (designated as .navbar-inverse) and another for all other pages (.navbar-default). The front page menu is static while the other ...

jqueryhtmlcsswordpresstwitter-bootstrap

Increase the size of clickable hyperlinks in CSS

I am looking to increase the clickable area of my menu links. Currently, only a small part of the links is clickable and I want to know how to expand it. I have seen some CSS tricks using classes, but I also have an active class for these links. Can you ...

jqueryhtmlcsshref

Bootstrap 4 - positioning link element to align with heading in card header

I'm currently utilizing Bootstrap 4+ to design a card that features a collapsible card-body, triggered by a link located in the card-header. <div class="card text-left mb-3 mt-3"> <div class="card-header p-3"> <h4>Where should ...

htmlcsstwitter-bootstrapbootstrap-4

Using a form tag within a table in HTML5

Can someone help me figure out how to integrate a form with the "Get" method into a table? The table includes a text field, and upon submitting the form, it should initiate validation. The validation process currently works correctly, however, when submi ...

javascripthtmlforms

Pass information submitted through a JavaScript prompt to an expressjs endpoint

I'm currently facing a challenge in extracting the value from my prompt in order to modify a category using a JavaScript function. Typically, I would rely on a form to pass variables to the request.body, but that's not an option here. This is wh ...

javascripthtmlnode.jsexpress

Identify the row containing a value of null using jQuery (functionality not performing as anticipated)

Whenever the user clicks on the GetData button, I retrieve JSON data and display it in an HTML table similar to the demo below. Demo: https://plnkr.co/edit/I4XYY6CZohf7IS6wP8dR?p=preview There are instances where the value can be null, such as the loanNu ...

javascriptjqueryhtml

I am experiencing an issue on my webpage where clicking on the login button does not seem

My website code includes: <form method="POST" action="{% url 'lawyerdash' %}"> {% csrf_token %} Username<input type="text" name="username"><br> Password<input type="password" name="password" ><br> & ...

htmldjango

Mastering the art of building a datepicker: A comprehensive guide

Looking for advice on how to create a datepicker in HTML without relying on bootstrap or pre-built JavaScript and CSS. I am interested in learning the process from the ground up and understanding how developers have designed these tools. I am specifically ...

javascriptjqueryhtmlcssdatepicker

How to create a resizable dialog box with dynamic height using

I need assistance with dynamically adjusting the height of a jQuery UI Dialog based on its contents. Below is my current code snippet: $( "#dialog-modal_"+productID ).html( "<iframe src='index.php?act=showProduct&amp;id="+productID+"' wi ...

javascriptjqueryhtmljquery-dialog

Why doesn't the element I'm clicking return as expected?

Below is the code provided <!DOCTYPE html> <html> <body> <p id="demo">Demo Element</p> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script> $('#demo' ...

javascriptjqueryhtml

"Uncovering an issue with locating the 'div' variable in a

I'm facing an issue with the following code snippet: <script> function loadData() { var items = [<?php echo $jsItemArray ?>]; for (i = 0; i < items.length; i++) { var itemId = "\"#item-" +items[i]+ "\""; ...

jqueryhtmlajax

In HTML, adjust column widths for multiple tables according to the widest column present in any of them

With Python, I am creating an HTML page that contains multiple tables with the same number of columns, all holding the same type of data. While the generated page is functional, I would like to improve readability by ensuring that all tables have the same ...

javascripthtmlcssdynamichtml-table

Writing in Arabic within an HTML header is not allowed

I have downloaded a CSS template and am currently in the process of translating it to Arabic with the use of UTF-8 encoding: <meta http-equiv="content-type" content="text/html; charset=utf-8" /> Everything appears fine when I write in Arabic outsid ...

jqueryhtmlcss