1

I have a test page i am currently working on - https://www.monofireandsecurity.co.uk/test-page

I want the background of the navigation menu to be transparent on desktop but solid on tablet and mobile. i am using Elementors nav builder but i can only have one set background colour for all three devices

Code i have tried is:

.header.mobile {background-color: #000000;}

but nothing happens

Any help appreciated Marc

Marc burke
  • 21
  • 3
  • Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a **Stack Snippet**. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See [**Something in my website/demo doesn't work can I just paste a link**](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it). – Paulie_D Aug 23 '18 at 13:59

1 Answers1

0

You can use css media queries for this. Media queries can override styles on certain viewport dimensions.

/** 'global' style **/
.elementor-menu .menu-item {
  background-color: #000;
}

/** desktop style **/
@media only screen and (min-width: 1024px) {
    .elementor-menu .menu-item { background-color: transparent; }
}
jrswgtr
  • 2,287
  • 8
  • 23
  • 49
  • Thanks for your reply, however all this code seems to do is add a 1px red border around my header container apologies if my question wasn't clear enough – Marc burke Aug 23 '18 at 14:27
  • I just put the red border there for illustrations. Remove the `border` property from my css. – jrswgtr Aug 23 '18 at 14:28
  • I also added an `!important` flag after the transparent style. – jrswgtr Aug 23 '18 at 14:30
  • apologies once again. it is the drop down menu on mobile and tablet that i require to have a solid background – Marc burke Aug 23 '18 at 14:32
  • Then you could do the same, but replace the `.header` class in your css with the class of the drop down menu container. Likely `.sub-menu`. – jrswgtr Aug 23 '18 at 14:33
  • I checked your site. The class should be `.elementor-menu`. I updated my snippet – jrswgtr Aug 23 '18 at 14:41
  • the !important tag shouldn't be needed. If you can achieve the same result without using it you should. https://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css/3706876#3706876 – Moose Aug 23 '18 at 14:47
  • @Moose i put it in just to be sure there is nothing overriding it. – jrswgtr Aug 23 '18 at 14:48
  • thanks a lot for your help, im 80% of the way there now. Just having an issue with the black background not filling the whole of the navigation drop down menu. the black only covers half of the menu – Marc burke Aug 23 '18 at 14:48
  • @Marcburke you can also style the individual menu items. Replace `.elementor-menu` with `.elementor-menu .menu-item`. That way they will be all black. UPDATED MY SNIPPET – jrswgtr Aug 23 '18 at 14:50
  • @Marc Burke: remove height: 110px; from .elementor-nav-menu when the nav turns a dropdown. – Moose Aug 23 '18 at 14:51
  • @jrswgtr you are a life saver. thank you so much for your assistance. have a great day – Marc burke Aug 23 '18 at 15:08
  • My pleasure. Can you please mark my answer as correct? – jrswgtr Aug 23 '18 at 15:09