yes – but the custom-class is then on the section container ( that is in the DOM Tree higher than the avia-slideshow class)
f.e. dark-overlay-on-section
.dark-overlay-on-section .avia-slideshow .av-video-slide .mejs-mediaelement:after {
content: "";
position: absolute !important;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0.75) 25%,rgba(0,0,0,0.1) 70%);
background-size: cover;
background-repeat: no-repeat;
}
I have a client that really loved the way the Agency Paralax Demo functions and he wanted me to use it to build him a website. It was way more complicated than I thought it was going to be and wasn’t as easy to do what he wanted, so I ended up building the mobile version of the site using the paralax settings and non-mobile using just grid blocks. The issue now is that I cannot navigate to another page, outside of the home page. Do I need to go back to the standard install and add all of the customizations again or what should I do here? I can of course navigate to the subpages when I’m logged in, but if I open up a browser that isn’t logged in it just keeps bringing me right back to the top of the home page.
-
This topic was modified 2 years, 6 months ago by
NutmeggerPR.
how did you place the video? Inside a full-width slider?
Are there other slides inside the slideshow that should also have that overlay?
Give a custom-class to that slideshow f.e. dark-overlay and then use the after pseudo container to get the overlay:
.avia-slideshow.dark-overlay .av-video-slide .mejs-mediaelement:after {
content: "";
position: absolute !important;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0.75) 25%,rgba(0,0,0,0.1) 70%);
background-size: cover;
background-repeat: no-repeat;
}
on the other hand – you could style the caption – to have a better contrast – f.e.:
.avia-slideshow.dark-overlay .av-video-slide .avia-caption-title {
text-shadow:
1px 1px 0 #c7c8ca,
2px 2px 0 #b1b3b6,
3px 3px 0 #9d9fa2,
4px 4px 0 #8a8c8e,
5px 5px 0 #77787b,
6px 6px 0 #636466,
7px 7px 7px #000;
}
see: https://webers-testseite.de/divider-on-sliders/
-
This reply was modified 2 years, 6 months ago by
Guenni007.
Hi,
Great, I’m glad that we could help you out. Please let us know if you should need any further help on the topic, or if we can close it.
Best regards,
Rikard
Hi,
I have a background video that a client wants to use with a transparent header, but the top of the video is too light for the white menu text to show up, so I want to add a dark overlay to the top portion, with a reducedd opacity, then fading out, so like 75% dark overlay at top, reducing down to 0% overlay, just so the very top is darker to see the menu.
Is that possible using CSS?
Hi,
Great, I’m glad that you got things working. Please let us know if you should need any further help on the topic, or if we can close it.
Best regards,
Rikard
Hi,
Great, I’m glad that @guenni007 could help you out. Please let us know if you should need any further help on the topic, or if we can close it.
Best regards,
Rikard
Hi,
I added this css:
#top .product-attributes .price {
display: block;
}
Please clear your browser cache and check.
Best regards,
Mike
Hey Gunter,
On media elements like the Easy Slider, Full Width Easy Slider, Horizontal Gallery, Masonry Gallery, Image element etc etc, it would be great to have the ability within the ALB to assign a badge/label to certain slides/images.
As an example, let’s say you have a slider with 3 slides. Currently, you can assign each slide a title and caption which is great.
But what I’m suggesting is an additional field where you can turn on or off a badge/label that appears in the front end, similar to the “Sale” badge that appears on WooCommerce products when they’re on sale (on smaller screen sizes this Sale badge floats over the product image – this is the idea I’m suggesting, that the badge floats over the image. Checkout this page on mobile as an example of what I’m suggesting – https://kriesi.at/themes/enfold-shop/product/dark-skirt-erebos/ ). This would allow you to select certain slides/images as “Newly Added” or “Most Popular” etc etc and have that stand out as a bit of a feature. And perhaps you can select a few display options like Top Right Corner, Top Left Corner etc etc.
Anyway, thanks for considering it.
Thanks as always
Tim
-
This topic was modified 2 years, 6 months ago by
THP Studio.
-
This topic was modified 2 years, 6 months ago by
THP Studio.
Hallo,
refering to this solution (https://kriesi.at/support/topic/mobile-menu-is-gone-only-in-mobile-view/), the image is missing in the Category pages.
I tired to add:
is_template-shop
is_shop_columns_3
and css same image setting into class: .template-shop
The area header was set but the content gone. I suppose that am using the wrong class in functions.php.
How can i know the right class?
Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:
#top #header_main_alternate .avia_mega_div .current-menu-item {
background-color: #fff;
}
#top #header .av-main-nav > li > a {
width: 100%;
text-align: center;
}
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,
Mike
This reply has been marked as private.
Hi,
Please note that the /xmlrpc.php is not public use, see this post. So you don’t want it to show as a backlink, and it should correctly show as broken.
You didn’t say where you are seeing the backlink to /xmlrpc.php, I assume that it is in your Google search console, if so you can just ingore these.
If you follow the steps above then it will take time for Google to stop looking at this link.
According to this post the /xmlrpc.php 405 error doesn’t effect SERPS.
Best regards,
Mike
Hi,
Thanks for sharing your experience. Please let us know if you should need any further help on the topic, or if we can close it.
Best regards,
Rikard
It depends a bit on what kind of header you have and what you want to achieve.
Is it a fixed header on desktop view? Where is your navigation etc.?
the header_meta should stay fixed in mobile view – and not scroll away…
hm – I have never attached any particular importance to it. But you are indeed right. It seems that the base.css (line 470ff) setting of the font is used there. It’s listed as HelveticaNeue, Helvetica etc. Since Enfold stores the fonts you set in options as a variable, you can set here:
#top .input-text,
#top input[type="text"],
#top input[type="input"],
#top input[type="password"],
#top input[type="email"],
#top input[type="number"],
#top input[type="url"],
#top input[type="tel"],
#top input[type="search"],
#top textarea,
#top select {
font-family: var(--enfold-font-family-body) !important
}
or if you like to change it only for that input field:
#top #s {
font-family: var(--enfold-font-family-body) !important
}
maybe this should be changed on default to inherit the font like all the other settings ( line 20ff)
(html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, etc. )
Hey Alan,
Thanks for the link to your site, it looks like in the “desktop” color section you added a negative margin to the HR element, before the three columns, but in the “mobile” color section you have no HR element and no negative margin is applied to the columns.
Try adding a negative margin to the columns, if this doesn’t correct please include admin login in the Private Content area so we can investigate.
Best regards,
Mike
Hey santanin,
Thanks for the links, your videos are near the bottom of the pages and “outside the viewport” on page load, to correct you will need to place the videos at the top of the page so they are seen on page load.
Best regards,
Mike
Hi,
I believe that I have achieved what you wished for, but I had to change the break point to 1024px instead of 992px, this is the current css:
@media only screen and (min-width: 767px) and (max-width: 1023px) {
#top #header .av-main-nav > li.menu-item {
display: none!important;
}
#top #header .av-burger-menu-main.menu-item-avia-special {
cursor: pointer;
display: block!important;
}
.html_header_top .av_bottom_nav_header .av-logo-container .main_menu {
display: block !important;
}
#top #header_main_alternate {
display: none;
}
#top #header .av-main-nav > li > a {
background-color: transparent !important;
}
.html_header_top #top .av_menu_left .main_menu {
right: 20% !important;
left: auto !important;
}
}
@media only screen and (min-width: 1024px) {
.html_header_top.html_bottom_nav_header #top #header_main_alternate .main_menu .menu-item-search-dropdown {
float: left;
width: 45px;
}
.html_bottom_nav_header #top #header_main #menu-item-search>a {
padding-right: 13px;
}
.main_menu {
display: flex;
align-items: center;
}
.avia-menu>ul.av-main-nav {
margin: 0;
display: flex;
justify-content: space-around;
position: relative;
}
.avia-menu>ul.av-main-nav li {
display: flex;
flex-grow: 1;
justify-content: center;
}
#top #header .av-main-nav > li:hover {
background-color: #776fb1;
transition: background-color 0.4s ease-in-out,color 0.4s ease-in-out,border-color 0.4s ease-in-out;
}
.avia-menu>ul.av-main-nav .av-burger-menu-main.menu-item-avia-special {
display: none;
}
}
please clear your browser cache and check.
Best regards,
Mike
Hi,
If you want it to work on every page except home, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field instead:
#top:not(.home) #header_main {
height: 170px;
background: url(https://campfire-sunshine.org/wp-content/themes/CampFireCouncilTheme/images/header-small.jpg) no-repeat center top;
background-size: cover;
}
It looks like you have added some custom css to add 65px margin-top to the menu items, please remove this:

