How to change background color of menu to transparent?

Question

I have a menu and want to change background colour to transparent 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> 

Doesn't work.....

Answer 1

Use a media query to target the screen size that you consider to be for a desktop.

For instance:

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

This will target medias of type 'screen' and for viewport sizes of minimum '1028px' in width. You will need to experiment with the min-width size yourself.

Answer 2

1. Your HTML seems to be invalid: The second (inner) ul starting tag is simply not closed.

2. If you want to make the menu transparent, you should put your rule on the "ul" tag, not on the "li" tag, like this:

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

Answer 3

.main-navigation .menu > li ul { 
    padding: 10px; 
    right: 0 !important; 
    background-color: transparent;  
    border-color:
    transparent;box-shadow: none
}
.main-navigation .menu > li > ul > 
li { 
    display: flex; 
    align-items: center; 
    background- color:transparent;
}