Hi Everyone,
I have a colour section at the top of most of my pages, but when I look at the site through my phone (or smaller devices in general), while everything else responds really nicely, the colour sections don’t and I’m generally left seeing a corner of the image (and the image doesn’t really make any sense).
Any ideas how to fix this?
Hi Guys,
Once the YouTube stop playing a button comes up at the end, is there a way to remove it?
Thanks,
Nep
i think I need to wrap the text around the photo? I think this maybe able to be done inside a text box but I do not know how to do it? Can you instruct me how?
the second issue will be that the the different blocks sit on top of each other. There is no space between them. You can see on my page what I am talking about.
Hey!
Please do create a new support ticket for us, so we can also see your web site.
That is an old topic, many stuff has changed so would be nice to have a preview of it.
Thanks a lot
Cheers!
Basilis
On my website on mobile, when I click the scroll lock to return to the top of the screen and then scroll down again, the scroll lock remains red and does not reset to the grey with an arrow until I click another dropdown box. Is the a code that can fix this to force a reset? Or even to make it so it doesn’t change color/remains static?
Also, is it possible to change the height of how far the page scrolls back up – say 3/4 of the way instead of all the way to the top. Once you check out the link in the private content on a mobile device it’ll make more sense.
I red that on your suggestions on other topics. This would be nice for a little blog but we are launching a cosmetic brand and can’t afford having any unwanted visitor. Especially because some payment plugins are already enabled on our Woocommerce, plus, we are using several accesses by user roles and really need to work on the whole customer funnel, starting from our real homepage.
Sadly, we need to use a bunch of plugins that are slowing down our website but we compensate by a great server and some fine tuned caching tools. WordPress isn’t known for being really “lite” as an e-commerce platform.
Best regards,
Arsène Lesueur
Hey Frank!
I am sorry but that is not possible at all, I am afraid.
You can not add a demo on top of an other demo, there is no such functionality.
Please do let us know if we can do anything else for oyu.
Regards,
Basilis
I keep running into the need to copy individual complex elements from pages. Totally not digging the kludgey workaround of saving the entire page (which might contain a whole whack of other stuff I don’t want) as a template, then slurping that entire set of stuff into a new page and deleting everything but the one thing I want. Bleh.
Several existing queries/responses on the topic are a few years old, so I’m hoping there’s an update on this. It’s gotta at least be on the roadmap, right? Seems to me like a basic and necessary feature. : / If not simple copy and paste functionality, you should at least be able to save individual elements, or groups of elements as templates the same way you can currently save an entire PAGE as a template. Same idea, right? Please?
Some threads there’s mention of enabling debug mode, then doing…something…with the shortcode that’s behind the elements. But I don’t understand, step by step, what to do with that code. A little video tutorial of that process would be very much appreciated.
Thanks in advance.
Hi Ismael,
Unfortunately that doesn’t fix the problem because that still maintains the section height of the desktop version. I like how the image resizes responsively and the size of the image decreasing as the page does is perfect but I just want to know if there is a way to get rid of the white space above and below as the section tries to maintain the original height.
Thanks,
The url that you mentioning private data works fine with the sub menu.
The one I sent in this thread was:
The top menu item “Careers” is not longer selected.
Thanks.
Hi,
try this code inside of Quick CSS field:
.container.av-logo-container {
border-bottom: 1px solid red;
top: 9px;
}
and adjust as needed.
Best regards,
Andy
Hi,
Thanks. But I tried two ways without success. The post does not accept the code correctly (because it is released in the wrong position)
(EXAMPLE CODE) Using (debug field for the Avia Layout Builder )
[av_section min_height='custom' min_height_px='100px' padding='no-padding' shadow='no-border-styling' bottom_border='no-border-styling' id='bback' color='main_color' custom_bg='#32a5d2' src='' attachment='' attachment_size='' attach='scroll' position='top left' repeat='no-repeat' video='' video_ratio='16:9' overlay_opacity='0.5' overlay_color='' overlay_pattern='' overlay_custom_pattern='' custom_class='']
[av_codeblock wrapper_element='' wrapper_element_attributes='' custom_class='']
[av_sidebar widget_area='HAMBURGUER']
<div class="centrotitulo">[page_title]</div>
[/av_codeblock]
[/av_section]
[av_hr class='invisible' height='100' shadow='no-shadow' position='center' custom_border='av-border-thin' custom_width='50px' custom_border_color='' custom_margin_top='30px' custom_margin_bottom='30px' icon_select='yes' custom_icon_color='' icon='ue808' font='entypo-fontello' custom_class='']
(EXAMPLE CODE) Using (view-source )
<div id='bback' class='avia-section main_color avia-section-no-padding avia-no-border-styling avia-bg-style-scroll avia-builder-el-0 el_before_av_hr avia-builder-el-first av-minimum-height av-minimum-height-custom container_wrap fullsize' style = 'background-color: #32a5d2; background-color: #32a5d2; ' ><div class='container' style='height:100px'><main role="main" itemprop="mainContentOfPage" class='template-page content av-content-full alpha units'><div class='post-entry post-entry-type-page post-entry-18226'><div class='entry-content-wrapper clearfix'>
<section class="avia_codeblock_section avia_code_block_0" itemscope="itemscope" itemtype="https://schema.org/CreativeWork" ><div class='avia_codeblock ' itemprop="text" > <div class='avia-builder-widget-area clearfix '><div id="text-64" class="widget clearfix widget_text"> <div class="textwidget"><div id="Divvoltar">
<span class="av_font_icon avia_animate_when_visible av-icon-style- avia-icon-pos-left avia_start_animation avia_start_delayed_animation" style="color:#ffffff; border-color:#ffffff;"><a href="javascript:history.go(-1)" class="av-icon-char" style="font-size:40px;line-height:40px;" aria-hidden="true" data-av_icon="" data-av_iconfont="fontello"></a></span>
</div>
<div style="float: right; margin-top: 7px;" class="hamburguer-class">
<a href="#mymenu" id="hamburger">
<span class="top-bar"></span>
<span class="middle-bar"></span>
<span class="bottom-bar"></span>
</a>
</div></div>
</div></div>
<div class="centrotitulo">teste teste</div> </div></section>
</div></div></main><!-- close content main element --></div></div>
To function must be called immediately in all posts immediately after this code line:
<div id='main' data-scroll-offset='0'>
(EXAMPLE CODE)
BUT THE POSTS call this code sequence before:
<div id='main' data-scroll-offset='0'>
<div class='container_wrap container_wrap_first main_color sidebar_right'>
<div class='container template-blog template-single-blog '>
<main class='content units av-content-small alpha av-blog-meta-date-disabled av-blog-meta-html-info-disabled' role="main" itemscope="itemscope" itemtype="https://schema.org/Blog" >
<article class='post-entry post-entry-type-standard post-entry-18235 post-loop-1 post-parity-odd post-entry-last single-small with-slider post-18235 post type-post status-draft format-standard has-post-thumbnail hentry category-sem-categoria' itemscope="itemscope" itemtype="https://schema.org/BlogPosting" itemprop="blogPost" ><div class='blog-meta'><a href='https://abortonanuvem.com/pt-br/wp-content/uploads/sites/10/2014/07/cytotec-original.jpg' class='small-preview' title='TEST POST'><img width="180" height="180" src="https://abortonanuvem.com/pt-br/wp-content/uploads/sites/10/2014/07/cytotec-original-180x180.jpg" class="attachment-square size-square wp-post-image" alt="cytotec original" srcset="https://abortonanuvem.com/pt-br/wp-content/uploads/sites/10/2014/07/cytotec-original-180x180.jpg 180w, https://abortonanuvem.com/pt-br/wp-content/uploads/sites/10/2014/07/cytotec-original-80x80.jpg 80w, https://abortonanuvem.com/pt-br/wp-content/uploads/sites/10/2014/07/cytotec-original-36x36.jpg 36w, https://abortonanuvem.com/pt-br/wp-content/uploads/sites/10/2014/07/cytotec-original-120x120.jpg 120w, https://abortonanuvem.com/pt-br/wp-content/uploads/sites/10/2014/07/cytotec-original.jpg 200w" sizes="(max-width: 180px) 100vw, 180px" /><span class="iconfont" aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello'></span></a></div><div class='entry-content-wrapper clearfix standard-content'><header class="entry-content-header"><span class="blog-categories minor-meta"><a href="https://abortonanuvem.com/pt-br/category/sem-categoria/" rel="tag">Sem categoria</a> </span><h1 class='post-title entry-title' itemprop="headline" > <a href='https://abortonanuvem.com/pt-br/?p=18235' rel='bookmark' title='Link permanente: TEST POST'>TEST POST <span class='post-format-icon minor-meta'></span> </a></h1><span class="av-vertical-delimiter"></span><div class="entry-content" itemprop="text" >
(EXAMPLE CODE)
Any suggestion?
-
This reply was modified 9 years, 8 months ago by
CloudChoice.
I’ve pasted the website link to the private content below. I have re-added the photo the the grid row at the very top of the page so you can have a look at the issue.
Thanks!
Hey kieranvyas,
In order to achieve that ; you should give an “id” or “class” to your elements.
See – http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
Just an example :
Color section (Give a class : desktop)
> Put the elements that you want to show only on desktop
Layer Slider (Give another class : mobile)
> Put other elements that you want to show only on mobile
In the css style :
/*HIDE ON DESKTOP*/
#mobile {display: none !important;}
@media only screen and (max-width: 767px) {
/*HIDE ON MOBILE*/
#desktop {display: none !important;}
/*SHOW ON MOBIL*/
#mobile {display: block !important;}
}
Best regards,
Jordan
Hi
is it possible to position the thumbnales on top instead of at the bottom of big image?
people cant see that there are thumbnails because the big pic is long.

