Hi L+T!

The below screenshot is the only background video i could find in the links you provided and it just played fine there were no stops or shakes… I think you are experiencing this issue because of slow internet speed. We recommend that you check the issue on a different connection and let us know if it worked fine.

Cheers!
Vinay

Hey!

This CSS rule mentioned below is causing the issue

#top .sub-menu:hover {
    background: #2e2e2e !important;
}

Change it to

#top .sub-menu li:hover {
    background: #2e2e2e !important;
}

If you cannot find it just add the below code in Enfold > General Styling > Quick CSS

#top .sub-menu:hover {
    background: transparent !important;
}
#top .sub-menu li:hover {
    background: #2e2e2e !important;
}

Best regards,
Vinay

Hey!

Great! you found a work around… I checked the site in both desktop and mobile version and in both it looks neat!

please feel free to get in touch with us if you have any questions…

Thank you for using Enfold :)

Cheers!
Vinay

Hi!

The execution takes place when the page is scrolled not sure if it is a browser issue that it is not triggering the scroll when you scroll fast. It is very much possible that the browsers have a limitation to trigger the number of pixels…

You can change the top 300 offset height to 200 or 100 it should still work just fine just changes the ID when the section is scrolled x pixels offset from the top.

Regards,
Vinay

Try with this code instead;

 #top #header .three.units{width:225px;} #top #header .six.units{width:450px;} #top #header .nine.units{width:675px;} #top #header .twelve.units{width:900px;}

This code should achieve that result:

@media only screen and (min-width: 1600px) {
    #top .av_slideshow_full li img {
        max-height: 600px;
        width: auto;
    }
}

#top .avia-slide-wrap {
    background: #d3d4c4;
}

Regards,
Josue

Hey!

Try adding this code to the Quick CSS:

#top ul.sub-menu {
    border-radius: 0 0 10px 10px;
    overflow: hidden;
}

Cheers! 
Josue

Well, btw if you plan to enable responsiveness again there’s a way to disable it for certain pages only.

Best regards,
Josue

Hey!

Try adding this code to the Quick CSS:

@media only screen and (min-width: 1600px) {
#top .avia-slideshow-inner {
    max-height: 600px;
}

#top .av_slideshow_full li img {
    max-height: 600px;
    width: auto;
}
}

Cheers! 
Josue

Hey!

Please review the page now the menu highlights as you scroll the page you need to add class name “avia-section” to add the #ID check the code block for edited code.

Then we added the below code in functions.php

//One page nav highlight
 
function activateMenuItem(){
?>
<script>
     jQuery(document).scroll(function() {
     var sections = jQuery('.avia-section'),
         menu   = jQuery('#menu-hardware'),        
         nav_height = menu.outerHeight();
         jQuery(window).on('scroll', function() {
            var cur_pos = jQuery(this).scrollTop();
            sections.each(function() {
                var top = jQuery(this).offset().top - 300,
                    bottom = top + jQuery(this).outerHeight();
                if (cur_pos >= top && cur_pos <= bottom) {
                    menu.find('a').removeClass('active-menu-item');                    
                    menu.find('a[href="#' + jQuery(this).attr('id') + '"]').addClass('active-menu-item');
                }
            });
        });
    });
 
</script>
<?php
}
add_action('wp_head', 'activateMenuItem');

and the below css in Enfold > general Styling > Quick CSS (at the bottom)
Edit the below CSS to change the highlight style

/* active menu item*/
.current_page_item .avia-menu-text, .active-menu-item {
  background:gold!important;
}

Cheers!
Vinay

Hi!

Thanks for getting back to us!

1. The height of the “jumping” picture needs to be the normal height of desktop resolution for it not to be cut off by the parallax layer beneath it. Try reducing the height if you can and see if that fixes your issue.

2. You go to edit your layer slider and add the horizontal lines as layers with different parallax levels. View the screenshot:

Let me know if you need further assistance.

Cheers!
Jordan

Hi zeelim!

First enable custom CSS class name support

Then add a custom class name such as “custom-bullets” to the text widget inside which you have the bullet points and add the below css in Enfold > General Styling > Quick CSS

.custom-bullets li:before {
    top: 10px;
    content: url(//bloom.sgsolutionshub.com.sg/wp-content/uploads/sites/2/2016/03/bloom_custom_bullet_44px.png);
    position: relative;
    top: 14px;
    left: 0;
}

It should look something like this

Cheers!
Vinay

Hey!

Please add the below css code

#top #wrap_all .av-social-link-facebook:hover a {
    min-width: 60px;
    width: 60px;
    min-height: 60px;
    height: 60px;
    border-radius: 60px;
}

#top .social_bookmarks li {
    width: 60px!important;
}

Regards,
Vinay