What is the method for customizing the NavBar color using CSS?

Hi there! I recently came across a responsive multi-level menu that caught my eye. After copying the CSS and JavaScript exactly, I ended up with this NavBar. The issue I'm facing is changing the default color (which is green) to another color. Here's a snippet of the CSS file:

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600);

@font-face {
    font-family: 'icomoon';
    src: url('../fonts/icomoon.eot');
    /* more font styles go here */
}

/* various styles for the navigation menu */

I've attempted to tweak the colors in the CSS file or add a background-color property, but the default green hue remains unchanged. It appears that the JavaScript code only handles mobile functionality and doesn't affect the colors. Can anyone offer some guidance on how to customize the colors? As a newbie in web development, any help would be greatly appreciated. Here's a snippet of my HTML code:

<!DOCTYPE html>
<html>
<head>
<title></title>

<!-- Include scripts and styles -->
<!-- Your script includes here -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
<script type="text/javascript" src="js/responsivemultimenu.js"></script>

<!-- Your style includes here -->
<link rel="stylesheet" href="css/responsivemultimenu.css" type="text/css"/>

<!-- Meta tag for viewport settings -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
</head>
<body >

<!-- Your navigation menu structure here -->

Answer №1

Locate

  /* pointing downwards for large displays */
  .rmm.style {text-align: left; font-family: Tahoma;}
  .rmm.style ul {box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15); 
   background:#990; 

Substitute #990 with your preferred color choice. Have fun experimenting.

Answer №2

