Hi,
As I examine the print preview there is a page inside of a page, so try changing the margin in .template-page.content, which is your actual page, and not in @page which is the preview frame.

Best regards,
Mike

Hi,
I’m surprised how few plugins there are for this, I would have thought there would be more. It seems many were taken down from WordPress due to security risks, perhaps adding this function adds a vulnerability to your site?

Best regards,
Mike

Hi,
Sorry, the css was missing a rule, please try this css instead:

li.menu-item-has-children > ul.sub-menu,li.menu-item-has-children > ul.sub-menu {
	display: none !important; 
}
li.current_page_item.menu-item-has-children > ul.sub-menu,li.current_page_ancestor.menu-item-has-children > ul.sub-menu {
	display: block !important; 
}

Then clear your browser cache and check.

Best regards,
Mike

Hi,
Thanks for the link, but on Android the options are showing for me, please see the screenshot in Private Content area.
This could be a cache issue, have you tried clearing your browser cache on your device?

Best regards,
Mike

Hi,
Glad we were able to 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

Hi,
Thank you, please also look in your child theme style.css for:

    #search-2,
    div.avia-search-tooltip {
        top: 30px !important;
        left: -30px;
    }

and change to:

    div.avia-search-tooltip {
        top: 30px !important;
        left: -30px;
    }

Then add this css:

@media only screen and (min-width: 989px) { 
#top #wrap_all #search-2 {
	top: 70px !important; 
	right: 12%;
}
#top #custom_html-3 {
	top: 40px !important;
	right: 12%;
}
#top #custom_html-3 .custom-html-widget {
	height: 238px;
    width: 200px;
}
}
@media only screen and (max-width: 988px) { 
#top #wrap_all #search-2 {
    top: 30px !important;
    right: 20px;
}
#top #custom_html-3 {
	top: 40px !important;
	right: 2%;
}
#top #custom_html-3 .custom-html-widget {
	height: 238px;
    width: 200px;
}
}
@media only screen and (max-width: 767px) { 
	.responsive #top .logo {
		top: 0 !important; 
	}
	.logo a {
    top: 0px !important; 
	}
	#top #wrap_all #custom_html-3 {
		top: 0px !important;
	}
}

and this function in your functions.php:

function custom_script(){
  ?>
  <script>
(function($){
  $(document).ready(function(){
  	var width = $(window).width()
  	if ((width >= 989)) {
$( '#wrap_all' ).each(function() {
$( this ).find( 'span.logo' ).insertAfter( $(this).find('div#main') );
$("span.logo").css({ 'position': 'fixed','z-index': '0' });

$( this ).find( 'div#search-2' ).insertAfter( $(this).find('div#main') );
$("div#search-2").css({ 'position': 'fixed','z-index': '0' });

$( this ).find( 'div#custom_html-3' ).insertAfter( $(this).find('div#main') );
$("div#custom_html-3").css({ 'position': 'fixed','z-index': '0' });
});
} else {
$( '#wrap_all' ).each(function() {
$( this ).find( 'span.logo' ).insertAfter( $(this).find('div#main') );
$("span.logo").css({ 'position': 'fixed','z-index': '501' });

$( this ).find( 'div#search-2' ).insertAfter( $(this).find('div#main') );
$("div#search-2").css({ 'position': 'fixed','z-index': '501' });

$( this ).find( 'div#custom_html-3' ).insertAfter( $(this).find('div#main') );
$("div#custom_html-3").css({ 'position': 'fixed','z-index': '501' });
});	
}
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_script');

Then clear your browser cache and check.

Best regards,
Mike

Hi,
Thanks for the link, this sidebar menu doesn’t show the behavior you described, the sub-menu items don’t dropdown or show on click. When you click the parent item you go to the page, then the sub-menu is shown, but it doesn’t toggle when clicked.
For this behavior, please remove the function above and only use this css:

li.current_page_item.menu-item-has-children > ul.sub-menu,li.current_page_ancestor.menu-item-has-children > ul.sub-menu {
	display: block !important; 
}

Best regards,
Mike

Hi,
It seems like the function above is still active, please remove it and the css so I can write and test the new script.

Best regards,
Mike

Hi,
So, you want no hover effect?
Please point to an example of this behavior on our demo, or any of these demos.

Best regards,
Mike

Hi,
Glad to hear, unless there is anything else we can help with on this issue, shall we close this then?

Best regards,
Mike

Hi,

@thinkingsunshine did you see a “web.config” file? If so then try merging this code in it:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
 <system.webServer>
   <httpProtocol>
     <customHeaders>
       <add name="Access-Control-Allow-Origin" value="*" ></add>
     </customHeaders>
   </httpProtocol>
 </system.webServer>
</configuration>

If not then try asking your webhost for assistance in setting CORS.

Best regards,
Mike

Hi,
Thanks for pointing this out @Guenni007

Best regards,
Mike

Hi,
I have submitted a feature request for the dev team to review.

Best regards,
Mike

Hi,
Thank you, the import is complete, please clear your browser cache and check.

Best regards,
Mike

Hi,
Thank you for the feedback, please remove the function above, I will re-write it with the 990 brake point and remove the css so it can be adjusted with the other css.
You can use media queries in your css to adjust for certain screen sizes,

@media only screen and (min-width: 990px) and (max-width: 1400px) { 
.your {
css: here;
}
}

Best regards,
Mike