Making the navbar color modifications to the dropdown menu

I am currently working on applying color changes to the text in my navbar for the links that have been visited, are active, and are being hovered over. I have successfully implemented this for my regular hyperlink elements. However, I am facing an issue with the 'class' descriptor as it is already being used for my dropdown menu button (button class="dropbtn"). I am unsure of how to make the color change when the user is on a page from the dropdown menu or when it has been visited, as the button itself is not technically 'visited', only the links within it.

.dropdown:hover .dropdown-content {
  display: block;
}

.dropbtn:hover {
  color: #874c16;
  font-size: 20px;
}

.dropbtn:visited {
  color: #8b4e14;
}

.dropbtn.active {
  color: #ffe7d1;
}

.navbar a:hover {
  color: #874c16;
  font-size: 20px;
}

.navbar a:visited {
  color: #8b4e14;
}

.navbar a.active {
  color: #ffe7d1;
}
<div class="navbar">
  <a href="index.html">Home</a>
  <div class="dropdown">
    <button class="dropbtn">Cuisine 
  <i class="fa fa-caret-down"></i>
</button>
    <div class="dropdown-content">
      <a href="indian.xml">Indian</a>
      <a href="italian.xml">Italian</a>
    </div>
  </div>
  <a href="http://www.blogtyrant.com/best-about-us-pages/">About us</a>
  <a href="http://www.blogtyrant.com/best-contact-us-pages/">Contact</a>
  <a href="https://media.termsfeed.com/pdf/terms-and-conditions-template.pdf">Terms and Conditions</a>
  <a href="https://www.visser.com.au/blog/generic-privacy-policy-for-australian-websites/">Privacy Policy</a>
  <a href="datacollect.html">Customer Feedback</a>

</div>

I have been struggling with this issue for quite some time and would greatly appreciate any suggestions or help. Thank you!

Edit: Changing the button class to an anchor class did not resolve the issue as the "cuisine" anchor is never actually clicked, only the anchor elements within it.

Edit 2: To clarify my question, I am looking to change the color of "cuisine" when the user is on the page linked from any of the anchors within it. If they click on "Indian" or "Italian", I want "cuisine" to be a different color compared to when they are on the home page. Additionally, I want "cuisine" to change its default color if it has been visited in the past.

htmlcssnavbar

Answer №1

When it comes to pseudo-classes like :visited and :active, they are not applicable to button elements, but only to a elements. It would be advisable to rewrite your button code and convert it into an anchor a element.

$('.dropdown a').click(function () {
  $('.dropdown').css('background', 'red');
});
.dropdown:hover .dropdown-content {


display: block;

}
.dropbtn {
  display:block;
  height: 30px;
  line-height:30px;
  width: 100px;
  text-align: center;
  background:#ccc;
  border-radius:5px;
  border: 1px solid #bbb;
  text-decoration: none
}
.dropbtn:hover{
    color:#874c16;
    font-size:20px;

}

.dropbtn:visited{
    color:#8b4e14;
}


.dropbtn.active{
    color:#ffe7d1;
}


.navbar a:hover{
    color:#874c16;
    font-size:20px;

}
.navbar a:visited{
    color:#8b4e14;
}


