background color menu

Hi @psycholoogmarieke

At the moment we don’t have the option to do that.
But you can use these custom CSS codes, and remove the style you’ve added through the block control :

@media only screen and(max-width: 1024px) {
  .guten-nav-menu .gutenverse-menu-wrapper .gutenverse-menu > ul > li > a {
    background-color: rgba(18, 18, 18, 1);
  }
}

Let me know if you still have any questions.

hi, is it possible that the code doenst work? the menu on the pc is still the same color als the menu background on mobile: https://www.psycholoogmarieke.nl/

Hi @psycholoogmarieke

Could you send me a screenshot of how the codes look inside the Additional CSS text box?
I can’t seem to see the styling codes on the live site.

This is all the CSS code:

.guten-column.guten-eCMYTc > .sticky-wrapper > .guten-column-wrapper:before {

    z-index: -1;

}

.guten-eCMYTc div.wpforms-container-full {

    margin-left: 0;

}

.guten-column.guten-wnVitj > .sticky-wrapper > .guten-column-wrapper::before {

    z-index: -1;

}

.wpforms-form button[type=submit] {

    background-color: #000000 !important;

    border-color: #DDD28C!important;

    color: #fff !important;

    transition: background 0.3s ease-in-out;

                font-family: poppins;

                text-transform: uppercase; 

                font-size: 15pt;

                font-weight: 600;

                letter-spacing: 2px;

}

/** WPFORMS  label color **/

.wpforms-form label{

color: #ffffff !important;

}

/** WPFORMS Input Textarea **/

.wpforms-form input, .wpforms-form textarea{

 background-color: #ffffff  !important;

}

.wpforms-form button[type=submit]:hover {

    background-color: #DDD28C

                                               !important;

                color: #000000 !important;

}

.wpforms-container { font-family: poppins;

font-size: 15pt;

}

/** onderste vraag welk traject**/

.wpforms-field select {

  background-color: #ffffff !important;

}

.wpforms-field option:not(:checked) {

  background-color: #ffffff !important;

}

.guten-column-wrapper > :not(.guten-element) {

    position: relative;

}

div#wpforms-1605 {

    max-width: 864px;

}

.guten-nav-menu .gutenverse-menu-wrapper .gutenverse-menu li.menu-item-has-children > a i, .guten-nav-menu .gutenverse-menu-wrapper .gutenverse-menu > ul li.menu-item-has-children > a i {

    font-size: 30px;

}

.guten-column .guten-icon-box, .guten-column .guten-icon-box-wrapper {

    height: 100%;

}

#wpforms-1605 {

    width: 100%;

    margin: var(--wp--preset--spacing--30);

}

/** menu mobiel kleiner  en uitgevouwen**/

@media screen and (max-width: 1024px) {

    .gutenverse-menu .sub-menu {

        display: block !important;

        opacity: 1 !important;

        visibility: visible !important;

    }

    .guten-nav-menu.guten-element.break-point-tablet .gutenverse-menu-wrapper {

        height: auto !important;

    }

}

@media screen and (max-width: 780px) {

    .guten-nav-menu .gutenverse-menu-wrapper .gutenverse-menu li.menu-item-has-children > a > i {

        display: none;

    }

}

/** video kleiner maken**/

.guten-video .guten-video-background {

    width: 80%!important;

    height: 400px!important;

}

/** menu  achtergrond enkel op mobiel en niet pc**/

@media only screen and(max-width: 1024px) {

  .guten-nav-menu .gutenverse-menu-wrapper .gutenverse-menu > ul > li > a {

    background-color: rgba(18, 18, 18, 1);

  }

}

Hi @psycholoogmarieke

Sorry, there was a missing space in my code.
Try using this one instead :

@media only screen and (max-width: 1024px) {
  .guten-nav-menu .gutenverse-menu-wrapper .gutenverse-menu > ul > li > a {
    background-color: rgba(18, 18, 18, 1);
  }
}

After this, try removing the color you set from control to prevent color applied twice.

thanks.

“After this, try removing the color you set from control to prevent color applied twice.” > where can i do this? nothing changed so far. we will come there ??

Hi @psycholoogmarieke

Please check your other topic.
Since it’s related, I made a single video to answer it.

Thank you.