• Priority: 0
  • Status: Closed
  • Theme: Alysum
  • Assigned To: Fred
  • Private: No
  • Open Date: 05.05.23, 12:43
  • Opened by: Piero
  • Closed by: Fred
  • Closed on: 08.06.23, 19:47
  • Reason: Closed
  • Comment: Glad to help!

Ticket #24613 - CSS code for coloring the dropdown menu on mobile only

Hello, I’m creating a new site www.sensishop.net. I’m building the header with creative elements on both desktop and mobile (no AMP).
I have 2 questions:

1) I’m trying to color the background of the dropdown menu on mobile only. If I use this CSS code it works on desktop and mobile

.elementor-element #top menu, .elementor-element .pk-top-menu {
    background-color: red !important; }

if I add this code to make it work only on mobile nothing works anymore

@media only screen and(max-width: 1024px)
{
.elementor-element #top menu, .elementor-element .pk-top-menu {
    background-color: red !important; }
}

2) Always for the dropdown menu. Is it possible to have a nicer drop-down style, for example making it come out from the sides like the menu in the AMP version?

Thanks
Piero

Comments

Fred 05 May 2023, 16:52

Hi, Pierfrancesco.
Please let me know how are you trying to add mobile header view?
I’m asking because we have an option in the Theme Settings → Header where you can select spacial template for mobile screens and no need to add specific styles

Piero 05 May 2023, 19:01

Hi Fred, I’ll be more specific. I’m referring to the background of the dropdown menu that appears when I click on the hamburger in the mobile version. I wonder: 1) how to change the background only for the mobile version (and here consider that the first code I sent you works correctly and how I want it on desktop and mibile but if I add the second code (@media only screen etc.) it stops In any case, I put the access data for the backoffice in my profile and you can find the css code in the last line. 2) whether that drop-down menu can be changed to a prettier input…like coming out from the left or right…like in the AMP version. Let me know and thanks Piero

Fred 05 May 2023, 20:03

Ok, I see. Try this CSS

@media only screen and (max-width: 1024px) {
  .pk-menu-horizontal li.level-1 {
    background-color: red !important;
  }
}

It works for me → https://take.ms/dCquv

Piero 06 May 2023, 00:32

Fred now works! Thanks for your help! At this point, I’m only asking you for information on my second question…not knowing the platform well yet…if there is another way to get the dropdown menu inside. For example from the left as in the AMP version

Fred 06 May 2023, 23:02

There is no such option, sorry

Piero 08 Jun 2023, 14:44

OK Fred this topic is solved and can be closed