.navbar a.active{
    color:#ffe7d1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
            <a href="index.html"  >Home</a>
            <div class="dropdown">
                <a class="dropbtn" href="#">Cuisine 
                  <i class="fa fa-caret-down"></i>
                </a>
                <div class="dropdown-content">
                  <a href="indian.xml">Indian</a>
                  <a href="italian.xml">Italian</a>
                </div>
            </div>
            <a href="http://www.blogtyrant.com/best-about-us-pages/">About us</a>
            <a href="http://www.blogtyrant.com/best-contact-us-pages/">Contact</a>
            <a href="https://media.termsfeed.com/pdf/terms-and-conditions-template.pdf">Terms and Conditions</a>
            <a href="https://www.visser.com.au/blog/generic-privacy-policy-for-australian-websites/">Privacy Policy</a>
            <a href="datacollect.html">Customer Feedback</a>

        </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

Guide to navigating through a webpage to locate the specified element with Selenium

Is there a way to ensure that when scrolling to an element in selenium, it appears at the very top of the browser window rather than just being visible on the page? What steps can be taken to make sure that the element being scrolled to is positioned at t ...

pythonhtmlpython-3.xseleniumselenium-chromedriver

Exploring Next.js: A beginner's attempt at displaying basic JSON data

I'm having trouble updating and displaying the content of my JSON data in my React app. Despite trying various solutions, including adjusting the return value of functions and seeking help on forums, I still cannot get rid of the issue where an empty ...

htmljsonnext.js

What is the best way to adjust the size of my <div> to accommodate additional vertical content?

Every time I attempt to include margin-top: 30px to my box_1 and box_2 <div>, the bottom <div> is pushed down and disappears. It seems like my wrapper isn't expanding to accommodate the content. How can I achieve a 30px space between the ...

htmlcss

Issue: Incorrectly calling a hook. Hooks can only be used within the body of a function component. Assistance needed to resolve this issue

import React, { useState } from "react"; const RegistrationForm = () => { const [name, setName] = useState(""); const [password, setPassword] = useState(""); const [email, setEmail] = useState(" ...

javascripthtmljqueryjsonreactjs

Retrieving specific values for each key in JSON using PHP

Looking for a solution with PHP to extract specific information from JSON files based on set criteria. Here is an example of part of the JSON data: "Main": [{ "count": 7, "coordinates": [89,77], "description": "Office", },{ "count": 8, ...

phphtmljson

What is the best way to align these Iframes in the center?

This is the html <div class="main_content"> <section class="episodio"> <article class="contenedor_episodios"> <h2>Episodios</h2> <div class="episodio_spotify" ...

htmlcss

Chart: Observing the Discrepancy in the Initial X-Axis Points

I'm working on incorporating multiple charts onto one page, with each chart centered and stacked one after the other. I've set a fixed width for the graph canvas. The challenge arises from the varying ranges of tick values - one chart may have a ...

javascriptcssflot

Adjusting font size according to the font style selected

Can conditional font size be determined based on font family using CSS or jQuery? ...

jqueryhtmlcssconditional-statementsfont-size

Concealing the side navigation menu with HTML and CSS

Hey there, I'm trying to make my navbar automatically hide when the mouse is moved. I found an example that I want to use here. Despite reading some online documentation, I just can't seem to figure out how to do it. Here's a snippet of my c ...

htmlcssweb-applicationscss-transitions

Difficulty encountered in getting html email signature to appear correctly on Outlook

I have developed a personalized email signature using HTML. Here's the unique code: <html> <!-- Insert your company logo here --> <div id="far_left" style="width: 50px; height: 50px; float: left; ...

htmlcssoutlook-2010email-clientsignatures

External Submit button malfunctioning when attempting to submit two distinct forms

I'm currently working on a program to add items to the cart, and I need to include product attributes like colors and sizes in the process. However, I seem to be encountering an issue where only one form is submitted when using jQuery's submit(), ...

javascriptphpjqueryhtmlforms

setTimeout executes twice, even if it is cleared beforehand

I have a collection of images stored in the img/ directory named 1-13.jpg. My goal is to iterate through these images using a loop. The #next_container element is designed to pause the loop if it has already started, change the src attribute to the next im ...

javascripthtmlsettimeout

Cube area to be filled

I am struggling to fill a cube with colors as it is only getting half of the figure filled. I suspect there might be an issue with the cubeIndices, but I'm having trouble figuring out how to make it fill everything. While I know I could use a cylinder ...

javascriptcssthree.js

I am looking to have two elements positioned next to each other in equal dimensions, such as the reCaptcha feature

Could someone assist me in positioning these elements side by side, each taking up 50% of the screen? I'm unsure if this can be achieved while using the reCaptcha iFrame. <div class="g-recaptcha" data-sitekey="sitekey" style="transform:scale(0.5); ...

htmlcss

The functionality of Google Maps code is limited on Android devices because the map feature is not available

After updating the Google Maps embed code to be responsive for mobile devices, I discovered that the map still won't display on Android or iPhone. The following is the modified code. Can anyone assist me in resolving this issue so that the map can sho ...

androidhtmlcssgoogle-mapsiframe

Introducing the new and improved SweetAlert 2.0, the ultimate solution for

I am currently utilizing SweetAlert2.0, known as "This One" <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script> It is functioning properly; however, I would like to display a table, div, or HTML element within this swe ...

javascriptjqueryhtmlcss

Turn off the perpetual active mode

I have a situation where a link maintains its active state after being dragged and released. This is causing an issue that I need to address. For example, you can see the problem here: http://jsfiddle.net/Ek43k/3/ <a href="javascript:void(0);" id="foo ...

javascriptcss

Position the menu directly below the MaterialUI appbar

Here is a method for positioning a Menu (popover) below its parent item using the anchorEl. However, I am curious if there is an easier way to adjust the menu placement to be directly under the appbar while still aligning horizontally with the parent butto ...

jquerycssreactjsmaterial-ui

Internet Explorer 11 fails to interpret the attribute attr.xlink:href

I am a beginner in Angular 2 and I'm working on creating an icon component. The code I have below works perfectly in Chrome and Firefox, but unfortunately, it's not functioning in Internet Explorer 11. Here is what my component looks like: @Com ...

csshtmlsvgangular

What is the best way to use shortcodes to display custom fields for post objects, specifically products, within WordPress posts

I'm in the process of displaying 'featured products' within my blog posts. These specific products need to be chosen using custom post objects on the backend for each individual post. I've outlined what I believe the PHP code should lo ...

phphtmlwordpresscustom-fields