Having difficulty customizing the color of bullet points within a list

I've been attempting to update the color of the list points without success. Can you help me troubleshoot?

<div class="mobile-menu" id="mobile-menu">
        <div id="mobile-menu-links">
            <h4>General:</h4>
            <ul class="mobile-menu-links">
                <li><a href="">News</a></li>
                <li><a href="">The boring rules!</a></li>
                <li><a href="">The rankings</a></li>
            </ul>

.mobile-menu #mobile-menu-links ul{
                list-style-type: none;
                margin:0;
                padding-left:3%;
            }

            .mobile-menu #mobile-menu-links ul li{
                padding-bottom:2px;
                border-bottom:1px solid #bababa;
            }

Despite adding color:red to either of the CSS declarations, the change in color is not taking effect.

Please be aware that the HTML code is complete in my document; I only included a portion for reference purposes.

Thank you.

htmlcss

Answer №1

There are several methods to achieve this...

  1. The concept of coloring the bullet points

    ul { list-style: none; }

li:before { content:"\2022 \00A0"; color: red; }

    Example Link

  2. Another Resource

After reviewing feedback, I have confirmed the color modification here

Answer №2

Can you please include the additional CSS styles below?

a:link {color:#FF0000;} 
a:visited {color:#00FF00;}
a:hover {color:#FF00FF;}  
a:active {color:#0000FF;}

Check out this JSFiddle link for reference.

Answer №3

Give this a shot: http://jsfiddle.net/Dnxmm/. Make sure [ul] comes first.

ul.mobile-menu-links{
            margin:0;
            padding-left:3%;
            color:red;
        }

 ul.mobile-menu-links li{
            padding-bottom:2px;
            border-bottom:1px solid #bababa;
            color:red;
        }

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

Contact on the go with our handy mobile contact form

Having some difficulties with the contact form on my website. The link to the form is: here. I am currently working on making the form mobile-friendly (the rest of the site scales down using @mobile screen tags in the CSS). The form is stacked, so there ...

htmlcssforms

HTML and CSS: Aligning Text on the Left and Image on the Right - A Guide to Positioning Elements

Just starting out with HTML and CSS, I've run into some issues while writing my code. My goal is to have Text (on the left middle part) and image (on the right middle part) displayed side by side A responsive design that stacks the text on top of t ...

htmlcssresponsive

Navigate through the items in my subnavbar by scrolling the content

HTML Code <div id="subnavigation"> <?php $verbindung = mysql_connect("host", "user" , "pw") or die("Verbindung zur Datenbank konnte nicht hergestellt werden"); mysql_select_db("db") or die ("Datenbank konnte nicht ausgewählt w ...

phpjqueryhtmlcss

Empty screen appears when "npm run serve" command is executed following the build process

I am currently utilizing Material-ui. Following the project build with npm run build, I encounter a blank page when running npm run serve. I attempted to set homepage: "./" in the package.json as suggested here, however, it still displays a blank ...

javascriptcssreactjsmaterial-ui

How can I change the text of a single button by clicking on it without affecting the other buttons that share the same

Currently, I am implementing a posting system where posts can be added using a button. The posts have two additional buttons - one to show/hide content and the other to delete content. I am utilizing jQuery's slideToggle event to toggle the visibility ...

javascriptjqueryhtmlcssbootstrap-4

I am facing difficulties with invoking the popOpen() function within my parameters in JS, HTML, and CSS

I'm currently facing an issue with my code. I am attempting to invoke my openPop() function with the input parameter 'pop' within some of my sensor code, but no pop-up is appearing even though I believe I am calling the popup correctly. If a ...

javascripthtmlcss

activating the submit button depending on the user input

My goal is to create a form with a textarea and a submit button that can be enabled or disabled based on whether there is any input in the textarea. I have confirmed that both the submit button and content are being selected correctly (I'll provide a ...

javascripthtmldjango

Replacing a predefined label in Volusion (for language translations)

I am currently working on a project using the Volusion platform, which unfortunately does not provide full interface editing capabilities. As a result, I am attempting to edit certain hardcoded labels in the HTML to display them in Spanish. After trying v ...

htmlcssvolusion

Utilizing Wordpress for Effective Internal Linking

Looking to set up a Table of Content on a custom Wordpress template, I decided to hardcode the headings for internal sections in advance. However, I'm facing an issue where it doesn't scroll to the intended section in Wordpress. Take a look at th ...

phpjquerywordpresshtml

Guide on validating a dropdown using template-driven forms in Angular 7

Having trouble validating a dropdown select box, possibly due to a CSS issue. Any suggestions on how to fix this validation problem? Check out the demo here: https://stackblitz.com/edit/angular-7-template-driven-form-validation-qxecdm?file=app%2Fapp.compo ...

csstypescriptvalidationangular8

I'm looking for a library or plugin that can be used to develop a customizable sidebar window with docking, resizing, and pinning capabilities similar to the ones found

In Visual Studio, the solution explorer and toolbox windows can be hidden at the side unless pinned. They are also resizable. Is there a way to achieve this same behavior using CSS? Has anyone created a jQuery plugin or similar tool for this? ...

jquerycssjquery-ui

Unable to add to content that is generated dynamically

Upon loading the page, I noticed that the #navbarUsername field remains empty while all other scripts below it run correctly. Despite attempting to use $(document).on('ready', '#navbarUsername', function () {..., this did not resolve th ...

jqueryhtml

Library of CSS styling information

Has anyone come across a reliable javascript library that can retrieve the original style (not computed) of a specific element in the DOM? Essentially, I am looking for something that can provide results similar to what is displayed in Firebug's style ...

javascriptcss

Use jQuery to swap out two div classes within a table cell (TD) if they are

Although I'm making progress, I must confess that jQuery and CSS are not my strong suits. The objective: To create a dynamic div within a table data cell for a calendar feature. The content of the div varies based on the date range input. A filled d ...

javascriptjqueryhtmlcss

"Engaging with the touchscreen inhibits the triggering of click

Within this div, I have implemented touch-action:pan-y;. Surrounding this div is an anchor tag. If you click on the div, the link will successfully redirect. However, if you swipe on the div and then click, the link won't work on the first attempt bu ...

javascriptcss

Error: The EJS compiler encountered a SyntaxError due to an unexpected token || in the show component file located at /var/www/html

I'm currently working on a project inspired by Colt Steele's YelpCamp creation during his Udemy Web Dev Bootcamp. Everything was going smoothly until I tried to refactor some code towards the end of the course using YouTube tutorials. Now, whenev ...

javascripthtmlnode.jsexpress

The Impreza theme is experiencing difficulty displaying Font Awesome icons

Recently, I had a client who needed a WordPress website. After working on the project on my own server, I finally completed it and transferred the entire site to the client's main domain at gulugalmarketing.com. Everything was functioning perfectly o ...

htmlcsswordpressfont-awesome

What is the best way to arrange two buttons in a row with a border separating each row?

I am currently working with angular 8 and I am in need of creating a webpage design using HTML, CSS, or Bootstrap. The issue I am encountering is how to align every two buttons next to each other with borders, and once the first row is completed, move to ...

htmlcssbootstrap-4angular8text-align

Fixed css footer with full height content container

For my website's sticky footer, I followed this technique: I wanted to add a border around the entire site that also encompasses the footer, but ran into an issue where it did not extend around the page properly. Here is what happened: You'll n ...

csssticky-footer

Implement a grid layout for columns within the profile section

Each user on my website has a profile tab that displays their submitted posts. To showcase these posts, I utilize the following code: <?php while ($ultimatemember->shortcodes->loop->have_posts()) { $ultimatemember->shortcodes->loop-> ...

phphtmlcss