Here's the solution that will work for you. Look for the background color "RED" in the code snippet below, and feel free to change it to any color of your choice.

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600); @font-face { font-family: 'icomoon'; src:url('../fonts/icomoon.eot'); src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'), url('../fonts/icomoon.woff') format('woff'), url('../fonts/icomoon.ttf') format('truetype'), url('../fonts/icomoon.svg#icomoon') format('svg'); font-weight: normal; font-style: normal; } /* minimal styles for that navi */ .rmm {margin: 0 auto;} .rmm ul {margin: 0; padding:0; list-style: none; position: relative; background: #000;} .rmm ul:after {content: ""; clear: both; display: block;} .rmm ul li {float: left;} .rmm ul li:hover {background: #202020;} .rmm ul li:hover > ul {display: block;} .rmm ul li:hover a{color: #fff;} .rmm ul li a {color: #fff; display: block; text-decoration: none;} .rmm ul ul {display: none; margin:0; padding: 0; position: absolute; top: 100%;} .rmm ul ul li {float: none; position: relative;} .rmm ul ul li a{color: #fff;} .rmm ul ul li a:hover {background: #202020;} .rmm ul ul ul {position: absolute; left: 100%; top:0; width: 100%;} /* mobile menu header button */ .rmm-toggled {width: 100%; background-color: #555555; min-height: 50px; margin: 0 auto; display: none;} .rmm-closed ~ .rmm-mobile {display: none!important;} .rmm-toggled-controls{width: 100%;} .rmm-toggled-title{width: 60%; float: left; font-size: 27px; color: #fff; font-weight:600; display: block; padding: 8px 0; text-decoration: none; text-transform: uppercase; text-align: left; padding-left: 35px;} .rmm-toggled-button{width: 20%; float: left; margin-top: 3px; display:block; width: 32px; padding:0 !important; margin:10px 10px 0 0; border:1px solid #fff; border-radius:3px; float: right; } .rmm-toggled-button span{float: left; display:block; margin: 3px 6px; height: 3px; background:white; width:20px;} /* normalny back button visible only on mobiles */ .rmm .rmm-back{display: none; font-size: 12px;} .rmm .rmm-back:after {display: none;} .rmm .rmm-back a:after { font-family: 'icomoon'; speak: none; -webkit-font-smoothing: antialiased; content: "\e000"; position: relative; display: inline-block; -webkit-transform: rotate(-60deg); transform: rotate(-60deg); top: 1px; right: -2px ; float: left; font-size: 10px; } .rmm-mobile .rmm-back{display: block;} /* mobile menu list */ .rmm-mobile{width: 100%;} .rmm-mobile .rmm-dropdown:hover ~ ul, .rmm-mobile .rmm-dropdown:hover > ul ,.rmm-mobile .rmm-dropdown:hover + ul {display: none!important;} .rmm-mobile ul{width: 100%; position: inherit!important;} .rmm-mobile li{width: 100%; } /* mobile menu js action */ .rmm-dropdown{display: block!important;} .rmm-mobile .rmm-subview{display: block!important; width: 100%;} .rmm-mobile .rmm-subover-hidden{display: none!important;} .rmm-mobile .rmm-subover-visible{display: block;} .rmm-mobile .rmm-subover-header{display: none!important; padding: 0; margin:0;} /* mobile menu content */ .rmm-mobile .rmm-submenu{position: relative; left: 0px;} .rmm .rmm-mobile li:hover > ul {display: none;} /* arrow down for wide screen */ .rmm.style {text-align: left; font-family: Tahoma;} .rmm.style ul {box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15); background:GREEN; text-transform: uppercase; display: inline-table; text-align:left;} .rmm.style ul li {text-align:left;} .rmm.style ul li:hover {background: #4b545f;} .rmm.style ul ul {display: none; margin:0; background: #5f6975; border- radius: 0px; padding: 0; position: absolute;} .rmm.style ul li a {color: #fff; font-weight:600; display: block; padding: 15px 35px; text-decoration: none; font-weight:600; } .rmm.style ul ul li {border-bottom: 1px solid #575F6A; border-top: 1px solid #6B727C;} .rmm.style ul ul li a {padding: 12px 35px; color: #fff; } .rmm.style ul ul li a:hover {background: #4b545f;} /* arrow down for wide screen */ .rmm.style ul li > a:not(:only-child):after { font-family: 'icomoon'; speak: none; -webkit-font-smoothing: antialiased; content: "\e000"; position: relative; display: inline-block; -webkit-transform: rotate(210deg); transform: rotate(210deg); top: -4px; left: 1px; font-size: 10px; } /* arrow left for wide screen submenus */ .rmm.style ul ul li > a:not(:only-child):after {-webkit-transform: rotate(120deg)!important; transform: rotate(120deg)!important; top: 2px; font-size: 14px; float: right; margin-right: -20px;} /* mobile style */ .rmm.style .rmm-mobile li > a:not(:only-child):after {-webkit-transform: rotate(120deg)!important; transform: rotate(120deg)!important; top: 4px!important; font-size: 14px!important; float: right; margin-right: -20px;} .rmm.style .rmm-mobile li{background: #3ab4a6; border-bottom: 1px solid #575f6a!important; border-top: 0!important; }
<!DOCTYPE html>
<html>
<head>
<title></title>

<!-- Include scripts -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js">
</script> 
<script type="text/javascript" src="js/responsivemultimenu.js"></script>

<!-- Include styles -->
<link rel="stylesheet" href="css/responsivemultimenu.css" type="text/css"/>

<!-- Include media queries -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-
scale=1, user-scalable=no"/>
</head>
<body >


<div > 

    <div class="rmm style">
        <ul>
        <li>


                <a href="KPIhome.php" title="KPI">eKPI</a>


        </li>

        <?php if(isset($_SESSION['admin']) || $_SESSION['user_level'] == 5 
|| $_SESSION['user_level']==7 || $_SESSION['user_level'] ==1 ){ ?>

            <li>

                <a href="#">Value Graph</a>
                <ul>
                    <li <?php if($page == 'home.php'){echo ' 
class="active"';};?>>
                        <a href="sales_form.php">Sales Achievement against 
Target</a>
                    </li>
                    <li <?php if($page == 'home.php'){echo ' 
class="active"';};?>>
                        <a href="promo_form.php">Promotion Sales Achievement 
against Target </a>
                    </li>
                    <li  <?php if($page == 'home.php'){echo ' 
class="active"';};?>>
                        <a href="manhour_form.php">Sales per Manhour</a>
                    </li>
                    <li  <?php if($page == 'home.php'){echo ' 
class="active"';};?>>
                        <a href="trans_form.php">Transaction per Manhour</a>
                    </li>
                    <li  <?php if($page == 'home.php'){echo ' 
class="active"';};?>>
                        <a href="salmonform.php">Salmon Usage Per 1K</a>
                    </li>

                </ul>
            </li>

            <?php } ?>


             <?php if(isset($_SESSION['admin']) || $_SESSION['user_level'] 
  == 5 || $_SESSION['user_level']==7 || $_SESSION['user_level'] ==1){ ?>

            <li>

                <a href="#">Percentage Graph</a>
                <ul>
                    <li <?php if($page == 'home.php'){echo ' 
 class="active"';};?>>
                        <a href="sales_form2.php">Sales Achievement against 
Target (%)</a>
                    </li>
                    <li <?php if($page == 'home.php'){echo ' 
class="active"';};?>>
                        <a href="promo_form2.php">Promotion Sales 
Achievement against Target (%)</a>
                    </li>
                    <li  <?php if($page == 'home.php'){echo ' 
class="active"';};?>>
                        <a href="wastage_form.php">Wastage against Target 
(%)</a>
                    </li>


                </ul>
            </li>

            <?php } ?>

             <?php if(isset($_SESSION['admin']) || $_SESSION['user_level'] 
== 5 || $_SESSION['user_level']==7 || $_SESSION['user_level'] ==1){ ?>

            <li>

                <a href="#">Over Budget</a>
                <ul>
                    <li <?php if($page == 'home.php'){echo ' 
class="active"';};?>>
                        <a href="obtargetform.php">Sales Achievement</a>
                    </li>
                    <li <?php if($page == 'home.php'){echo ' 
class="active"';};?>>
                        <a href="obmtdform.php">Sales Month to Date 
 Achievement</a>
                    </li>
                    <li  <?php if($page == 'home.php'){echo ' 
class="active"';};?>>
                        <a href="obtargetform2.php">Promotion Sales 
Achievement</a>
                    </li>
                    <li  <?php if($page == 'home.php'){echo ' 
class="active"';};?>>
                        <a href="obmtdform2.php">Promotion Month to Date 
Sales Achivement</a>
                    </li>


                </ul>
            </li>

            <?php } ?>



             <?php if(isset($_SESSION['admin'])&& $_SESSION['user_level'] == 0 || $_SESSION['user_level']==7 ){ ?>
            <li>

                <a href="#">Report</a>
                <ul>
                    <li <?php if($page == 'home.php'){echo ' class="active"';};?>>
                        <a href="typereport.php">Add Report</a>
                    </li>



                </ul>
            </li>

            <?php } ?>


        <li>


                <a href="KPIhome.php" title="KPI">Website</a>


        </li>


        <li>


                <a href="KPIhome.php" title="KPI">Admin</a>


        </li>


        </ul>
    </div>
</div>

Answer №3

.custom-style{
background-color:blue;
}

Feel free to create a new custom style and combine it with existing styles for the background you desire.

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 aligning a Bootstrap container in the middle of the viewport vertically

I'm struggling to center a Bootstrap container vertically in the viewport. You can view my code at http://www.bootply.com/C8vhHTifcE All of my attempts at centering have been unsuccessful. Does anyone have a solution? Just to clarify: I want the co ...

Update the URL of the entire window by changing the link within the frame

Hey everyone, just a heads up - I haven't included frames in my programming for this page. They'll be removed soon. But right now, I have to figure out how to tackle this issue. The challenge at hand is that there's a link inside a frame. I ...

Manipulate container (div) to reveal and conceal

My jQuery was working fine until I added some more divs to my HTML. I'm now trying to toggle the opening and closing of a discussion container named discussionContainer with a click on the button replyButton. Any assistance would be highly appreciated ...

What are some strategies for customizing the appearance of child components within a parent component?

I have a scenario where I am using parent and child components. When I use the HTML in another component, I also apply my CSS. For example, in my parent component: HTML <div class="chips"> <p class="tags">Tag 1</p&g ...

Check the connection to the database and provide a response indicating whether it is successful or

I thought this question would be easy, but I'm struggling with it. My code is supposed to test the connection to a MySQL database and return true if it successfully connects, or false if it doesn't. I attempted to use jQuery and Ajax for this pur ...

determining the file size of images being loaded remotely by retrieving their image URLs

There is a straightforward regex function in jQuery that I'm using to automatically add an image tag to image URLs shared by users. This means that when a user posts something like www.example.com/image.jpg, the image tag will be included so that user ...

Extract the variables from the while loop

Is there a way to store the variables outside of the while loop? For instance, I have a slideshow displaying images for each category and a button that when clicked leads to the image gallery related to that category. However, due to graphical reasons, the ...

Is it possible to incorporate HTML tags within the <template> section of AIML files?

My goal is to create a simple bot using an AIML file. The idea is that I can input a question and the corresponding pattern will be returned from the file. For instance, I have this sample pattern in my AIML file: <category> <pattern>TEST& ...

What could be causing the no-repeat functionality to fail on these background images, and what steps can be taken to prevent the list text from overlapping with the image?

UPDATE EDIT. There is still an unresolved issue with this problem. Although setting the background to no-repeat fixed the image repetition problem, the list item text still overlaps the background image and there is an extra tick to the left. Please refer ...

`A dynamically captivating banner featuring animated visuals created with JQuery`

I am currently in the process of designing a banner for the top of my webpage, but I have yet to come across any code that meets all my requirements. To provide clarification, I have attached an illustration showcasing what I am aiming to achieve. 1) The ...

Say goodbye to my HTML5 creations

I am currently working on an HTML5 grid project that involves implementing a rectangle select tool for use within the grid. Everything is going smoothly, except for the fact that when I attempt to use the rectangular select tool, the grid disappears from t ...

Steps to resolve the 'Unknown keyword' issue while packaging a CSS file using webpack

In the process of upgrading dependencies to the latest versions for my Electron app built in Angular, I have encountered some issues. ✅ Electron remains on v19 ✅ Tailwindcss is updated to v3.1.8 ⬆️ Angular is being upgraded from v11 to v14 ⬆️ ...

"Using jQuery to create a regex pattern for validating usernames

I need assistance creating a regex pattern for usernames that must follow the criteria below: Usernames can only include a-z, A-Z, 0-9 and - (hyphens); Usernames cannot be entirely composed of digits or hyphens but can contain characters; The first ...

The challenges of $location.search().name and base href in application URLs

I am working on an Angular app and my URL appears as http://localhost:8080/personal?name=xyz. To extract the 'xyz' value in JavaScript, I am using $location.search().name. Here is a snippet of my code: app.js app.config(function ($locationProv ...

Change the label's class when the input area is selected

Looking to add a new class to a label when its corresponding input element is in focus. A form consists of 10 input fields and 10 labels, one for each field. const inputFields = document.querySelectorAll('.form-control'); console.log(inputFie ...

Having trouble getting any output from my Jquery post function. Any suggestions?

I'm currently diving into the world of AJAX, but I'm facing challenges in retrieving the output from a PHP script. Below is the code snippet that I am working with: <form> <input type="text" id="url" name="url" value="" onkeydo ...

Guide on adjusting PHP variable values and updating functions with ajax requests

One of my functions determines dates based on a variable For example: $modification = "+1 Week" function updateCalendar($change){ $month = array("January","February","March","April","May","June","July","August","September","October","November","Dece ...

Uploading and downloading files to a localhost server using PHP

Currently facing an issue where I have successfully uploaded a Picture, PPTX, and PDF file to the database server. However, when viewing them in the browser: The Picture displays normally. However, The PDF file automatically downloads upon trying to view ...

Embed watermark on the Username and Password fields of asp:Login control

Seeking help to watermark the Username and Password fields of asp:Login controls using jQuery, I have attempted different methods to reference the control ID: $('#<%=ClientID.Login1_UserName %>').watermark('watermark', 'User ...

Angular JavaScript does not take effect on elements inserted into ui-view

When transferring the code from main.html to index.html, the javascript functions smoothly. The click function successfully triggers the ripple effect. Link: Ripple Click Effect Google Material Design However, upon extracting the code to main.html and in ...