Deat Team,
I just updated the Theme to its latest version and I got a huge problem with my Data-Tables.
The content has lost the responsivness and everything is on top of each other.
You can have a look here:
https://drive.google.com/folderview?id=0B7Zpr2qxMSxiaFdhS0NTdFcxcDA&usp=sharing
or live:
I would appreciate any fast response, since the site is online.
Best Regards
Asterios
Hey edzetrading,
Thank you for contacting us :)
It a nice and simple layout it can be easily achieved in Enfold using colorsection.
Set it’s height to 100% and add a background image with stretch to fit as cover image.
Add your text inside it.
If you like to copy the short code into your page please enable debug mode http://kriesi.at/documentation/enfold/enable-advanced-layout-builder-debug/
And add the below shortcode to the text area that appears below the advanced layout builder
[av_section min_height='100' min_height_px='500px' padding='default' shadow='no-shadow' bottom_border='no-border-styling' id='' color='main_color' custom_bg='' src='http://localhost/_proj/enfold/wp-content/uploads/2015/03/people_town-1500x430.jpg' attachment='577' attachment_size='featured' attach='scroll' position='top left' repeat='stretch' video='' video_ratio='16:9' overlay_opacity='0.5' overlay_color='' overlay_pattern='' overlay_custom_pattern='']
[av_textblock size='' font_color='' color='']
<p class="entry-content" style="text-align: center;"><strong>Pagina niet gevonden</strong></p>
<section class="404_recommendation">
<p style="text-align: center;">Helaas is de door u opgevraagde pagina niet (meer) bereikbaar. Wij verontschuldigen ons voor dit ongemak. De informatie is misschien verwijderd, het internetadres kan gewijzigd zijn, of u heeft een fout gemaakt bij het intypen van het internetadres. Om de pagina alsnog te vinden, kunt u het volgende proberen:</p>
<p style="text-align: center;">Controleer of u het internetadres juist heeft gespeld
Gebruik de Back of Vorige knop van uw browser om terug te gaan naar de laatst bezochte pagina
Gebruik de zoekfunctie om de gewenste pagina te vinden
</section>
[/av_textblock]
[/av_section]
Best regards,
Vinay
Hi,
I try to put a new social profile for my website, i put this instructions in fonctions.php
// Add tripadvisor social profile
function avia_add_custom_social_icon($icons) {
$icons[‘Tripadvisor’] = ‘Tripadvisor’;
return $icons;
}
add_filter(‘avf_social_icons_options’,’avia_add_custom_social_icon’, 10, 1);
and i put this following instructions in the quick CSS
#top #wrap_all .av-social-link-kriesi a:before{
content: “”;
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
background: url(http://hydrospeed-ariege.fr/wp-content/themes/enfold/images/Tripadvisor.png) no-repeat center center;
background-size: contain;
}
it doesn’t work
can you help me please.
PS (sorry for my English:)
Hi,
for a customer i develop a new page and i have a little problem with the column widths. I want to have the same widths for all columns in the responsive desktop view.
Second: on a smartphone the last column is not visible.
Hope you can help as always.
Many thanks in advance and wish the ENFOLD team a great weekend!
Alexander
Hi!
@doortoweb we might have another topic for demo data and other related files. For the time being please open a new ticket :)
Best regards,
Vinay
Hi Vinay,
Could you tell me how I can change the number of colums that are showing up next to eachother in the footer? I would like to show 2 colums next to eachother at tablets and desktops. See the link in the private data.
Hey Munford,
Thank you for contacting us. Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
Disable lightbox arrow navigations
.mfp-arrow {
display: none;
}
Hide mobile menu and show desktop nav in tablets
@media only screen and (max-width: 676px) {
nav.main_menu {display:block !important;}
#advanced_menu_toggle, #advanced_menu_hide {display:none !important; }
}
Hide mobile menu and desktop nav in tablets
@media only screen and (max-width: 676px) {
nav.main_menu {display:none !important;}
#advanced_menu_toggle, #advanced_menu_hide {display:none !important; }
}
Best regards,
Vinay
I tested the above and it works but there is an issue where on mobile you have to pretty much tap twice to get it to load the popup. Once to select the slide it would seem, and then again to activate the link for the video placeholder. Because of that the slider navigation arrows show when the popup opens.
Also, once popped there is still the autoplay issue except now it’s everywhere. Mobile and desktop.
Since we aren’t accessing the mp4 directly anymore is there a way we can 1. get around the double tap?, and 2. add code to force autoplay across all devices?
Hi,
I have tested this code and it works please replace the previous one with the below code :)
#top #header_meta a {
padding: 7px 10px!important;
}
#top #header_meta a:hover {
background: #003f83!important;
color:#FFF;
text-decoration:none;
}
Best regards,
Vinay
Hi Kriesi,
I’m using a footer width 4 widgets. I would like to show them like this:
Desktop – 4 colums next to eachother
Tablet – 2 colums next to eachother
Mobile – 1 column
I found this code:
#footer .av_one_fourth:nth-child(1) {
width: 20.5%;
}
#footer .av_one_fourth:nth-child(2) {
width: 20.5%;
}
#footer .av_one_fourth:nth-child(3) {
width: 20.5%;
}
#footer .av_one_fourth:nth-child(4) {
width: 20.5%;
}
This code does the job, but it also affect the way of showing at desktops and it only works for the first 2 colums.
One additional question to menu for mobile devices. How can I activate sticky menu for mobile devices. In Enfold settings I found this:
Header > Header behaviour > Sticky Header
[x] If checked the header will stick to the top of your site if user scrolls down (ignored on smartphones).
Sorry I had since removed that code as it wasn’t working and I found a different fix for the menu which is working for me except one issue with the mega menu one – see this thread:
Thanks.
Dear support team,
I can’t seem to figure out what happend.
With some of my created sites the top “special heading” overlaps or reaches within header menu or the main content is to high up. Not sure how to explain…
There seems to be a missing gap between the header menu and the content?
Please see the urls below.
-
This topic was modified 9 years, 6 months ago by
beenee.
Hi Ismael,
THANKS! That did the trick :-)))
Yes, the site starts to get heavy, I have to look at what it can be. I’ve installed the WPML plugin, don’t know if that’s heavy, or if it’s the panels with menu and booking? I will test it out.
Regarding the mobile Version, I have disabeled the logo and “reserver bord”, is it possible to have the logo maybe on the right side that overflows like on desktop but is smalller for mobiel? That would be awsome!
Kindly regards, Mathilde
Great!
Is there anyway for the menubar to be fixed at top and let the header disapear like it does in desktop mode?
Hi Christel,
Great, glad you got it working again and I’m sorry about the problems. Please let us know if you should need any more help on the topic.
Regards,
Rikard
Hi Rikard
Thanks for your reply.
I have almost done what I want with this code:
#top #wrap_all #main .avia-no-border-styling {
border: 50px solid #850124;
border-bottom: none;
border-top: none;
}
In the section with the pattern where it says “God has given us to hands…” I want the pattern to overlay the border or the border to stop so its not going into the pattern.
The second thing is I want to move the border so the dark red color overflow or is over a part of the background picture.
Best regards
Bo
Hi, thank you very much for your reply, but that’s not what i’m trying to fix.
The scroll and over flow is fixed, but now i need the submenu to be sticky, like the header. The scroll is incredibly intuitive when you’re browsing the site from an actual mobile device, and we haven’t heard any negative feedback from our users. Apple and Google all implement this scroll-able, overflow menu. The current solution provided by Kriesi, is counter intuitive, and having two hamburger menu on the site, makes it confusing and unsightly.
Again, what i’m trying to fix is to get the submenu to stick to the top of the screen when users scroll through the page.
Hi,
Great, glad you got it working. And you’re right, we should have a sticky topic since a lot of users are having the same problems as you are. Thanks for the tip :-)
Regards,
Rikard
Hi Yan!
Thank you for using Enfold.
Could you please provide a screenshot of the hover effect that you have in mind? Use imgur or dropbox. For the background color, you can start with this:
#top .av-caption-style-overlay a.av-masonry-item-with-image .av-inner-masonry-content {
background: rgba(0,0,0,0.35);
}
Regards,
Ismael
Hi,
Yes, it’s possible. Please follow the instructions here:
Best regards,
Ismael
I’ve viewed the following article (https://kriesi.at/support/topic/background-video-with-no-sound/#post-229951) but can’t seem to find the file to edit the code so my audio will play from the video. I’ve attached screenshots in the private content section below. Thank you.
Hello,
I tried to change the font size of the submenu to 16px with the following CSS code:
#top .av-main-nav ul a{width:100%;height:auto;float:left;text-align:left;line-height:23px;padding:8px 15px;/* font-size: 16px !important; */min-height: 23px;max-width: none;text-decoration: none;font-family: inherit;}
But it does not work. Please advise. Thanks.
Hi,
The fullwidth submenu is not sticky on mobile phones.
That is the default behaviour of the full width submenu because “fixed” positioned elements are not handled consistently on mobile devices. If you want to make it scrollable, add this in the Quick CSS field:
@media only screen and (max-width: 767px) {
#top .av-submenu-container ul {
white-space: nowrap;
overflow-x: auto;
}
}
Remove this css code:
@media only screen and (max-width: 480px)
@media only screen and (max-width: 580px)
.av-submenu-container ul {
white-space: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
position: fixed!important;
}
It’s a bit counter intuitive though because there is no indicator that it is scrollable. Please enable the button in the “Mobile Menu Display” settings.
Best regards,
Ismael
Hi,
It’s not possible at this time to have a burger menu on desktop, sorry for the inconvenience. You can request the feature and vote the requested ones here – https://kriesi.at/support/enfold-feature-requests/
For any other questions or issues, feel free to post them here on the forum and we will gladly try to help you :)
Best regards,
Jordan
Hi,
Since there’s not enough space to accommodate the fields in one line, I think it’s better if they are stack on top of each other. Something like this should work:
@media only screen and (max-width: 479px) {
.responsive .avia_ajax_form .form_element {
width: 100% !important;
}
}
This will affect all fields so adding a custom css class attribute will help: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
Best regards,
Ismael
Hi,
Great, glad you got it working. Please let us know if you should need any more help on the topic.
Regards,
Rikard
Hey limyj0923,
Thanks for getting in touch with us!
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
.avia-section {
border-top: 0px;
}
Let me know if you need further assistance.
Best regards,
Jordan