Forum Replies Created
-
AuthorPosts
-
Hi,
No I don’t mean add that code, your page has that javascript error, try disabling this code from your site, I think it is in your Simple Custom CSS and JS plugin.
For the one you bought, you would install it as a pluginBest regards,
MikeHey Stefan,
Some elements have animation settings move them into the screen as you scroll:
Our parallax demo shows some of these, try creating a test site and import this demo so you can review the setting and experiment.
Please note that the Enfold js is not from the theme so the theme has different options.Best regards,
MikeHi,
Thanks for the feedback, the issue is that the example link is using a normal menu and you are using a mobile burger menu for your desktop, these are two different menus.
Whe I checked your site I found no “Book Now” button so I created a new one for you, and added the required custom class menu-item-avia-special cta which was disabled on your site, and then I added this css:.html_burger_menu_active #header .avia-menu .menu-item-avia-special.cta { display: block !important; }
and Guenni007’s solution works great, thanks for sharing Guenni007!
you will need to adjust the button url as I didn’t know the like you wanted.Best regards,
MikeHi,
The WooCommerce Products by Attributes & Variations looks like it has a variation title field
which would be the easiest way, but make sure that you ask them if you can try it first, because some addons don’t work properly with Enfold. Some plugins have a free version on WordPress Plugins so I would also check there.
As for the script I posted above, my variation in my screenshot looks different that yours so perhaps that is a issue, and your site has a javascript error in your Simple Custom CSS and JS fore the search form, try disabling it and check again
document.getElementsByClassName('search-form')[0].innerHTML += '<input type="hidden" name="post_type" value="product">';
Best regards,
MikeHi,
To change this so it only works on screens larger than 768px I changed the code to this, which also adds some body margin so it won’t overlap the page content, and I make the menu items closer and I adjusted the social icons, please check.function create_a_sidebar_header_with_burger_menu() { ?> <script> document.addEventListener('DOMContentLoaded', function() { // Check if the HTML element has the "wp-toolbar" class if (document.documentElement.classList.contains('wp-toolbar')) { return; // Exit the script if "wp-toolbar" class is found } // Check if the screen width is larger than 768px if (window.innerWidth < 768) { return; // Exit the script if the screen width is less than 768px } // Create the main toolbar div const toolbar = document.createElement('div'); toolbar.id = 'right-toolbar'; // Create the inner content divs for (let i = 1; i <= 3; i++) { const contentDiv = document.createElement('div'); contentDiv.className = 'toolbar-content'; contentDiv.id = 'content' + i; toolbar.appendChild(contentDiv); } // Append the toolbar to the body document.body.appendChild(toolbar); // Add the CSS styles const style = document.createElement('style'); style.innerHTML = ` #right-toolbar { position: fixed; right: 0; top: 0; width: 100px; height: 100%; background-color: #f8f8f8; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 20px 0; box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5); z-index: 999; } #content1 .main_menu { position: relative; } .toolbar-content { width: 80px; height: 100px; background-color: #f8f8f8; margin-bottom: 10px; border-radius: 5px; display: flex; justify-content: center; align-items: start; } .toolbar-content:last-child { margin-bottom: 0; } .rotated-logo { transform: rotate(90deg); transform-origin: center; } #content2 .logo { float: none; position: relative; left: unset; height: unset; } #content3 .social_bookmarks { /*transform: rotate(90deg);*/ transform-origin: center; } .html_header_top.html_header_sticky #main { padding-top: 0; } #av_section_1 { height: 100vh; } #menu-item-shop,#menu-item-search { display: none; } #top #content1 .av-small-burger-icon { transform: scale(1); } .html_cart_at_menu.html_main_nav_header #top .main_menu .menu>li:last-child { padding-right: 0; margin-right: 0; } .avia-menu.av_menu_icon_beside { padding-right: 0; margin-right: 0; border-right-width: 0; border-right-style: none; } .html_av-overlay-side-classic #top .av-burger-overlay li a { border-bottom-style: none; } @media only screen and (min-width: 768px) { .responsive #top #content1 .av-main-nav .menu-item-avia-special.av-burger-menu-main { display: block!important; } #top #content1 .av-main-nav > li.menu-item { display: none!important; } .html_av-overlay-side #top .av-burger-overlay li { margin: 0; height: 50px; } #content1 .av-main-nav-wrap { float: right; } } #header { visibility: hidden; } body { margin-right: 100px } #content3 { height: 300px; } #top .social_bookmarks li { display: inline-block; clear: both; margin-bottom: 10px; } `; document.head.appendChild(style); // Move the logo to #content2 and rotate it const logo = document.querySelector('.avia-standard-logo'); if (logo) { const content2 = document.getElementById('content2'); content2.appendChild(logo); logo.classList.add('rotated-logo'); } // Move the menu to #content1 const menu = document.querySelector('.main_menu'); if (menu) { const content1 = document.getElementById('content1'); content1.appendChild(menu); } // Move the social bookmarks to #content3 const socialBookmarks = document.querySelector('.social_bookmarks'); if (socialBookmarks) { const content3 = document.getElementById('content3'); content3.appendChild(socialBookmarks); } }); </script> <?php } add_action( 'wp_footer', 'create_a_sidebar_header_with_burger_menu', 99 );
Best regards,
MikeHi,
When I check it is outside the burger menu:
where did you want it to show? Perhaps a mockup would help.Best regards,
MikeHey Aubin,
You will need a addon to do this, see this documentation for this one. This article points to some other plugins and options.
I found this code in this threadfunction custom_script() { ?> <script> jQuery( document ).ready( function( $ ) { var title_text = $( '.product-type-variable .product_title' ).text(); // get default title function add_variation_txt_to_title() { var new_title_text = ''; $( '.variations select' ).each( function() { new_title_text += ' ' + $( this ).find( ':selected' ).val(); // collect all variation selected <options> }) $( '.product-type-variable .product_title' ).text( title_text + new_title_text ); // set new title } add_variation_txt_to_title(); // call on load $( '.variations select' ).change( function() { // call on <select >change add_variation_txt_to_title(); }) }) </script> <?php } add_action( 'wp_footer', 'custom_script', 99 );
and it sort of works on my test site:
so give it a try. PLease note that not all plugins work with Enfold so you will need to test different plugin options to find one that works with your variable products the way you want.Best regards,
MikeHi,
Sorry I was thinking about the sidebar and not the sidebar header. For the sidebar header menu items, Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:add_filter('wp_nav_menu_items', 'do_shortcode'); function go_back_shortcode() { return '<a href="javascript:history.back()" class="go-back-link">Go Back</a> <script> document.addEventListener("DOMContentLoaded", function() { var goBackLink = document.querySelector(".go-back-link"); if (goBackLink) { goBackLink.parentElement.classList.add("go-back-parent"); } }); </script>'; } add_shortcode('go_back', 'go_back_shortcode'); function custom_go_back_css() { echo ' <style> .go-back-parent a:not(.go-back-link) { padding: 0 !important; margin: 0 !important; } </style> '; } add_action('wp_head', 'custom_go_back_css');
Then in the menu item use a hash tag “#” as the URL and add this shortcode [go_back] to the title:
Then on the frontend you will have a working “Go Back” menu link:
Best regards,
MikeHi,
When I check the Oshine gallery: https://oshinewptheme.com/v17/ it shows the same images that are already seen on the page in the lightbox.
Please check again.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 reqonsult,
To find a different icon code go to your icon element and hover over the icons that you want to use and the chrcode will show, always drop the first “U”, so the code that you will use for this screenshot will be \e804
then adjust this css to suit:.main_color .image-overlay.overlay-type-extern .image-overlay-inside:before { content: "\e804"; font-family: "entypo-fontello"; color: var(--enfold-main-color-constant-font); background-color: var(--enfold-main-color-primary); }
Best regards,
MikeJune 23, 2024 at 3:43 pm in reply to: Video in the header background starts shortly after the image appears #1457129Hey reqonsult,
It looks like that is how long it takes your server to serve the video. I see your site also has many CORS errors for your fonts before the video loads, this could be slowing your site down as it has the also deal with these. It looks like you may have built the site on a temp domain and the fonts are still loading from there, try checking this.
But nonetheless the video loads quickly when I check, if you want to hide the fallback image on desktop for this one page try this css:@media only screen and (min-width: 768px) { #top.page-id-94 .avia-slideshow .avia-slide-wrap { background-image: none !important; } }
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,
MikeHey reqonsult,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:.avia-fullscreen-slider .avia_loading_icon { background: rgba(0, 0, 0, 0); }
After applying the css, please clear your browser cache and check.
Best regards,
MikeHey reqonsult,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:#top #aufeinenblick .custom-color-heading a { text-decoration: none; }
After applying the css, please clear your browser cache and check.
Best regards,
MikeHey lelouxwebdesign,
Thanks for the link to your site, to change the way sub-menu items are shown in the sidebar menu from popping out to the right like this:
to droping down below like this:
Add this code to the end of your child theme functions.php file in Appearance ▸ Editor:function make_submenu_sidebar_menu_items_drop_down_on_click() { ?> <script> (function($){ $(document).ready(function(){ $('.html_header_sidebar.html_header_left #avia-menu > li.menu-item-has-children').find('ul').hide(); $('.html_header_sidebar.html_header_left #avia-menu > li.menu-item-has-children').click(function () { $('.html_header_sidebar.html_header_left #avia-menu > li.menu-item-has-children').not(this).find('ul').hide(); $(this).find('ul').toggle().toggleClass('is-visible'); }); }); })(jQuery); </script> <?php } add_action( 'wp_footer', 'make_submenu_sidebar_menu_items_drop_down_on_click', 99 );
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
and this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:.html_header_sidebar.html_header_left .av-main-nav ul { left: 0; } .html_header_sidebar.html_header_left .av-main-nav ul { position: relative; } .html_header_sidebar.html_header_left ul.sub-menu.is-visible { opacity: 1 !important; visibility: visible !important; }
Please note that this works “on click” and not “on hover”, the click is needed to close the menu and touch devices like tablets don’t have a “on hover” so the menu would not open for them. Also your parent menu item will need to only have a hash mark and not a link to a page otherwise it will navigate to the page instead of opening the menu.
Best regards,
MikeHey lelouxwebdesign,
In your sidebar add a Custom HTML widget with this code:
<a href="javascript:history.back()">Go Back</a>
then in the post sidebar you will see a “Go Back” link
you can style it as you wish and clicking it will send the visitor to the last page they viewed.
If you want to use a button, you can create a buton with the shortcode wand and use this as the manual link:javascript:history.back()
[av_button label='Go Back' icon_select='yes' icon='ue831' font='entypo-fontello' button_type='' link='manually,javascript:history.back()' link_target='' download_file='https://' attachment='' attachment_size='' downloaded_file_name='' size='large' position='center' label_display='' title_attr='' size-text='' av-desktop-font-size-text='' av-medium-font-size-text='' av-small-font-size-text='' av-mini-font-size-text='' margin='' margin_sync='true' padding='' padding_sync='true' av-desktop-margin='' av-desktop-margin_sync='true' av-desktop-padding='' av-desktop-padding_sync='true' av-medium-margin='' av-medium-margin_sync='true' av-medium-padding='' av-medium-padding_sync='true' av-small-margin='' av-small-margin_sync='true' av-small-padding='' av-small-padding_sync='true' av-mini-margin='' av-mini-margin_sync='true' av-mini-padding='' av-mini-padding_sync='true' color_options='' color='theme-color' custom_bg='#444444' custom_font='#ffffff' btn_color_bg='theme-color' btn_custom_grad_direction='vertical' btn_custom_grad_1='#000000' btn_custom_grad_2='#ffffff' btn_custom_grad_3='' btn_custom_grad_opacity='0.7' btn_custom_bg='#444444' btn_color_bg_hover='theme-color-highlight' btn_custom_bg_hover='#444444' btn_color_font='theme-color' btn_custom_font='#ffffff' btn_color_font_hover='white' btn_custom_font_hover='#ffffff' border='' border_width='' border_width_sync='true' border_color='' border_radius='' border_radius_sync='true' box_shadow='' box_shadow_style='0px,0px,0px,0px' box_shadow_color='' animation='' animation_duration='' animation_custom_bg_color='' animation_z_index_curtain='100' hover_opacity='' sonar_effect_effect='' sonar_effect_color='' sonar_effect_duration='1' sonar_effect_scale='' sonar_effect_opac='0.5' css_position='' css_position_location=',,,' css_position_z_index='' av-desktop-css_position='' av-desktop-css_position_location=',,,' av-desktop-css_position_z_index='' av-medium-css_position='' av-medium-css_position_location=',,,' av-medium-css_position_z_index='' av-small-css_position='' av-small-css_position_location=',,,' av-small-css_position_z_index='' av-mini-css_position='' av-mini-css_position_location=',,,' av-mini-css_position_z_index='' id='' custom_class='' template_class='' av_uid='' sc_version='1.0' admin_preview_bg='']
Best regards,
MikeJune 23, 2024 at 12:50 pm in reply to: Page Changes not visible with Enfold/AVIA in Combination with WordPress API #1456956Hi,
Thank you for your mockup, I didn’t find a way to do this so I opened a Feature Request for you.
You can subscribe to it here to track it, or if you have further input for it.
Thank you for your patience and for using Enfold.Best regards,
MikeHi,
This is quite tricky but perhaps this might get you started and you can adjust further to suit. Using a Menu And Logo Position of Logo left & menu right, & a sticky header with no topbar – If you are not using a child theme you could use the WP Code plugin then add a new snippet, in the top right corner use the PHP snippet as the code type:
and ensure that it is activated, then add this code and save.function create_a_sidebar_header_with_burger_menu() { ?> <script> document.addEventListener('DOMContentLoaded', function() { // Check if the HTML element has the "wp-toolbar" class if (document.documentElement.classList.contains('wp-toolbar')) { return; // Exit the script if "wp-toolbar" class is found } // Create the main toolbar div const toolbar = document.createElement('div'); toolbar.id = 'right-toolbar'; // Create the inner content divs for (let i = 1; i <= 3; i++) { const contentDiv = document.createElement('div'); contentDiv.className = 'toolbar-content'; contentDiv.id = 'content' + i; toolbar.appendChild(contentDiv); } // Append the toolbar to the body document.body.appendChild(toolbar); // Add the CSS styles const style = document.createElement('style'); style.innerHTML = ` #right-toolbar { position: fixed; right: 0; top: 0; width: 100px; height: 100%; background-color: #f8f8f8; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 20px 0; box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5); z-index: 999; } #content1 .main_menu { position: relative; } .toolbar-content { width: 80px; height: 100px; background-color: #f8f8f8; margin-bottom: 10px; border-radius: 5px; display: flex; justify-content: center; align-items: center; } .toolbar-content:last-child { margin-bottom: 0; } .rotated-logo { transform: rotate(90deg); transform-origin: center; } #content2 .logo { float: none; position: relative; left: unset; height: unset; } #content3 .social_bookmarks { transform: rotate(90deg); transform-origin: center; } .html_header_top.html_header_sticky #main { padding-top: 0; } #av_section_1 { height: 100vh; } #menu-item-shop,#menu-item-search { display: none; } #top #content1 .av-small-burger-icon { transform: scale(1); } .html_cart_at_menu.html_main_nav_header #top .main_menu .menu>li:last-child { padding-right: 0; margin-right: 0; } .avia-menu.av_menu_icon_beside { padding-right: 0; margin-right: 0; border-right-width: 0; border-right-style: none; } .html_av-overlay-side-classic #top .av-burger-overlay li a { border-bottom-style: none; } @media only screen and (min-width: 768px) { .responsive #top #content1 .av-main-nav .menu-item-avia-special.av-burger-menu-main { display: block!important; } #top #content1 .av-main-nav > li.menu-item { display: none!important; } #content1 .av-main-nav-wrap { float: right; } } #header { visibility: hidden; } `; document.head.appendChild(style); // Move the logo to #content2 and rotate it const logo = document.querySelector('.avia-standard-logo'); if (logo) { const content2 = document.getElementById('content2'); content2.appendChild(logo); logo.classList.add('rotated-logo'); } // Move the menu to #content1 const menu = document.querySelector('.main_menu'); if (menu) { const content1 = document.getElementById('content1'); content1.appendChild(menu); } // Move the social bookmarks to #content3 const socialBookmarks = document.querySelector('.social_bookmarks'); if (socialBookmarks) { const content3 = document.getElementById('content3'); content3.appendChild(socialBookmarks); } }); </script> <?php } add_action( 'wp_footer', 'create_a_sidebar_header_with_burger_menu', 99 );
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
This should give you a sidebar header with the burger menu, logo & social icons like this:
and the burger menu should open like this:
It probably needs some more css, but perhaps you can give it a try.Best regards,
MikeHey Rolf,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:@media only screen and (max-width: 767px) { .responsive #top .logo.avia-standard-logo { left: 37%; position: relative; } } @media only screen and (min-width: 768px) and (max-width: 989px) { .responsive #top .logo.avia-standard-logo { left: 43%; position: relative; } } @media only screen and (min-width: 1200px) { .logo.avia-standard-logo { left: 20%; } }
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,
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 jenscasper,
On the page that you linked to I see the javascript error:Uncaught Error: Syntax error, unrecognized expression: #F%C3%B6rderverein
I believe that this is due to your menu links using `accents’ over the letters in the link URL: Förderverein
it is ok for the text in the link to use this, but not the link because the HTML code for the `accents’ is like this: #F%C3%B6rdervereinBest regards,
MikeHi,
Thank you for the link to your site, WordPress shows the images based on the attachment ID, it looks like all of your images use the same attachment ID attachment=’990′. perhaps you copy & paste the same code for each one, which is this one:
please review your image shortcode and correct the attachment IDs or remove the attachment=’990′ from each one, I did the first one for you, please see the screenshot in the Private Content area.Best regards,
MikeHey Daniela,
I recommend creating a dotsmenu as described in our documentation and create the simple custom menu in the element:
with the custom class dotsmenu:
then to use entypo-fontello icons, go to your icon element and hover over the icons that you want to use and the chrcode will show, always drop the first “U”, so the code that you will use for this screenshot will be \e804
Then use this css, at teh bottom you will see the six icons for the six menu items in my example, add more if you wish:#top .dotsmenu { background: transparent; position: fixed!important; right: 10px; top: 50%!important; transform: translateY(-50%); border: none!important; max-width: 30px!important; } #top .dotsmenu .av-subnav-menu > li { display: inline!important; margin: 10px !important; } #top .dotsmenu .av-subnav-menu li a { max-width: 40px; max-height:45px; border-radius:0; overflow:hidden; padding: 0 !important; border: none!important; background: transparent; } #top .dotsmenu .av-subnav-menu li a .avia-bullet { display: none !important; } #top .dotsmenu .av-subnav-menu li a .avia-menu-text { visibility: hidden; } @media only screen and (max-width: 767px) { .responsive #top .dotsmenu { background: transparent; position: fixed!important; right: 0; top: 50%!important; transform: translateY(-50%); }} #top .dotsmenu .av-subnav-menu li a:before { display: inline-block !important; font-size:30px; color: #fff; } #top .dotsmenu .av-subnav-menu li:nth-child(1) a:before { content: '\e804'; font-family: 'entypo-fontello'; } #top .dotsmenu .av-subnav-menu li:nth-child(2) a:before { content: '\e82a'; font-family: 'entypo-fontello'; } #top .dotsmenu .av-subnav-menu li:nth-child(3) a:before { content: '\e83d'; font-family: 'entypo-fontello'; } #top .dotsmenu .av-subnav-menu li:nth-child(4) a:before { content: '\e8b3'; font-family: 'entypo-fontello'; } #top .dotsmenu .av-subnav-menu li:nth-child(5) a:before { content: '\e8d2'; font-family: 'entypo-fontello'; } #top .dotsmenu .av-subnav-menu li:nth-child(6) a:before { content: '\e8b9'; font-family: 'entypo-fontello'; }
Best regards,
MikeHi,
Thank you for your patience and the link to your page, I see that you are using the Widget Area element to show widgets in your three columns:
and each of the widgets are showing Insert Page element to show the content of a page
in this case the widget option Inline should be used:
I set this for you and now the columns show correctly:
I tried this for your other widgets at the bottom of the page, but your first one is calling kolom-sponsor but this doesn’t seem to be valid, perhaps this is a old page that was renamed or deleted?
Best regards,
MikeHey Thomas,
Thank you for your patience the Enfold customizations for woocommerce are in\enfold\config-woocommerce\config.php
.Best regards,
MikeHey LesleyJean,
Thank you for your patience, unfortunately my research finds that the EventOn plugin doesn’t work well with Enfold. Unfortunately this is not one of our supported plugins, we suggest trying the Events Calendar plugin.
We are not able to support all plugins and our support scope is limited.
If you would like to request support for this plugin as a feature, the Dev Team has opened a new Github Feature Request for users to place requests and follow them as the Dev Team reviews them.
Thank you for your patience and understanding.Best regards,
MikeHey Marco,
Thank you for your patience and the link to your page, when the tribe event pagination is clicked the page reloads with the new content, this is why the page shows at the top like any new page would when you use a link to a different page.
To get the scroll position when the pagination button is clicked and then after the page reloads go back to that position add this code to the end of your child theme functions.php file in Appearance ▸ Editor:function adjust_scroll_position_when_tribe_events_pagination_is_used() { ?> <script> document.addEventListener('DOMContentLoaded', function () { function storeScrollPosition() { localStorage.setItem('scrollPosition', window.scrollY); } function scrollToStoredPosition() { const scrollPosition = localStorage.getItem('scrollPosition'); if (scrollPosition) { window.scrollTo({ top: parseInt(scrollPosition, 10), behavior: 'smooth' }); localStorage.removeItem('scrollPosition'); } } const paginationLinks = document.querySelectorAll('.pagination-tribe_events a'); paginationLinks.forEach(link => { link.addEventListener('click', storeScrollPosition); }); scrollToStoredPosition(); }); </script> <?php } add_action( 'wp_footer', 'adjust_scroll_position_when_tribe_events_pagination_is_used', 99 );
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
Best regards,
Mike -
AuthorPosts