Hey Kriesi,
I want to cancel the link on the image on a single blog page,
I had this problem with a different blog,
I’ve tried using this –
#top .single .big-preview.single-big {
pointer-events: none;
}
Does’nt work… (did work on the other Enfold blog)
and also, when there is no featured image I would like there to be some padding-top
maybe something like min-hight could solve this? (see 2nd link in the content)
Thanks,
Uri
Rikard,
Thanks but the code adjusted the main menu. I need to adjust the full width sub menu in the orange bar. I have a class already associated with the menu and have tried both of the the codes below but I just can’t figure it out.
.orangesubmenu li.current-menu-item {
background-color:#ffffff!important; color:orange
}
#top .av-subnav-menu li.current-menu-item{background-color:#ffffff!important; color:orange}
Hi Andy,
I have tried your code but the breadcrumbs disappeared on monitor version. So I modified it a little bit.
@media only screen and (max-width: 767px) {
.title_container .breadcrumb {
top: -15px!important;
left: 2px !important;
}}
The breadcrumbs looks great now!
———
by the question 2: How can I add an extra class for the map sothat it is more white space between the toggle and the map on mobile version?
great – that worked. I am now having another problem with the lightbox – side navigation.
I have this code:
/* disable side nav on trailers*/
#top .trailers img.mfp-img {
pointer-events: none;
}
.trailers .mfp-arrow {
display: none!important;
}
.trailers .mfp-counter {
display: none;
}
to disable the side nav on the .trailers images, but am not seeing it on the front end. I have cleared the cache, etc.
I was using the code before without the .trailers target, and it was fine, though I can’t get that to work now either.
??
thanks for your help
Nancy
What do I need to change so that the top menu selection remains highlighted (active) after you have selected an item on the sub menu?
Check out our test site please: http://035.acc.myftpupload.com/job/fine-gardening-crew-leader/
I am using a job posting plugin, but am wondering why the top menu doesn’t stay active with “Careers” remaining highlighted.
Thanks,
Diane
Thanks Rikard,
That appears to have fixed the first part of my problem.
There is also a very strange issue with this code
[av_heading tag='h1' padding='10' heading='CUSTOMER REVIEWS' color='custom-color-heading' style='blockquote modern-quote modern-centered' custom_font='#000000' size='50' subheading_active='' subheading_size='15' custom_class=''][/av_heading]
[av_hr class='invisible' height='-40' shadow='no-shadow' position='center' custom_border='av-border-thin' custom_width='50px' custom_border_color='' custom_margin_top='30px' custom_margin_bottom='30px' icon_select='yes' custom_icon_color='' icon='ue808' font='entypo-fontello']
[av_hr class='short' height='50' shadow='no-shadow' position='center' custom_border='av-border-thin' custom_width='50px' custom_border_color='' custom_margin_top='30px' custom_margin_bottom='30px' icon_select='yes' custom_icon_color='' icon='ue808' font='entypo-fontello']
[av_heading tag='h1' padding='10' heading='OUR DJs' color='custom-color-heading' style='blockquote modern-quote modern-centered' custom_font='#000000' size='50' subheading_active='' subheading_size='15' custom_class=''][/av_heading]
[av_hr class='invisible' height='-40' shadow='no-shadow' position='center' custom_border='av-border-thin' custom_width='50px' custom_border_color='' custom_margin_top='30px' custom_margin_bottom='30px' icon_select='yes' custom_icon_color='' icon='ue808' font='entypo-fontello']
[av_hr class='short' height='50' shadow='no-shadow' position='center' custom_border='av-border-thin' custom_width='50px' custom_border_color='' custom_margin_top='30px' custom_margin_bottom='30px' icon_select='yes' custom_icon_color='' icon='ue808' font='entypo-fontello']
This should display 2 headings each with a short HR underneath. You will see that the code is identical, only the heading text is different.
However, they appear different on the site.
And when I pasted the code into the bottom of the page to double check it the results were different again….
I’m completely confused about why this outputs 2 different results.
I’ve also just noticed that although the special headings are now using the same font they are still not the same…. they are all set to be black but some are grey. Why are some of these settings being ignored?
Can you help and explain?
Hey jnightingale,
Thank you for using Enfold.
Please add this in the Quick CSS field to change the font color of the options:
#top .av-custom-form-color option {
color: gray;
}
Best regards,
Ismael
Hi There –
I’ve used the colour section for the blue part on my website, and I’ve uploaded a background iimage. I want to display a gradient background colour so I’ve assigned a custom class to the blue section of my site here
.sd-blue{
background: #3574b9; /* Old browsers */
background: -moz-linear-gradient(top, #3574b9 0%, #16304d 100%) !important; /* FF3.6-15 */
background: -webkit-linear-gradient(top, #3574b9 0%,#16304d 100%) !important; /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #3574b9 0%,#16304d 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#3574b9′, endColorstr=’#16304d’,GradientType=0 ); /* IE6-9 */
}
However the gradient style will only work if I put !important and remove the background colour from the ‘background colour’ section of this avia layout builder
But now the background image wont’ work.
1 – how do I ensure that the background image and the gradient attached to this class work?
thank you
Hi,
Not really but thanks anyway :-)
You should be able to change the opacity and colour using CSS like this:
#top .av_header_glassy.av_header_transparency #header_main {
border-color: rgba(255,255,255,0.25) !important;
}
Regards,
Rikard
Hey Poirot,
Thank you for using Enfold.
You can use the following plugin to assign a different set of menu for a specific page:
https://wordpress.org/plugins/zen-menu-logic/
https://wordpress.org/plugins/menu-items-visibility-control/
For the logo, please follow the instructions here: https://kriesi.at/support/topic/create-different-headers-for-pages/#post-623836
Best regards,
Ismael
Hey hotspot,
Thank you for using Enfold.
This is possible but we need to see the actual contact page so that we can inspect the fields. You can follow the solution here: https://kriesi.at/support/topic/email-subject-from-contact-form-subject/#post-597621
Best regards,
Ismael
Hey CorrinaGB,
Thank you for using Enfold.
The twitter sharing field will be automatically populated with the post title. If you want to include the twitter handle, please follow the solution here: https://kriesi.at/support/topic/social-share-problems/#post-581487
Best regards,
Ismael
Hi,
Ok great, please let us know if you should need any more help on the topic.
Regards,
Rikard
I have the same issue, looks like the only fix is here:
https://kriesi.at/support/topic/woocommerce-2-6-problem-urgent/#post-650161
-
This reply was modified 9 years, 8 months ago by
gregwarley.
Hey ralphkamp,
Thank you for using Enfold.
Are you referring to the portfolio title? Decrease font size on mobile view:
@media only screen and (max-width: 1024px) {
#top .av-caption-style-overlay .av-masonry-entry .av-masonry-entry-title {
font-size: 1em;
}
}
Best regards,
Ismael