Hey Qgrafica_7,

Please try the following in Quick CSS under Enfold->General Styling:

#top #main span.av-milestone-icon {
  border-color: transparent;
}

Best regards,
Rikard

Hi,

Great, I’m glad that Mike could help you out. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

Great, I’m glad that Mike could help you out. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

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

Hey reqonsult,

Thank you for the inquiry.

You can use this css code to disable the click overlay or the invisible play/pause control.

#top .av-video-slide.av-video-playing {
    pointer-events: none;
}

Best regards,
Ismael

Hi,
Try this css instead

#top #header_meta .phone-info span {
    font-family: 'Raleway', sans-serif;
    font-size: 18px;
    font-weight: 900 !important;
    color: #000;
}

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

Best regards,
Mike

Hey Diana,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

 #top .main_color input[type='email'] {
    border-color: #ffffff;
    background-color: #f6f7f9;
    color: #1e242f;
    font-weight: 300;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hey Diana,
The line is a after section feature, to remove try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top .container_wrap {
    border-top-style: none;
}

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

Best regards,
Mike

Hey Peter,
I will try, in my example I wanted to use a menu created in WordPress, so first create a menu and save the menu name for the function code later:

For the logo we will add the image via css so you will need to add the custom classes button logo

For the CTA we add the classes button cta:

Then on the page you want to use this use the option Hide Header on this page:

and add the shortcode [custom_menu menu=”test menu with logo”] to your page, adjust the menu name to suit.
Then add this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function display_custom_menu($atts) {
    $atts = shortcode_atts(
        array(
            'menu' => '',
        ), 
        $atts, 
        'custom_menu'
    );
    $menu = $atts['menu'];
    if (!empty($menu)) {
        $args = array(
            'menu' => $menu,
            'container' => false, 
            'menu_class' => 'av-main-nav scmenu',
            'echo' => false
        );
        $menu_html = wp_nav_menu($args);
        $output = '<header id="header" style="position: absolute; top: 0;">';
        $output .= '<nav class="main_menu" style="display: flex; align-items: center; justify-content: center; width: 100%;">';
        $output .= $menu_html;
        $output .= '</nav>';
        $output .= '</header>';
        return $output;
    } else {
        return '<p>No menu specified or menu not found.</p>';
    }
}
add_shortcode('custom_menu', 'display_custom_menu');

and this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top #wrap_all .main_menu ul.scmenu {
list-style: none;	
}
#top #wrap_all .main_menu .scmenu .menu-item a {
	color: var(--enfold-header_replacement_menu_color);
}
#top #wrap_all .main_menu .scmenu {
background-color: rgba(0, 0, 0, 0.2);
}
body:not(.wp-admin) li.button.logo {
background-image: url(/wp-content/uploads/2024/07/logo_fysiotherapie_groningen.webp);
background-size: contain;
background-repeat: no-repeat;
background-position: 50% 50%;
width: 200px;
margin-left: 0;
}
body:not(.wp-admin) li.button.logo a {
opacity: 0;
}
#top #wrap_all .main_menu .scmenu .button.menu-item.cta {
	background-color: orange;
}

and adjust the image URL to suit
The expected results should be like this when a color section with a image is used:

Best regards,
Mike

Hi,
On the demo page that you linked to, The sidebar menu is automatically created by the Page Sidebar Navigation option.

I believe the issue with the sidebar showing lower on the page when you add a tab section element is that it is a full width element and this moves the sidebar, there are a few elements like the color section and full width slider that is known to do this.
Nonetheless you can add the Page Sidebar Navigation with a shortcode, first add this code to the end of your child theme functions.php file in Appearance ▸ Editor:

//shortcode [avia_sidebar_menu]
function display_avia_sidebar_menu() {
    ob_start();
    global $avia_config;
    if (function_exists('avia_sidebar_menu')) {
        $av_sidebar_menu = avia_sidebar_menu(false);
        if ($av_sidebar_menu) {
            echo $av_sidebar_menu;
        }
    }
    return ob_get_clean();
}
add_shortcode('avia_sidebar_menu', 'display_avia_sidebar_menu');

then add this shortcode [avia_sidebar_menu]

and note that the theme option Page Sidebar Navigation must be enabled:

then it will show, note that the style is the same because it is in the sidebar:

but if you add the shortcode to your page it will have a different style, so add this css:

#top #main .widget_nav_menu .nested_nav>li:first-child,
#top #main .widget_nav_menu li {
border: none;
}
#top #main .main_color .widget_nav_menu .current_page_item>a {
color: var(--enfold-main-color-heading); 	
}
#top #main .main_color .widget_nav_menu a {
color: var(--enfold-main-color-meta);	
}
#top #main .main_color .widget_nav_menu ul:first-child>.current_page_item {
background: var(--enfold-main-color-bg2);	
}
#top #main .widget_nav_menu li a{
border: none;
padding: 6px 7px 7px 0;
}
#top #main .widget_nav_menu ul:first-child > .current_page_item {
    left: 0;
}

so with the sidebar disabled it will look the same:

Best regards,
Mike

Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 767px) { 
.responsive #top #wrap_all #footer .flex_column {
	margin-bottom: 0;
}
}

The expected results:

Best regards,
Mike

Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#footer .av_one_third > section {
	margin: 0;
}
#top #footer {
	padding-bottom: 15px;
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,

Great, I’m glad that we could help you out. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

1. Please try this instead:

@media only screen and (max-width:767px) {
 .responsive .home #wrap_all #header {
    opacity: 1;
    position: fixed !important;
    top: 0 !important;
padding-bottom: 20px !important;
  }
 .responsive .home #wrap_all #header.header_color.av_header_transparency {
    opacity: 0;
  }
}

2. Please try this to align the social media icons to the right:

@media only screen and (max-width: 767px) {
  .responsive #header .social_bookmarks {
    text-align: right;
  }
}

Best regards,
Rikard

Hi,

Thank you for the update.

The update should fix the banner, but we are not sure about the tabs. Try adding this css code to display the initial tab on load.

#top div div.product .woocommerce-tabs #tab-description {
    display: block;
}

Best regards,
Ismael