Hi,
To make the header sticky for mobile I adjusted the css above for hiding the logo on desktop so it would not conflict with the mobile effect, and I then added css to make the mobile header fixed at the top, this is the new css:

@media only screen and (min-width: 767px) {
#header.header-scrolled .container.av-logo-container {
	display: none !important;
}
}
@media only screen and (max-width: 766px) { 
 .responsive #top #wrap_all #header {
    position: fixed;
  }
}

Please note that since your site is in maintenance mode when you look at your site you probably are seeing the “WordPress Admin Bar” at the top, so when you scroll in mobile view your new fixed header may look like there is a space above the header where the admin bar was when it scrolls out of view. Your visitors will not see this, if you want to see what they see then go to your profile and disable the admin toolbar.

You can add screenshots by uploading your images to a service such as postimages.org and pasting the html code, or link given in your post or Private Content area.

To demonstrate what I meant about the mobile slider, I hope you don’t mind that I added a “full screen slider” to your page under your “easy slider” with the same image, text, and two buttons. Then I set the “easy slider” to not show on mobile:

and I set the “full screen slider” to only show on mobile:

and I added this css so the “full screen slider” would not take the full screen:

@media only screen and (max-width: 767px) {
 #top #main #fullscreen_slider_1.avia-fullscreen-slider .avia-slideshow {
 	height: 70vh !important;
 	max-height: 70vh !important;
 } 
}

Please see the screenshots in Private Content area.

Best regards,
Mike

Hi,
Glad this helped, for your new effect the layout is different, the code you found and added as a codeblock works with a smooth transition because both images are in the div, where for the element we have worked on the first image is replaced with the second via css. We can get pretty close with “keyframes” but there is a moment that no image shows, unlike your code block example.
If you prefer this effect I recommend creating your layout like your code block, it works well.

Best regards,
Mike

Hi,
Sorry for the late reply, and thanks for the feedback, I see what you mean, I Enabled the Avia Layout Builder Debugger and checked the layout with the Parser to try to auto correct but it found no errors, I then copied your page to my localhost and the error continued. Yet if I create a similar page from scratch I do not have the error with the grid row.
I’m going to ask the rest of the team for their thoughts.

Best regards,
Mike

Hi,
Sorry for the late reply, when trying to import your demo I received the error

Failed to load resource: the server responded with a status of 500 ()
admin-ajax.php

To work around your server error I uploaded the images to your server and then modified your import file so the images would be installed from your server instead of downgrading from our server, then I uploaded the theme settings file and set your widgets to match the demo and I also set your menu.
Everything seems correct now, please clear your browser cache and check.

Best regards,
Mike

Hi,
Sorry for the late reply, on Envato the zip file “all files and documentation” also includes files you don’t need, so please extract it on your desktop and look for the folder “enfold” this is the theme files.
You can verify the theme version by opening the “style.css” file inside “enfold” and line 4 will tell you the version number.

Then you can rename your current “enfold” folder to “enfold-old” via ftp and them upload the new “enfold” from your desktop to your site.
If you would like a hand with this then please link to your Envato file via DropBox and include admin login and ftp access in the Private Content area.

Best regards,
Mike

Hi,
Sorry for the late reply, please try going to Enfold Theme Options > Header > Extra Elements > Header Social Icons and choose one of the options to show the social icons in the “top bar”
Then add this css for it to show on mobile:

@media only screen and (max-width: 479px) {
.responsive #top #wrap_all #header .social_bookmarks, .responsive #top #wrap_all #main .av-logo-container .social_bookmarks {
    display: block;
}
}

Best regards,
Mike

Hi,
Sorry for the late reply, if you want to have this on a few pages you can add a css rule for each page-id with a comma like this:

#top.page-id-1038 #layer_slider_1,
#top.page-id-154 #layer_slider_1,
#top.page-id-138 #layer_slider_1 {
z-index: 0;
}

but if it is for all pages that also have the layerslider then use the class “page” without the “id”
#top.page #layer_slider_1
but if it is more complicated we will need to know when you will have this set up so we can figure out the best way to set up the css rules.
If you don’t want to have the overlap on mobile devices then you can wrap your css in a media query like this:

