Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Support gowinda

    (@gowinda)

    Hi @psycholoogmarieke

    I’ve looked at your website and I see no difference in the submenu background from mobile or desktop.

    if you want to change the submenu style you can click on the nav menu block and open settings (ctrl+shift+,). and then go to the style panel. in there, you should find the submenu item style and submenu panel style. try changing the background as you like and adjust it to mobile and/or desktop.

    Thread Starter psycholoogmarieke

    (@psycholoogmarieke)

    do you see the shadow in photo 1? how can i remove that.

    and in photo 2, the subpages dont have the green with gold background.

    Maybe it has to do with my CSS?

    /4 blokken op homepage breder, op mobiel smaller/
    @media only screen and (max-width: 1024px) { guten-psy{ width: 100% }

    .guten-psy{ width: 100% }
    }
    @media only screen and (min-width: 1025px) { guten-psy{ width: 155% }

    .guten-psy{ width: 155% }
    }

    .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 button color normaal **/
    .wpforms-form button[type=submit] {
    background-color: #1B4235 !important;
    color: #fff !important;
    transition: background 0.3s ease-in-out;
    font-family: poppins;
    text-transform: uppercase;
    font-size: 18pt;
    font-weight: 500;
    letter-spacing: 1.8px;
    }

    /** WPFORMS button color hover **/

    .wpforms-form button[type=submit]:hover {
    background-color: #DDD28C
    !important;
    color: #ffff !important;
    }

    .wpforms-container { font-family: poppins;
    font-size: 18pt;
    }

    .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-mobile .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;
    }
    }

    /** menu achtergrond enkel op mobiel en niet pc**/
    @media only screen and (max-width: 1024px) {
    .guten-nav-menu .gutenverse-menu-wrapper .gutenverse-menu {
    padding: 8px!important;
    }
    .guten-nav-menu .gutenverse-menu-wrapper ul, .guten-nav-menu .gutenverse-menu-wrapper .gutenverse-menu li > a {
    line-height: normal!important;
    }
    }

    /** randje om mobiele menu**/
    @media only screen and (max-width: 1024px) {
    .guten-nav-menu.break-point-mobile .gutenverse-menu-wrapper .gutenverse-menu-container {
    border: 1px solid #DDD28C;

    }
    
    
    /** achtergrond blogs weg thumbnail container**/

    .guten-postblock .guten-postblock-content{
    width: 100%;
    height : 100%;
    }
    }

    /** achtergrond smal net als beeld**/

    section .guten-container>.guten-element.guten-column>.sticky-wrapper>.guten-column-wrapper>* {max-width: none;

    }

    /** lettertype mobiele menu**/

    @media only screen and (max-width: 1024px) {
    .added-menu .menu-item a{
    font-family: poppins;
    text-transform: uppercase;
    font-size: 17pt;
    font-weight: 500;
    letter-spacing: 2px;
    }
    }

    Plugin Support gowinda

    (@gowinda)

    Hi again

    I have checked your CSS and nothing says about the submenu background or box-shadow. if it’s the background color and box-shadow for the submenu, we actually have it in our style panel for the nav menu.
    set the box-shadow color transparent way down in the submenu panel style

    https://ibb.co/zP8h5Dj

    and also set the background color transparent way down in the submenu panel style

    https://ibb.co/88ZX2qj

    and last set the background color transparent way down in the submenu item style

    https://ibb.co/Bff3BW4

    Thread Starter psycholoogmarieke

    (@psycholoogmarieke)

    hi, I tried all that but the shadow is still there!

    Plugin Support gowinda

    (@gowinda)

    Hi @psycholoogmarieke

    try adding this in your css

    .guten-nav-menu .gutenverse-menu-wrapper .gutenverse-menu li.menu-item-has-children .sub-menu {
    box-shadow: rgba(45, 45, 45, 0);
    background-color: rgba(27, 66, 53, 0);
    }

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘mobile menu’ is closed to new replies.