replace burgermenu submenuitem with image

Hey konradanders,

Thank you for the inquiry.

Could you provide a screenshot of what you’re trying to do? Please note that the burger menu is dynamically generated on page load based on the default menu with certain limitations, so modifying it directly may not be possible.

Best regards,
Ismael

Hi,

Thank you for the screenshots.

You can use this css code to create the desired layout. Add the image or icon as background of the ::after pseudo-element.

#top #header.av_minimal_header .main_menu ul:first-child > li > ul > li:first-child a::before {
    content: '';
    display: block;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 1px;
    background: #5e504a;
}

#top #header.av_minimal_header .main_menu ul:first-child > li > ul > li:first-child a::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 20px;
    background-image: url('your-image-url.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 100;
}

Result:

View post on imgur.com

Best regards,
Ismael

Hi,

Thank you for the update. To adjust the color of the “X” close button, try to add this css code:

.av-burger-overlay-active #top .av-hamburger-inner, .av-burger-overlay-active #top .av-hamburger-inner::after, .av-burger-overlay-active #top .av-hamburger-inner::before {
    background-color: #000000;
}

Best regards,
Ismael