@media only screen and (min-width: 768px) { 
#top.page-id-1038 #layer_slider_1 {
	z-index: 0;
}
#top.page-id-1038 #after_layer_slider_1 > div > div > div > div > div {
	z-index: 99;
    position: relative;
}
}

Best regards,
Mike

Hi,
Sorry for the late reply, I adjusted the height of the sub-menu and the icon and menu title so they are all just about on the same line. It may be down just a little but once all of the menu items have the icon they will look the same.
Please clear your browser cache and check.
Here is the css used:

#menu-item-115 span.av-icon-char::after {
  content: "Accueil";
  font-size: 15px !important;
  display: block;
  line-height: 40px;
    top: 100px !important;
    position: absolute;
}
#menu-item-115 > a {
	height: 215px;
    line-height: 215px;
}
#menu-item-115 > a > span.avia-menu-text > span {
    line-height: 215px;
}

Best regards,
Mike

Hi,
Sorry for the late reply and thanks for the video, I believe what you are asking is to have the header disappear on scroll down and then show on scrolling up like Rolex.com – correct?
We don’t have a built-in way to do this but this script has worked for others:
Try adding this code to the end of your functions.php file in Appearance > Editor:

function show_header_scroll_down(){
  ?>
  <script>
( function( $ ) {

    'use strict';

    var $window       = $( window );
    var lastScrollTop = 0;
    var $header       = $( '#header_main' );
    var headerBottom  = $header.position().top + $header.outerHeight( true );

    $window.scroll( function() {
            var windowTop  = $window.scrollTop();

            // Add custom sticky class 
            if ( windowTop >= headerBottom ) {
                $header.addClass( 'myprefix-maybe-sticky' );
            } else {
                $header.removeClass( 'myprefix-maybe-sticky' );
                $header.removeClass( 'myprefix-show' );
            }

            // Show/hide
            if ( $header.hasClass( 'myprefix-maybe-sticky' ) ) {
                if ( windowTop <= headerBottom || windowTop < lastScrollTop ) {
                    $header.addClass( 'myprefix-show' );
                } else {
                    $header.removeClass( 'myprefix-show' );
                }
            }
            lastScrollTop = windowTop;
    } );
} ( jQuery ) );
</script>
<?php
}
add_action('wp_footer', 'show_header_scroll_down');

then add this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

.myprefix-maybe-sticky {
		    position: fixed !important;
		    top: -100px;
		    width: 100%;
		    z-index: 999;
		    opacity: 0;
		    background: #fff;
		    transition: 0.3s all;
		    box-shadow: 0 2px 3px rgba(0,0,0,0.15);
		}

		.myprefix-show {
		    top: 0;
		    opacity: 1;
		}

Please see the video in the Private Content area.
If this doesn’t work for you it’s probably because you have a gtag script error Uncaught SyntaxError: Invalid or unexpected token please include an admin login so we can adjust.

Best regards,
Mike

Hi,
Thanks for the link, but your site seems to be down right now, please check.

Best regards,
Mike

Hi,
Thank you for the screenshots, I first looked at one of your pages that was meant to have two columns but only showed one full-width, link in the Private Content area. Your columns are created by a grid row, but your grid row only has one cell which should never be.

when I tried to adjust the size of the cells I got this error:

so I added another row using the option at the bottom of the grid row:

and then I was able to adjust the size of the cells to ensure there are two cells:

Now your page has two columns, and you can add something to the right side cell.
I assume that you are using “templates” to create your pages and one of them with the grid rows are corrupt

I also see that you have the WPBakery Page Builder plugin activate, this can cause errors and I recommend disabling the plugin.

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,
Is this going to be for a language plugin, often they have language flags, which one are you using?
If not where will they be linking to?

Best regards,
Mike

Hi,
Sorry for the late reply, you can limit the effect to only one or some of your columns, to do this you will need to add a custom class to the one you want it to work on. I tried searching your pages but didn’t find the custom class “three_columns”
If you can include admin login in the Private Content area and tell us which one you want the effect for we can assist and explain what we did should you want to do it again in the future.

Best regards,
Mike

Hi,
Glad to hear Guenni could help, we will close this now. Thank you for using Enfold.

For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

Best regards,
Mike