What is the procedure for making the menu background color transparent?

I need help changing the background color to transparent on my menu in desktop view.

ul.dropdown-menu li  {
  background-color: transparent !important;
}
<div class="collapse navbar-collapse navbar-ex1-collapse">
  <ul id="menu" class="menu"><li id="menu-item-1496" class="menu-item menu-item-type-post_type menu-item- object-page menu-item-home current-menu-item page_item page-item-19 current_page_item menu-item-has-   children menu-item-1496 dropdown active">
  <a title="Home" href="https://adsler.co.uk/">Home </a>
  <span class="dropdown-toggle shapely-dropdown" data-toggle="dropdown">
    <i class="fa fa-angle-down" aria-hidden="true"></i>
  </span>
    <ul role="menu" class=" dropdown-menu"
    <li id="menu-item-1502" class="fa fa-user menu-item menu-item-type- post_type menu-item-object-page menu-item-1502">
    <a title="Create 
    Adsler Account" href="https://adsler.co.uk/create-account/">Create Adsler Account</a>
    </li>

It's not working as expected...

htmlcsswordpress

Answer №1

To specify styles for desktop screens, you can use a media query to target the desired screen size.

For example:

@media screen and (min-width: 1028px) {
  ul.dropdown-menu li  {
    background-color: transparent;
  }
}

This code targets screens with a type of 'screen' and a minimum width of '1028px'. You may need to adjust the min-width value according to your needs.

Answer №2

  • It appears that your HTML code is not valid as the second ul tag is missing its closing tag.

  • To make the menu transparent, the CSS rule should be applied to the "ul" element instead of the "li" element. Here's how you can do it:

    ul.dropdown-menu { background-color: transparent !important; }

Answer №3

