Forum Replies Created
-
AuthorPosts
-
Hey frankeee,
Thank you for your patience, unfortunately, your script above can not be modified to show the caption field because only the Title field & Alt field are passed to the published element. If you want to show the alt field instead you can change this linevar imgTitle = $(this).attr('title');
to thisvar imgTitle = $(this).attr('alt');
Best regards,
MikeHey Fabian J.,
Thank you for your patience and the link to your site, when I check your page the last element is centered in all languages when the sort is “ALLE”. What is happening is the css for all of the items is set by javascript and uses absolute positioning, when the sort options are used the other items are still there in the source, just not shown, so it may look like there is one item to the left, but there is really more. Anyways I was able to put together a solution for you with this css:.av-masonry-container:not([id]) #av-masonry-1-item-9759, .av-masonry-container#masonry_id_all_sort #av-masonry-1-item-9759 { left: 0 !important; }
it sets the last item to left zero if no sort is clicked, like on page load, and when the “ALLE” sort is clicked.
Best regards,
MikeHey june,
Thank you for your patience, unfortunately, you can not load a video inside the portfolio gallery instead of an image, I also tried a plugin I found on WordPress Plugins, but it didn’t work either.
As for the location of the portfolio ajax container, it is already at the top of the grid and just not shown until you click an item, so it is not created on the fly, I thought about some jQuery to move it to whatever item was clicked, but that would change the whole structure and probably make a mess of it when it was closed. I recommend using multiple portfolio grid elements on your page, since you are using two columns try only adding two items to each portfolio grid element
and use no pagination or sorting. Unfortunately, this element doesn’t have a post offset so to keep the same items from showing multiple times you should create multiple categories with only two items per category
but then the portfolio ajax container will show right above the items clicked:
Hopefully, this helps you.Best regards,
MikeHi,
Thank you for your patience, and for the login to your site, your issue was with your Quick CSS custom css, I started by removing all of your css and adding it back a little at a time, I found some errors and tried correcting them, in the end these are the two rules that seemed to be cuasing the problem:#header .main_menu { /*background: gold;*/ width: 100%; left: 50%; transform: translateX(-50%); } .av-main-nav-wrap { left: 50%; transform: translateX(-50%); }
Please clear your browser cache and check.
For your information, this was your original css:
/* HEADER */ .navbar, .page-title-section { display: none; } .inner-container { position: relative; height: 150%; width: 100%; margin-top: 0px; } .responsive .logo img { margin: 45px 0 10px 0; } .header-introduction-small .section-head h1 { letter-spacing: 0; font-size: 40px !important; font-weight: 100; opacity: 0.6; padding: 150px 0px 0px 0px; } #top .av-main-nav ul a { width: 100%; height: auto; float: left; text-align: left; line-height: 23px; padding: 8px 15px; font-size: 17px; min-height: 23px; max-width: none; text-decoration: none; font-family: inherit; text-transform: uppercase; } #top #wrap_all .av_header_transparency { background-color: transparent; color: #131313; border-color: #ebebeb; } .header_color .header_bg, .header_color .main_menu ul ul, .header_color .main_menu .menu ul li a, .header_color .pointer_arrow_wrap .pointer_arrow, .header_color .avia_mega_div, .header_color .av-subnav-menu > li ul, .header_color .av-subnav-menu a { background-color: #000; color: #fff; } .av-main-nav ul li:last-child > a { border-bottom-style: solid; border-bottom-width: 0px; } .av-main-nav ul li a { border-right-style: solid; border-right-width: 0px; border-left-style: solid; border-left-width: 0px; } /* BODY */ #top .av_inherit_color a { text-decoration: none; } .html_av-overlay-full #top #wrap_all #av-burger-menu-ul li a { color: #fff; line-height: inherit; font-size: 26px; font-family: 'cormorant-garamond','HelveticaNeue','Helvetica Neue','Helvetica-Neue',Helvetica,Arial,sans-serif; text-transform: uppercase; } #top #wrap_all .error .text_input, #top #wrap_all .error .text_area, #top #wrap_all .error .select { border: 1px solid #F00; } #top #wrap_all .error .input_checkbox_label { color: #F00; } .avia-cookie-consent a.avia_cookie_infolink, .avia-cookie-consent p, .avia-cookie-consent .avia-cookie-consent-button { display: inline-block; vertical-align: middle; font-size: 18px !important; letter-spacing: 0.05em; } .avia-button.avia-size-medium { font-size: 16px; } strong, b { font-weight: normal; } #top .av-flex-placeholder { display: table-cell; width: 1%; } /* FOOTER*/ /* SOCKET*/ #socket .copyright { float: left; font-size: 16px; } .socket_color a, .socket_color .widget_first, .socket_color strong, .socket_color b, .socket_color b a, .socket_color strong a, .socket_color #js_sort_items a:hover, .socket_color #js_sort_items a.active_sort, .socket_color .av-sort-by-term a.active_sort, .socket_color .special_amp, .socket_color .taglist a.activeFilter, .socket_color #commentform .required, #top .socket_color .av-no-color.av-icon-style-border a.av-icon-char, .html_elegant-blog #top .socket_color .blog-categories a, .html_elegant-blog #top .socket_color .blog-categories a:hover { color: #ffffff; font-size: 16px; } .av-main-nav > li > a { padding: 0 23px; font-size: 18px; text-transform: uppercase; font-family: 'cormorant-garamond','HelveticaNeue','Helvetica Neue','Helvetica-Neue',Helvetica,Arial,sans-serif; } @media only screen and (min-width: 780px) { /*In the below code nth-child(x) the value of x should be half the number of total menu items*/ #top #header .av-main-nav li:nth-child(2) { /* Adjust the width of the logo */ margin-right:15%; } #top #header .av-main-nav li:nth-child(3) { /* Adjust the width of the logo */ margin-left:15%; } #header .main_menu { /*background: gold;*/ width: 100%; left: 50%; transform: translateX(-50%); } .av-main-nav-wrap { left: 50%; transform: translateX(-50%); } #header .logo { left: 50%; transform: translateX(-50%); z-index:999; } #header .logo img { top: 20%; transform: translateY(-50%); max-width: 250px; } } /* Top Bar content alignment */ #top #header_meta .container { display: flex; justify-content: center; } #top #header_meta .sub_menu { top:0; } #top #header_meta .sub_menu, #top #header_meta .social_bookmarks { align-self: center; } #top #header_meta .phone-info { order: 2; } #top #header_meta .phone-info span { display: flex; align-items: center; } #top #header_meta .sub_menu { order: 1; } #top #header_meta .social_bookmarks { order: 3; } #avia-menu { width:1300px !important; } #menu-item-551 { margin-left: 0 !important; } /*fabio burger menu */ @media only screen and (max-width: 1199px) { #top #header .av-main-nav > li.menu-item { display: none!important; } #top #header .av-burger-menu-main { cursor: pointer; display: block!important; } .container.av-logo-container .header_main_alternate .container{ left:70%!important; } #avia-menu { float: right; width: auto !important; } }
and this is what you have now:
/* BODY */ #top .av_inherit_color a { text-decoration: none; } .html_av-overlay-full #top #wrap_all #av-burger-menu-ul li a { color: #fff; line-height: inherit; font-size: 26px; font-family: 'cormorant-garamond','HelveticaNeue','Helvetica Neue','Helvetica-Neue',Helvetica,Arial,sans-serif; text-transform: uppercase; } #top #wrap_all .error .text_input, #top #wrap_all .error .text_area, #top #wrap_all .error .select { border: 1px solid #F00; } #top #wrap_all .error .input_checkbox_label { color: #F00; } .avia-cookie-consent a.avia_cookie_infolink, .avia-cookie-consent p, .avia-cookie-consent .avia-cookie-consent-button { display: inline-block; vertical-align: middle; font-size: 18px !important; letter-spacing: 0.05em; } .avia-button.avia-size-medium { font-size: 16px; } strong, b { font-weight: normal; } #top .av-flex-placeholder { display: table-cell; width: 1%; } /* FOOTER*/ /* SOCKET*/ #socket .copyright { float: left; font-size: 16px; } .socket_color a, .socket_color .widget_first, .socket_color strong, .socket_color b, .socket_color b a, .socket_color strong a, .socket_color #js_sort_items a:hover, .socket_color #js_sort_items a.active_sort, .socket_color .av-sort-by-term a.active_sort, .socket_color .special_amp, .socket_color .taglist a.activeFilter, .socket_color #commentform .required, #top .socket_color .av-no-color.av-icon-style-border a.av-icon-char, .html_elegant-blog #top .socket_color .blog-categories a, .html_elegant-blog #top .socket_color .blog-categories a:hover { color: #ffffff; font-size: 16px; } /*fabio burger menu */ @media only screen and (max-width: 1199px) { #top #header .av-main-nav > li.menu-item { display: none!important; } #top #header .av-burger-menu-main { cursor: pointer; display: block!important; } .container.av-logo-container .header_main_alternate .container{ left:70%!important; } #avia-menu { float: right; width: auto !important; } } /* Top Bar content alignment */ #top #header_meta .container { display: flex; justify-content: center; } #top #header_meta .sub_menu { top:0; } #top #header_meta .sub_menu, #top #header_meta .social_bookmarks { align-self: center; } #top #header_meta .phone-info { order: 2; } #top #header_meta .phone-info span { display: flex; align-items: center; } #top #header_meta .sub_menu { order: 1; } #top #header_meta .social_bookmarks { order: 3; } #menu-item-551 { margin-left: 0 !important; } /* HEADER */ .navbar, .page-title-section { display: none; } .inner-container { position: relative; height: 150%; width: 100%; margin-top: 0px; } .responsive .logo img { margin: 45px 0 10px 0; } .header-introduction-small .section-head h1 { letter-spacing: 0; font-size: 40px !important; font-weight: 100; opacity: 0.6; padding: 150px 0px 0px 0px; } #top .av-main-nav ul a { width: 100%; height: auto; float: left; text-align: left; line-height: 23px; padding: 8px 15px; font-size: 17px; min-height: 23px; max-width: none; text-decoration: none; font-family: inherit; text-transform: uppercase; } #top #wrap_all .av_header_transparency { background-color: transparent; color: #131313; border-color: #ebebeb; } .header_color .header_bg, .header_color .main_menu ul ul, .header_color .main_menu .menu ul li a, .header_color .pointer_arrow_wrap .pointer_arrow, .header_color .avia_mega_div, .header_color .av-subnav-menu > li ul, .header_color .av-subnav-menu a { background-color: #000; color: #fff; } .av-main-nav ul li:last-child > a { border-bottom-style: solid; border-bottom-width: 0px; } .av-main-nav ul li a { border-right-style: solid; border-right-width: 0px; border-left-style: solid; border-left-width: 0px; } .av-main-nav > li > a { padding: 0 23px; font-size: 18px; text-transform: uppercase; font-family: 'cormorant-garamond','HelveticaNeue','Helvetica Neue','Helvetica-Neue',Helvetica,Arial,sans-serif; } /* HEADER */ .navbar, .page-title-section { display: none; } .inner-container { position: relative; height: 150%; width: 100%; margin-top: 0px; } .responsive .logo img { margin: 45px 0 10px 0; } .header-introduction-small .section-head h1 { letter-spacing: 0; font-size: 40px !important; font-weight: 100; opacity: 0.6; padding: 150px 0px 0px 0px; } #top .av-main-nav ul a { width: 100%; height: auto; float: left; text-align: left; line-height: 23px; padding: 8px 15px; font-size: 17px; min-height: 23px; max-width: none; text-decoration: none; font-family: inherit; text-transform: uppercase; } #top #wrap_all .av_header_transparency { background-color: transparent; color: #131313; border-color: #ebebeb; } .header_color .header_bg, .header_color .main_menu ul ul, .header_color .main_menu .menu ul li a, .header_color .pointer_arrow_wrap .pointer_arrow, .header_color .avia_mega_div, .header_color .av-subnav-menu > li ul, .header_color .av-subnav-menu a { background-color: #000; color: #fff; } .av-main-nav ul li:last-child > a { border-bottom-style: solid; border-bottom-width: 0px; } .av-main-nav ul li a { border-right-style: solid; border-right-width: 0px; border-left-style: solid; border-left-width: 0px; } @media only screen and (min-width: 766px) { #top #header .av-main-nav li:nth-child(2) { /* Adjust the width of the logo */ margin-right:15%; } #top #header .av-main-nav li:nth-child(3) { /* Adjust the width of the logo */ margin-left:15%; } #header .logo img { top: 20%; transform: translateY(-50%); max-width: 250px; } #header .logo { left: 50%; transform: translateX(-50%); z-index:999; } } @media only screen and (min-width: 1200px) { #avia-menu { width:1200px !important; } }
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 Reut Rachel,
Thank you for your patience and for the login, you were missing a little code pointing to the image you wanted to use in the Quick CSS field, so I added it for you, but I was not sure which image to use so I guessed, you can check and change if you want. If you still have problems please tell us which image to use and I will change.
Please clear your browser cache and check.Best regards,
MikeHi,
Thank you for your patience, please try this script instead:function add_custom_target(){ ?> <script> (function($){ $('.av-masonry-container a ').attr('target','_blank'); $('.av-masonry-load-more').click(function(){ setTimeout(function () { $('.av-masonry-container a ').attr('target','_blank'); }, 1000); }); }(jQuery)); </script> <?php } add_action('wp_footer', 'add_custom_target');
it will run on load and on clicking of the “load more” button after waiting 1 second for the elements to be added.
Best regards,
MikeHi,
Sorry for the late reply and thank you for your patience and the link to your site. I believe the question now is:Is there a way to make the menu and logo shrink to fit the screen before it finally switches to tablet/mobile menu?
and I see the switch occurs at 1449px, but at 1450px the logo and menu both seem to fit fine, please see the screenshot in the Private Content area.
There is a min-width of 90px that you could remove that would help with the smaller menu items:.av_seperator_big_border .av-main-nav > li > a { min-width: 0 !important; }
see second screenshot. There is also 13px of padding, but I don’t think you will want to remove that.
What did you have in mind?Best regards,
MikeJune 26, 2021 at 11:20 pm in reply to: Gallery displaying images vertically instead images with thumbnails #1307544Hi,
Thank you for your patience and for the link to your site, you could try this script that will count the number of thumbnails in each thumbnail gallery and add a class to that div that represents how many thumbnails there are. Then you could use some css for that class that will set the width for you.
Try adding this code to the end of your functions.php file in Appearance > Editor:function count_thumbs_script() { ?> <script> (function($) { var matched = $(".avia-gallery-thumb a"); $('.avia-gallery-thumb').addClass('thumbs-' + matched.length); }(jQuery)); </script> <?php } add_action('wp_footer', 'count_thumbs_script');
This will add the class thumbs-6 if there are six thumbnails on the page.
For the css note that I specifically targeted your single-hotels pages so other pages would not run the script and cause possible conflicts. Also note that this css rule only sets the width for six thumbnails, you will need to add more for other numbers:#top.single-hotels .avia-gallery-thumb.thumbs-6 > a > img { width: 16.66% !important; }
Hope this helps.
Best regards,
MikeHi,
Thank you for your patience, on the demo the portfolio grid element is set to “open a preview (aka AJAX Portfolio)” but in comparing your page I notice that your portfolio item doesn’t link to a portfolio page, it is onlyhttp://
and the title doesn’t have a link either. In this screenshot your page is on to and my test page is below.
I believe the issue is that for your portfolio items you have set a custom link in the Overwrite Portfolio Link setting
Please try changing this back to the default setting.Best regards,
MikeJune 26, 2021 at 9:26 pm in reply to: Change layout / number of columns on blog category pages #1307540Hey sarawh,
Sorry for the late reply and thank you for your patience, to change the archive pages to two columns please try going to\wp-content\themes\enfold\archive.php
on line 59 look for'columns' => 3;
and change to 2
You can copy the modified file to your child theme if you wish.Best regards,
MikeHi,
Thank you for the feedback, so originally I thought this was only occurring on the iPhone, but I tested on a desktop Mac with Safari and saw your issue in which the “h1 strong” tags & the button labels are set to display: inline where they should be set to block in order to see them. I tried to reproduce this on my test site but couldn’t, so this points to something on your site.
I also note that your “borlabs cookie” plugin is still activated and all of the text in its popup is hidden, please try disabling it.
Please include admin login in the Private Content area so I can investigate further.Best regards,
MikeJune 26, 2021 at 7:09 pm in reply to: Fullwidth Submenu doesnt allow clicking middle nav items on mobile #1307528Hi,
Thank you for your patience, I investigated this further as it pertains to the Fullwidth Submenu element, and currently if a top-level item has a sub-menu then in mobile the first click opens the sub-menu and the second click goes to that items link, but items in the top-level sub-menu don’t behave this way. I reviewed the script for this and was able to extend it for the second level sub-menus, Try adding this code to the end of your functions.php file in Appearance > Editor:function fullwidth_submenu_mobile_script() { ?> <script> (function($){ $('.avia_mobile').on('click', '.av-menu-mobile-disabled li ul.av-visible-mobile-sublist li a', function() { var current = $(this); var list_item = current.siblings('ul'); if(list_item.length) { if(list_item.hasClass('av-visible-mobile-sublist')) { } else { $('.av-visible-mobile-sublist').removeClass('av-visible-mobile-sublist'); list_item.addClass('av-visible-mobile-sublist'); return false; } } }); }(jQuery)); </script> <?php } add_action('wp_footer', 'fullwidth_submenu_mobile_script');
I tested this on your /nfc/ page by injecting the script via the browser dev tools mobile simulation, and what I noticed is the second level sub-menus items were off the screen at 425px because the menu items are 200px wide, but your text length will fit in a 100px menu so I would also recommend this css:
@media only screen and (max-width: 767px) { #top .av-subnav-menu > li ul { width: 100px !important; } #top .av-subnav-menu > li ul ul { left: 98px !important; } }
Best regards,
MikeHi,
Sorry for the late reply and thank you for your patience. Unfortunately, I didn’t find a way to show the video controls on a background video, but I did come up with this css to make your video element show fullscreen for mobile.
Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:@media only screen and (max-width: 767px) { .responsive #top.home #wrap_all #av_section_1 > .container { width: 100%!important; max-width: 100%!important; } .responsive #top.home #wrap_all #av_section_1 > .container > .content { padding: 0px !important; } .responsive #top.home #wrap_all #av_section_1 > .container > .content > div > div > .avia-video { margin-bottom: 0 !important; } }
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,
MikeHi,
Thank you for the feedback, in order to do this you will need several different css rules. Please try these for sizes up to 1024px:@media only screen and (max-width: 374px) { #top.home #home-content-slider { background-size: contain !important; } #top.home #home-content-slider > .container { max-height: 140px !important; } #top.home #home-content-slider > .container > .content { padding: 0 !important; } #top.home #home-content-slider h3.entry-title { font-size: 14px !important; } #top.home #home-content-slider .groot { padding: 10px; } } @media only screen and (min-width: 375px) and (max-width: 480px) { #top.home #home-content-slider { background-size: cover !important; } #top.home #home-content-slider > .container { height: 185px !important; } #top.home #home-content-slider h3.entry-title { font-size: 24px !important; } #top.home #home-content-slider > .container > .content { padding: 0 !important; } } @media only screen and (min-width: 481px) and (max-width: 767px) { #top.home #home-content-slider { background-size: cover !important; } #top.home #home-content-slider > .container { height: 300px !important; } } @media only screen and (min-width: 767px) and (max-width: 988px) { #top.home #home-content-slider { background-size: cover !important; } #top.home #home-content-slider > .container { height: 345px !important; } } @media only screen and (min-width: 989px) and (max-width: 1024px) { #top.home #home-content-slider { background-size: cover !important; } #top.home #home-content-slider > .container { height: 420px !important; } }
Then clear your browser cache and check.
Best regards,
MikeHi,
Sorry, there is no “zoom in-zoom out” web function, this is only a local browser function.Best regards,
MikeHi,
Thank you for your patience, I have tested two of your video pages with Chrome, Firefox & Edge and they are not auto-playing, I assume that you do not have the player option: Enable Autoplay set, because in my test with this option set the video will autoplay, but you will also need to note the comment next to the setting:Check if you want to enable video autoplay when page is loaded. Videos will be muted by default.
This is to follow the recommended browser standards and good practices, you can override this by editing the file:
\wp-content\themes\enfold\config-templatebuilder\avia-shortcodes\video\video.php
on line 425 change $video_mute to zero:
You can see on my test page that this works, but I’m not sure that this will work for Safari, nor can we force it to work in all browsers in all cases, it is considered bad practice.
If this works for you and you wish to add it to your child theme, create a directory/shortcodes/video/
and copy the edited video.php there.Best regards,
MikeHi,
Very good then, try using a <br> befor the link or in the link like this:
<a class="tubzee-phone-mobile" href="tel:5555555"><br>555-5555</a>
Best regards,
MikeHi,
Glad to hear that helped, your last screenshot didn’t work please try again, when I look on your homepage the Vimeo video has controls, please see the screenshot in the Private Content area.Best regards,
MikeHi,
Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:@media only screen and (max-width: 1024px) { #top.home #home-content-slider { background-position: 85% !important; background-size: cover !important; } }
Then clear your browser cache and any cache plugin, and check.
Best regards,
MikeJune 23, 2021 at 11:44 am in reply to: Fullwidth Submenu doesnt allow clicking middle nav items on mobile #1307118Hi,
Thank you for your patience and for the login, as I understand the current issue, on mobile your homepage content slider titles are off the screen:
this is due to this css in your <strong style=’color:#000′>Quick CSS:
To correct I wrapped with this media query rule:@media only screen and (min-width: 1440px) { ... }
and now it is behaving correctly for mobile:
Please clear your browser cache and check, and feel free to fine tune to your needs.Best regards,
MikeHi,
After testing please let us know if this helped, hopefully, this will also help direct future users with this issue.Best regards,
MikeHi,
Please include an admin login in the Private Content area so we can login and check, my guess is that you do not have the Enfold Theme Options > Theme Options > Frontpage Settings set correctly:
or that you are relying on the WordPress > Settings > Reading > Your homepage displays > A static page option:
if so please un-select this option by choosing the -Select- choice at the top of the drop down & choosing the Your latest posts option and saving.
Then clear your browser cache and any cache plugin, and check.
If this doesn’t help also try disabling all of your plugins and checking again.Best regards,
MikeHi,
Your welcome, 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,
For mobile please try this:@media only screen and (max-width: 840px) { #top.home #av_section_1 > .container > .content { vertical-align: bottom; } #top.home #av_section_1 > div > main > div > div > div > .avia-builder-el-2 { margin-bottom: 0; } }
To have something more universal you will need to add some custom classes to the elements, it looks like your structure is:
color section > 3/5 column > text block element (second of two) > embedded image
Please add a different custom class to each one of these, and remove the css I’ve posted above and I will re-write using your new custom classes. Also please post the custom classes you have added to each of these elements so I can find them easier.Best regards,
MikeHi,
Thank you for the feedback, but please ensure that your theme is up to date (v4.8.3) and you are not using the function above.
I have changed my example to Only Excerpt & Defined Custom Link and this continues to work:
Please try this and if you continue to have trouble please include an admin login in the Private Content area with a link to your page so we can examine.Best regards,
Mike -
AuthorPosts