CSS changes in the mobile menu

Hi,
Sorry for the late reply and thank you for the login to the staging site, I see you have the same css in your child theme stylesheet and in your Quick CSS, which can make it a little tricky to manage your styles, you may wish to keep your css in one place.
Anyways I commented out these two lines in both places:

/*#top #header_main > .container .main_menu ul:first-child > li > a {
    line-height: 155px !important;
}*/
/*#top .header-scrolled #header_main > .container .main_menu ul:first-child > li > a {
    line-height: 60px !important;
}*/

and now your mobile menu items are a natural size and expand well within the group, please clear your browser cache and check.

Best regards,
Mike

Hi,
Thank you for the feedback, so it looks like those two lines of code were for the desktop menu, on mobile they are making the menu items very large. So I have added #avia-menu to the code so it will show for desktop and not for mobile.

#top #header_main > .container .main_menu ul#avia-menu:first-child > li > a {
    line-height: 155px !important;
}
#top .header-scrolled #header_main > .container .main_menu ul#avia-menu:first-child > li > a {
    line-height: 60px !important;
}

It is activate now, please clear your browser cache and check.

Best regards,
Mike

Hi,

Sorry for the delay. You can use this css pattern to change the background color of the sub menu items of a specific parent menu item in the mobile menu. The following css in particular will affect the UBI menu item and its child menus.

.av-burger-overlay li.menu-item-10 .sub-menu li a {
     background: #2D509F !important;
}

We can reuse that pattern to change the other menu items. Noticed the li.menu-item-10 in the selector? 10 is the id of the menu item UBI, so to change the Buddhismo menu item, which has a menu id of 24, just copy or duplicate the css code, replace li.menu-item-10 with li.menu-item-24 and replace the background color accordingly.

.av-burger-overlay li.menu-item-24 .sub-menu li a {
     background: #F7A713!important;
}

You should also add the following css code to change the font color of the child menus to white.

.av-burger-overlay li .sub-menu li a .avia-menu-text {
   color: #ffffff !important;
}

Best regards,
Ismael

Hi,

Please add following code to Quick CSS field as well

.html_av-overlay-side #top #wrap_all .av-burger-overlay li a {
    text-transform: uppercase;
    font-size: 20px;
}
#top #wrap_all #header #av-burger-menu-ul > li.av-active-burger-items {
    border-top: 1px solid #333;
}
#top #wrap_all #header #av-burger-menu-ul > li.av-active-burger-items:last-child {
    border-bottom: 1px solid #333;
}
.html_av-submenu-hidden .av-submenu-indicator,
.html_av-overlay-side-classic #top .av-burger-overlay li li .avia-bullet {
    display: none;
}
.html_av-overlay-side #top #wrap_all .av-burger-overlay li li a {
    padding-left: 50px;
}

If further customization is required, please consider to hire a freelance developer.

Best regards,
Yigit

Hi,

Please add following code to Quick CSS as well

.html_av-overlay-side .av-burger-overlay-scroll {
    width: 100%;
}
.av-burger-overlay-inner {
    background-image: url(LINK-OF-YOUR-LOGO-HERE);
    background-repeat: no-repeat;
    background-position: 25px 25px;
}

Best regards,
Yigit

Hi,
To solve the error in the buttons try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

#header_main #av-burger-menu-ul .current-menu-item a {
    border-bottom-width: 0px !important;
}

To have gray lines between the menu items except when the burger sub-menus are open, then the border lines should be white, try this css:

.html_av-overlay-side-classic #top .av-burger-overlay li a {
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-top-style: solid;
    border-top-width: 1px;
}
.html_av-overlay-side-classic #top #wrap_all .av-burger-overlay #av-burger-menu-ul li a {
    border-color: #ddd;
}
.html_av-overlay-side-classic #top #wrap_all .av-burger-overlay #av-burger-menu-ul li.av-show-submenu a {
    border-color: #fff;
}

After applying the css, Please clear your browser cache and check.

Best regards,
Mike

Hi,

Great, I’m glad that you got things working and thanks for the update. Please let us know if you should need any further help on the topic or if we can close it.

Best regards,
Rikard