I am interested in updating the color of the active item on the navbar

I am looking to modify the color of the active page,

Here is the HTML code snippet:

<html>
    <head>
        <title>John Doe - Portfolio</title>
        <link rel="stylesheet" href="custom-style.css">
        <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" / media="screen" type="text/css" title="Design" href="design.css">
    </head>
    <script>
        $(function() {
            $('#mainnav li a').click(function() {
            $('#mainnav li').removeClass();
            $($(this).attr('href')).addClass('active');
            });
        });
    </script>
    <body>
        <div id="nav-bar" class="nav-bar">
            <img src="Img/example.png"></img>
            <ul class="mainnav" id="mainnav">
                <li><a href="portfolio.php">PORTFOLIO</a></li>
                <li><a href="about_me.php">ABOUT ME</a></li>
                <li><a href="contact.php">CONTACT</a></li>
            </ul>
        </div>
    </body>
</html>

CSS Code:

#nav-bar { 
height:100%; 
width: 20%;
color: #070707; 
background-color: #efefef;
font-size: 14px;
box-shadow: -6px 0px 10px rgba(0, 0, 0, 0.5);
}
#nav-bar img {
margin-left: 10%;
margin-bottom: 10px;
margin-top: 20px; 
vertical-align: middle;
}
#nav-bar a {
text-decoration: none;
color: #070707;
}
#nav-bar a:active {
color: red;
}
#mainnav > .active > a {
color: red;
}
#nav-bar ul.mainnav {
list-style-type: none;
margin: 0;
margin-bottom: 100px;
padding: 0;
}
#nav-bar ul.mainnav li {
padding-top: 10px;
margin-left: 20px;
margin-right: 20px;
padding-bottom: 10px;
padding-left: 10px;
border-bottom: 1px dashed #070707;
}

For instance, I want the background color of the active navigation item to be #4B77BE ... any suggestions? Maybe a JavaScript trick or just CSS?

Thank you!

Answer №1

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: white;
lenght: 500;
}

li {
    float: left;
}

li a {
    display: block;
    color: #000005;
    padding: 14px 16px;
    text-decoration: none;
}

a:hover; a:active; {
    background-color: #00015b;
}

.active {
background-color:#00015b;
}
li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.show {display:block;}

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

problem with custom scroll bars on Chrome and Internet Explorer

Below is the URL for the designated folder The vertical scroll bar is functioning properly across all browsers on my personal computer, however, it appears to be malfunctioning on Chrome and IE of a select few other devices. I conducted a test on a machi ...

Transform the JavaScript object received from an AJAX request into HTML code

Here is an example of what the result (data) looks like: <tr> <td> Something... </td> </tr> <div id="paging">1, 2, 3... </div> This is using ajax to retrieve data. ... dataType: "html", success: function( ...

Utilize CSS to specifically target the image source within a button and swap it with a different image in the Woocommerce Wishlist Plugin on your Wordpress

I have integrated the Woocommerce Wishlist plugin into my Wordpress website and I am looking to customize the appearance of the 'Add to Wishlist' button. Upon inspecting the source code, I noticed that the button is styled with a GIF image. I wou ...

If the condition is based on the category in category.php and single.php

I am attempting to create a conditional statement that will display specific content only if the user is in a particular category or on a single.php page associated with that category. I have experimented with these codes, but unfortunately, neither of the ...

Avoid prolonging lines in React Styled Components

I am encountering an issue with the lines between the OR. I need to ensure that they do not extend beyond their specified boundaries. To view the code on codesandbox, please visit HERE EXPECTED OUTPUT CODE const OR = styled.div` display: flex; flex- ...

Maintain the style of the main navigation menu when hovering over the sub-navigation items

I am currently in the process of redesigning the navigation bar for a specific website. The site utilizes Bootstrap, with a main navbar and a secondary navbar-subnav. While I have been able to style both navs accordingly, I am encountering difficulties whe ...

perform an action in PHP when a button is clicked

I'm currently developing a PHP admin panel that displays a list of users in an HTML table format. Each row in the table includes a button that allows the admin to send a notification to the selected user. Below is the code I used to create and displa ...

Using jQuery to control mouseenter and mouseleave events to block child elements and magnify images

My objective is to create a hover effect for images within specific div elements. The images should enlarge when the user hovers their mouse over the respective div element. I plan to achieve this by adding a child element inside each div element. When the ...

ClickEvent (or element selector) is experiencing functionality issues

I'm currently working on creating a small calculator using HTML, CSS, and JS. However, I'm facing an issue with selecting buttons of the calculator from the HTML script and adding EventListeners to them. Here is a snippet of my HTML code: `< ...

The dimensions of a Tumblr video

Hi there! I have a question regarding my tumblr theme. The space allocated for video posts on the home page is perfect, but when I click on the permalink, it becomes too small. I don't want to change the size of the video on the home page, so is there ...

Maintain the border styling of a radio button when it is in the selected state

Having an issue with the radio type options - when selected, a blue border appears but disappears if clicking elsewhere. Need the blue border effect to stay even when clicked outside, unless switching to the other option. Looking to align the price in th ...

Personalizing the Navigation Bar

I am in the process of designing the navigation bar for my website that will work seamlessly on both desktop and mobile devices. To view my progress so far, check out this JS Fiddle link Here is the HTML code I have created: <div class="container-flu ...

Is it considered acceptable to include paragraph elements within a heading tag in HTML5 (such as putting a <P> inside a <H1

Are paragraph elements allowed inside header tags in HTML5? Put simply, is this markup acceptable in HTML5? What are the implications of using it? <h1> <p class="major">Major part</p> <p class="minor"& ...

The fixed navigation bar shows a flickering effect while scrolling at a slow pace

Currently facing a challenge with our sticky navigation. Noticing a flickering issue on the second navigation (sticky nav) when users scroll down slowly. The problem seems to be specific to Chrome and Edge, as it doesn't occur on Firefox, IE11, and S ...

what distinguishes CSS properties for Id versus class selectors

Currently in the process of creating my inaugural website, which consists of just four pages. Each page follows the standard layout structure with a header, navigation bar, content division (div id="content"), and footer. As I delve into adding CSS proper ...

JQuery Scroll Spy Implementation

I have structured the page with a header at the top and 3 columns below. The left column contains a menu, the middle column is a text container, and the right column is another section. As the page scrolls up, the menu becomes fixed in position which func ...

Creating a script to open multiple URLs in HTML and JavaScript

Currently, I am working on creating a multiple URL opener using HTML and JavaScript. However, I have encountered an issue where HTTP links are opening fine but HTTPS links are not. Can someone provide assistance with this problem? Below is the code snippet ...

Adjusting the height property to zero in the absence of an element

I'm currently working on creating a timeline for changeLogs and populating it with data from an AngularJS controller. The issue I'm facing is that the height of the timeline "Line" is set to 6px. This means that even when there is no data in the ...

retrieve the image name of the background using jQuery

How can I use jQuery to extract only the background image name from a div with a background image? I currently get 'http://localhost/xampp/uconnect/images/tour-networks-ss.png' but I only want 'tour-networks-ss.png' Any assistance wi ...

Is there a sophisticated CSS compressor that can eliminate unnecessary code and separate identical rules with commas?

Consider this input{margin:0}body{margin:0;background:white} can also be written as input,body{margin:0}body{background:white} or like this input,body{margin:0}body{margin:0;padding:0} and simplified to input,body{margin:0}body{padding:0} Bottom Li ...