Forum Replies Created
-
AuthorPosts
-
Hey caledoman,
Thanks for the link to your site, but I’m not sure that I understand what you want to do. I see that at the top you have a background video, and over it you have a text block and an image (logo), so do you want this logo to only show on hover?
If so try this code in the General Styling ▸ Quick CSS field:.home .wp-image-1194 { opacity: 0; } .home #full_slider_1:hover ~ #after_grid_row_1 .flex_column_table.sc-av_one_full .wp-image-1194, .home .flex_column_table.sc-av_one_full:hover .wp-image-1194 { opacity: 1; }Best regards,
MikeHi,
Thank you for the link to your site, to move the cart to the topbar Try adding this code to the end of your functions.php file in Appearance ▸ Editor:function custom_script() { ?> <script> (function($){ $( ".cart_dropdown" ).appendTo( "#header_meta .container" ); $( ".cart_dropdown_link" ).css({'line-height':'unset'}); })(jQuery); </script> <?php } add_action('wp_footer', 'custom_script');the expected result for desktop is:

and for mobile is:

to hide the search icon for mobile try this code in the General Styling ▸ Quick CSS field:@media only screen and (max-width: 767px) { #header_main #menu-item-search { opacity: 0; } }After applying the css, please clear your browser cache and check.
Best regards,
MikeHi,
Thank you for your patience, I have checked the full-width sub-menu on these two pages in Windows in Chrome, Firefox, & Edge for mobile < 425px (your css is set to max-width: 620px) and it works in all browsers.page 1 – https://qc.pizza/menu/
page 2 – https://qc.pizza/qc-pizza-minneapolis-menu/I also checked on an actual Android device with Chrome and on a Mac with Safari, Chrome, & Firefox.
So I’m not able to duplicate your error of the non-sticky sub-menu in Chrome mobile, can you explain how you are testing and what device to are testing on?Best regards,
MikeHi,
Glad Nikko was able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
MikeHey anristudio,
Thank you for the screenshots and login, this is a result of your Animate It! plugin Custom CSS field contains this rule:p { display: inline !important; }
making all paragraph tags on your site inline instead of block
If you have a specific paragraph that you want to force into inline then you need to add the parent class to this rule so to not disrupt all of the other paragraphs on your site. For example:.parent p { display: inline !important; }If you need help adjusting this please point to the specific paragraph you want inline
Best regards,
MikeHi,
The script above should work correctly for mobile only, just use this css instead of the css above:@media only screen and (max-width: 767px) { #header_meta.sticky-top { position:fixed!important; top:0!important; z-index:10000!important; width: 100%; } }Then clear your browser cache and check.
Best regards,
MikeHi,
I just found another one of your threads for a different site where the social icons are not showing, could you be referring to this site linked below?Best regards,
MikeHi,
Thanks for the screenshot, but when I checked on Windows in Chrome, Firefox, & Edge the icons showed for me, try clearing your browser cache, if you are using Safari follow these steps for Safari and note step 4 where you will Clear the History.

Best regards,
MikeHi,
Please see our documentation for Adding a header widget area.Best regards,
MikeHi,
To make the background images full height addheight: 100%;to the.image-main imgrule.
For mobile the original site changed the orintaion from vertical to horizontal to add this to your example replace the css above to this:@media (max-width:989px) { .nav-mainarea { max-height: 100vh; } .nav-mainarea .nav-mainarea-item { width:100%; max-height: 25vh; padding-left: 30px } .nav-mainarea .nav-mainarea-item:hover .nav-mainarea-text { transform: translateX(15vw) } } @media (min-width: 990px) { .nav-mainarea .nav-mainarea-item { width: 25%; height: 100%; padding: 30px; } .nav-mainarea .nav-mainarea-item:hover .nav-mainarea-text { transform: translateY(-45vh); } } .nav-mainarea { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-wrap: wrap; z-index: 100; } .nav-mainarea .nav-mainarea-item { display: flex; transition: all .3s ease-out; border-right: 1px solid rgba(255,255,255,.5); text-decoration: none; } .nav-mainarea .nav-mainarea-item .nav-mainarea-text { margin-top: auto; color: #000; transition: all .3s ease-out; } .nav-mainarea .nav-mainarea-item h2 { margin: 0; line-height: 1.6; color: #ca0202; } .nav-mainarea .nav-mainarea-item:hover { text-decoration: none; } #top.page-id-3157 #av_section_1 > .container { max-width: 2500px; width: 100%; padding: 0; } .image-main img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: none; opacity: 0; z-index: 1; object-fit: cover; object-position: center; width: 100%; height: 100%; } .image-main img.is-visible { opacity: 1; z-index: 1; display:block; } .fade-in-image { animation: fadeIn 3s; -webkit-animation: fadeIn 3s; -moz-animation: fadeIn 3s; -o-animation: fadeIn 3s; -ms-animation: fadeIn 3s; } @keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } @-moz-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } @-webkit-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } @-o-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } @-ms-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} }Best regards,
MikeHi,
In the css above find this rule:.nav-mainarea .nav-mainarea-item:hover { text-decoration: none; }and change to this:
.nav-mainarea .nav-mainarea-item:hover { text-decoration: none; background-color: rgb(128 128 128 / 45%); }adjust the color to suit.
Best regards,
MikeHi,
Glad Guenni007 was able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
MikeHi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
MikeHi,
Thanks for the feedback I added a fadeIn keyframe set to 3 seconds to the code below, please give this a try.<script> window.addEventListener('DOMContentLoaded', function() { (function($){ $('.image-main .nav-mainarea-item').bind('mouseover', function(){ var myEm = $(this).attr('data-img'); $('.image-main img').removeClass('is-visible'); $('.image-main img[data-img = '+myEm+']').addClass('is-visible'); }); })(jQuery); }); </script> <style> .nav-mainarea { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-wrap: wrap; z-index: 100; } .nav-mainarea .nav-mainarea-item { display: flex; transition: all .3s ease-out; width: 25%; height: 100%; border-right: 1px solid rgba(255,255,255,.5); padding: 30px; text-decoration: none; } .nav-mainarea .nav-mainarea-item .nav-mainarea-text { margin-top: auto; color: #000; transition: all .3s ease-out; } .nav-mainarea .nav-mainarea-item h2 { margin: 0; line-height: 1.6; color: #ca0202; } .nav-mainarea .nav-mainarea-item:hover .nav-mainarea-text { transform: translateY(-45vh); } .nav-mainarea .nav-mainarea-item:hover { text-decoration: none; } #top.page-id-3157 #av_section_1 > .container { max-width: 2500px; width: 100%; padding: 0; } .image-main img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: none; opacity: 0; z-index: 1; object-fit: cover; object-position: center; width: 100%; } .image-main img.is-visible { opacity: 1; z-index: 1; display:block; } .fade-in-image { animation: fadeIn 3s; -webkit-animation: fadeIn 3s; -moz-animation: fadeIn 3s; -o-animation: fadeIn 3s; -ms-animation: fadeIn 3s; } @keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } @-moz-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } @-webkit-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } @-o-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } @-ms-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } </style> <div class="image-main"> <img class="nav fade-in-image is-visible" data-img="1" src="../wp-content/uploads/2022/03/PhotoRag_Metallic_Mood.jpg"> <img class="nav fade-in-image" data-img="2" src="../wp-content/uploads/2022/03/RS171_Hahnemuehle__3_-lpr.jpg"> <img class="nav fade-in-image" data-img="3" src="../wp-content/uploads/2022/03/Hahnemuehle_Notebook_Iconic_A5_Schwarz-black_and_taupe_mood_web.jpg"> <img class="nav fade-in-image" data-img="4" src="../wp-content/uploads/2022/03/hfa_filtration.jpg"> <div class="nav-mainarea"> <a class="nav-mainarea-item nav" data-img="1" href="#"> <div class="nav-mainarea-text"> <h2>Digital FineArt</h2> Turning images into Art </div> </a> <a class="nav-mainarea-item nav" data-img="2" href="#"> <div class="nav-mainarea-text"> <h2>Artist Papers</h2> The Art of Expression </div> </a> <a class="nav-mainarea-item nav" data-img="3" href="#"> <div class="nav-mainarea-text"> <h2>Stationery</h2> Notebooks & Writing Instruments </div> </a> <a class="nav-mainarea-item nav" data-img="4" href="#"> <div class="nav-mainarea-text"> <h2>Filtration</h2> Technical Applications </div> </a> </div> </div>Best regards,
MikeHi,
Thanks for your feedback, but I have checked with the Events Calendar activated and Events Calendar Pro along with your woocommerce plugins and your six AIOSEO plugins and the post slider does show, so this points to one of the 12 “Give” plugins causing the conflict, please check your site and try enabling each of the 12 “Give” plugins individually to determine the conflict.Best regards,
MikeHi,
Glad Rikard could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
MikeHi,
Glad Ismael could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
MikeHi,
Glad Nikko was able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
MikeHi,
Glad Nikko was able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
MikeHi,
Glad Rikard could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
MikeHi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
MikeHey Dare_Care,
Thanks for your question, in the testimonial items if you add a website url in the advanced tab:

and add this script to the end of your child theme functions.php file in Appearance ▸ Editor:function custom_testimonial_link_script() { ?> <script> (function($) { $(".avia-testimonial").click(function(){ window.location = $(this).find("a.avia-testimonial-link").attr("href"); return false; }); $(".avia-testimonial").mouseover(function(){ $(this).css("cursor", "pointer"); }); }(jQuery)); </script> <?php } add_action('wp_footer', 'custom_testimonial_link_script');then each testimonial element will have the link and show a pointer on mouse-over

Best regards,
MikeHi,
Glad Rikard could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
MikeMarch 30, 2022 at 1:04 pm in reply to: parralax background images positioned "top" not visible on mobile devices. #1346563Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
MikeHi,
Thank you for your question, this plugin is designed to show at the top of the page, as you see on the WooCommerce Amazon Pay page other users have pointed this out:

with the following script it can be moved down to the payment method area:

Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:function move_amazon_pay_button_script() { ?> <script> (function($) { $('.woocommerce-checkout .wc-amazon-checkout-message').detach().insertBefore('.woocommerce-checkout-payment'); })(jQuery); </script> <?php } add_action('wp_footer', 'move_amazon_pay_button_script');Best regards,
MikeHi,
Glad to hear, the original time was 0.6s, so this 1.9s makes it slower, the higher the number the slower it should be.Best regards,
MikeHi,
Glad to hear, for black body text try this css:#top #av-masonry-1 .av-masonry-entry.isotope-item .entry-content { color: #000; }After applying the css, please clear your browser cache and check.
Best regards,
MikeHi,
I have not tested any of these, or looked for a “Floating Widget” before, but perhaps Floating Button or Side Menu Lite would work. If the player already has an icon you could try to make it sticky alone with Sticky Menu & Sticky Header (WP Sticky Anything)
But it sounds like you might want to ask a freelancer to help you create this with javascript.Best regards,
MikeHi,
Please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:#av-masonry-1 .av-masonry-entry .av-inner-masonry-content { padding: 2px 10px; } #top #av-masonry-1.av-fixed-size .av-masonry-entry.av-masonry-item-no-image .av-inner-masonry-content-pos, #top #av-masonry-1.av-caption-style-overlay .av-masonry-item-with-image .av-inner-masonry-content-pos { vertical-align: top; }For the one that doesn’t show all of the text you will need to reduce the amount of text, it is too much for the space. If you are using the manual excerpt add your “read on” at the end.
Best regards,
MikeHi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
Mike -
AuthorPosts
