Menu side bar menu image vs background

Hi,

Thank you for the update.

Do you have an existing installation of the site? We might be able to provide css code to adjust the style of the sidebar navigation, but we need to inspect the site and see the current setup. Please post the URL of the site. Would you like the image to be seen under the transparent half part of the sidebar navigation?

Best regards,
Ismael

Hi,

Thank you for the update.

First, we should disable the Performance > File Compression settings to regenerate the stylesheets and ensure that the changes that we are about to make takes effect immediately. We can then add this css code in the Quick CSS field to remove the header/sidebar background and decrease the left margin of the main container to 150px. You may need to adjust the maximum width of the layer slider after adding the css code.

.header_color .header_bg, .header_color .main_menu ul ul, .header_color .main_menu .menu ul li a, .header_color .pointer_arrow_wrap .pointer_arrow, .header_color .avia_mega_div, .header_color .av-subnav-menu > li ul, .header_color .av-subnav-menu a {
    background-color: transparent;
    color: #808080;
}

.html_header_left #main {
    margin-left: 150px;
}

Best regards,
Ismael

Hi,

Thank you for the update.

You might be able to create the sloped edge by creating a pseudo element inside the header container, then apply the “slanted” background or border to it. The following tutorials might help.

// https://kilianvalkhof.com/2017/design/sloped-edges-with-consistent-angle-in-css/
// https://www.viget.com/articles/angled-edges-with-css-masks-and-transforms/

Best regards,
Ismael