.header-navigation .menu > li ul {
    margin-top: 20px;
    left: 50% !important;
    background-color: rgba(255, 255, 255, 0.7);
    border-color: #333;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}
.header-navigation .menu > li > ul > li {
    display: block;
    text-align: center;
    background- color:rgba(255, 255, 255, 0.5);
}

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

Retrieving data from an HTML webpage using VBA

In my attempt to access the "username" cell from a web page using VBA, I encountered an issue. The HTML code of the page contains multiple elements with the same name, "LOGON_USERID", making it challenging for me to identify and access the correct one. Hi ...

htmlvba

Creating an overlay button within various containing divs requires setting the position of the button

Tips for overlaying a button on each HTML element with the class WSEDIT. My approach involves using a JavaScript loop to identify elements with the CSS class WSEDIT, dynamically create a button within them, and prepend this button to each element. Below ...

javascriptjquerycsshtmlcss-float

Looking to showcase elements within an array inside an object using ng-repeat

In this JSON dataset, we have information about various anchoring products. These products include anchors, cleats, snubbers, shackles, and more. When it comes to displaying these products on an HTML page using Angular, make sure to properly reference the ...

javascripthtmlangularjsjsonangularjs-ng-repeat

Issue with Google Chart overlapping drop down menu in CSS紿orizontal scrollingyan

I've exhausted all my options. I've experimented with positioning and z-indexes, but no matter what I try, the drop-down menu remains hidden behind the google chart. It functions properly on Firefox, but not on Chrome or IE. Any helpful advice wo ...

htmlcsspositioningz-indexgoogle-visualization

Tips for implementing an image as a background in AngularJS

Struggling with a Dilemma: This issue has been driving me insane for the past three days... I am eager to utilize an angularJS variable as a background image without relying on a directive. My objective is to load images of any shape (square, rectangle, ...

htmlcssangularjs

Tips for implementing a confirmation dialogue box prior to submitting a form:

As a new developer, I am facing an issue that I believe you can help me with. I want to display a confirmation box before deleting. How can I achieve this in my Ajax code? HTML: <input type='button' class="btn btn-danger delete_button" id="de ...

javascriptphpjqueryajaxwordpress

Customizing the title style of the Material-UI app bar

Is there a way to customize the AppBar title in Material-UI without using inline styling? I have a separate CSS file and I want to be able to adjust the size of the title, for example. Something along these lines: .app-bar title { font-size: 120px !i ...

cssreactjsmaterial-ui

When using the background-blend-mode property, transition-duration is not taken into account

Try hovering over the top left h1 element in this code example You'll notice that it smoothly changes the h1 element to a shade of blue in just 2 seconds. However, the transition doesn't affect the blend mode of the backgrounds. Even though the ...

css

Ways to rearrange div elements using JavaScript

I need assistance with reordering div elements using JavaScript, as I am unsure of how to accomplish this task. Specifically, I have two divs implemented in HTML, and I would like the div with id="navigation" to appear after the div with class="row subhea ...

javascriptjquerycss

Create a personalized form with HTML and JQuery

Currently, the data is displayed on a page in the following format: AB123 | LHRLAX | J9 I7 C9 D9 A6 | -0655 0910 -------------------------------------------------------- CF1153 | LHRLAX | I7 J7 Z9 T9 V7 | -0910 1305 ---------------- ...

javascriptjqueryhtml

Tips on deleting a section of text inside a div

I have a DataTables implementation that is displaying an input inside a label element like this: <label> Search: <input type="search" class="" placeholder="" aria-controls="example"> </label> My goal is to remove the "Search:" t ...

jqueryhtmldatatables

How to Use Jquery to Delete a Specific String

I've been attempting to remove certain strings from a string using Jquery, however it seems like the code isn't working and my variable remains unchanged. var classes = $("body").attr('class'); alert('.side-nav' + classes); c ...

javascriptjqueryhtmlcss

hiding elements yet passing down

Despite disabling the style sheet, a dynamically created form is displaying strangely. This form will show or hide various details based on selected options. For instance, many of the elements are generated with C#.net... formOutput += "<div class=&bs ...

javascripthtmlcss.netdom

extracting information with beautifulsoup

Currently, I am diving into BS4 to enhance my skills and expertise. My goal is to scrape various tables, lists, and other elements from well-known websites in order to grasp the syntax. However, I am encountering difficulties when it comes to formatting a ...

pythonhtmlhtml-parsingbeautifulsoup

Attempting to gather data from an HTML form and perform calculations on it using JavaScript

Looking for help with extracting user input from HTML and performing mathematical operations in JavaScript. Coming from a Python background, the variable system in JavaScript is confusing to me. Can someone provide guidance on how to achieve this? <div ...

javascripthtmlcssvariablestype-conversion

Remove numerous entries from the WordPress database by selecting multiple checkboxes

A new customer table named "tblvessel" has been created in the Wordpress database. The code provided below selects records from the database and displays them as a table with checkboxes next to each record, assigning the record's 'ID' to the ...

javascriptphpjqueryhtmlwordpress

Alert classes are not included in bootstrap 5 npm package

In my Angular 13 project, I am utilizing Bootstrap version 5.2.1. While most components are working as expected, the alert component seems to be missing some styling elements. Specifically, I have noticed that alerts with the classes alert-success and aler ...

cssbootstrap-5

Enhancing Your Images with jQuery

Hello When working with jQuery, the following code can be used to darken an image. On the contrary, how would you go about brightening up an image? $(this).hover(function() { $(this).stop().animate({ opacity: 0.5 }, 500); }, function() { $(thi ...

jquerycss

Using Wordpress? Customize your sidebar with three widgets and don't forget to add the "last" class to the third one for a polished look

Successfully set up a custom sidebar on my WordPress website and configured it to display three widgets. The CSS for the sidebar includes a specific styling for each widget, with an additional class to remove margin-right from the last (third) widget. reg ...

phpcsswidgetwordpress

In both Chrome and Edge, the default value for the <select> tag is successfully set, however, this functionality is not working in

I have defined two values in the created method, 2018 and My Name, and assigned them to separate data properties. These data properties are then passed as v-bind to a component. The issue I am facing is that in Chrome and Edge, both values are set as defa ...

javascripthtmlvue.js