The same css is also adding 65px margin-top to the logo, but you should remove your css and use this instead:
.logo a img {
border: none;
margin-top: 46px !important;
margin: 0;
display: inline-block;
max-width: 100%;
}
#menu-item-8170 {
margin-top: 20px;
}
After applying the css, please clear your browser cache and check.
Best regards,
Mike
Hey Kelly,
You can always download the latest version of the theme from your Themeforest account.
The update to 5.6.6 has to be done manually from the version you are running, please refer to my replies in this thread: https://kriesi.at/support/topic/enfold-4-5-theme-update-update-failed-download-failed-a-valid-url-was-not-pro/#post-1021541
You can either update manually via FTP: https://kriesi.at/documentation/enfold/how-to-install-enfold-theme/#theme-update, or upload the new theme files via Appearance->Themes->Add New, and select to overwrite the old theme files after the upload has finished.
Best regards,
Rikard
Hi,
Try adding this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:
#top .entry-content-wrapper ul.av-share-box-list li {
text-indent: 0;
}
After applying the css, please clear your browser cache and check.
Best regards,
Mike
Hi,
Thanks but I don’t find the icon file 2635055-textiles.zip in your media library, or any .zip files, and you didn’t link you it above. Please upload it to the media library so we can examine.
To change the color of 中文 on hover, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:
#top #header.header_color.av_header_transparency .av-main-nav > li#menu-item-174 > a:hover .avia-menu-text {
color: #000;
}
to remove this text:

go to your widgets and click edit image:

then remove the caption and save:

I did it for your first one, please try for your others:

To remove “Enfold Theme by Kriesi” please see our documentation here ▸ Copyrights info and add this [nolink] to Enfold Theme Options ▸ Footer ▸ Copyright
Best regards,
Mike
Hi Team,
On mobile only:
Wondering if it’s possible to hide the main portion of the header, but to continue to display the very top portion with the phone number?
If this is possible would you kindly suggest some coding that would allow me to do this? Thank you!!
Mike
on default the value in that input field of max-width is 1310px – but i tend to set it to 1500 (or 1510px)
a totaly missing of max-width ( max-width unset ) looks strange ;)
have a look at your code :
@media only screen and (max-width:1100px) {
.responsive #top .av-main-nav .menu-item-avia-special {
display:block !important
}
.responsive #top .av-main-nav .menu-item {
display:none !important
}
/************** here is a missing closing curly bracket *******/
@media only screen and (max-width:1024px) {
#header_meta {
display:none
}
}
if you got a css code error on quick css ( a missing closing bracket (often forgotten on media querries) , comma instead of semi-colon (or vice versa) , etc pp) the rest of your css could be ignored.
this enfold setting of container max-width is added after the quick css settings – so it will go back to the standard container width of 1010px (see: grid.css ) .
/* Base sizes */
.container .av-content-full.units {
width: 100%
}
.container .av-content-small.units {
width: 73%
}
.boxed#top, .html_boxed.html_header_sticky #header{
width: 1010px;
}
.container{
max-width: 1010px;
}
Hi,
Great, I’m glad that Ismael could help you out. Please let us know if you should need any further help on the topic, or if we can close it.
Best regards,
Rikard
Hello,
I am trying to make something similar to this .
However the tab element in enfold seems to be very limited in styling options, i assume there are css solutions but I havent found anything on how to make the tab full width and centered at the top.
Mine looks like this. I don’t want the small boxes to be right above the different tabs. Im trying to get it like in the example which i previously linked.
Thanks in advance
I followed the instructions given in the documentation but the CSS for different customizations does not work.
There seems to be a mistake in the code. Upon copying the code into my functions.php multiple errors occur.
/*--------------------------------
» Initiate Flexbox
--------------------------------*/
/* Header */
.responsive #top #header,
/* Top bar */
.responsive #top #header #header_meta,
/* Search icon */
.responsive #top #header #menu-item-search a,
/* Cart icon */
.responsive #top #header a.cart_dropdown_link,
/* Social icon */
.responsive #top #header #header_main nav .social_bookmarks,
/* Logo */
.responsive #top #header #header_main .inner-container .logo,
/* Main menu, cart and social icons */
.responsive #top #header #header_main .inner-container .main_menu,
/* Widgets */
.responsive #top #header #header_main .inner-container .widget,
/* Header inner container */
#top #header #header_main .container.av-logo-container .inner-container {
display: flex;
position: relative;
}
There seems to be a problem in the second line and in the third to last.
Can you please check the code and give me some information?
I already created the widget area and it is displayed above the logo.
My header setting is “logo left, menu below” and I want the widget area to be displayed next to the logo area!
Thanks a lot and have a nice weekend.
Daniela
I can’t reproduce it either, but it happens to my client a lot. They have sent screenshots in the past when it happens and you don’t get the black background, you get the light grey. How is the section inserted? It it via JS? Could there be an issue loading the parralax script which then stops this layer from appearing?