Thank you Rikard,
sorry for bothering you, was my fault

Ok thank you

Thank you Mike,
I am already using Widget Options plugin and, together with another very handy plugin, Display Posts, I managed to have custom sidebars for each category (with images) and random widgets

[display-posts post_type=”page” category=”la-catena-doro” posts_per_page=”4″ image_size=”widget” orderby=”rand” wrapper=”div” wrapper_class=”display-posts-listing image-left”]

Thank you
Mauro

Please see private content
Thank you
Mauro

Thank you Ismael,
like this the color is more or less similar to the header background, but there is still a shift of the header of 15/20px that disappear as soon as you scroll a little more. I would like to avoid that.
Background image height is 189px and I have set the same height in Enfold header setting
In this way, also the background of the megamenu has become green.
Please see video and screenshot
Thank you
mauro

• This reply was modified 3 years, 2 months ago by profumopuntoit.

Thank you Mike,
as it is not possible via Enfold interface, I did it with a bit of HTML and CSS
It is not portable code, easy to reuse, but it works.
I hope that Enfold will add this functionality in a future release

<div class=”jmb-full-width-image”></div>
<p class=”jmb-full-width-image-paragraph1″>Our Gourmand</p>
<p class=”jmb-full-width-image-paragraph2″>Perfumes</p>

.jmb-full-width-image-paragraph1 {
margin-top: -165px;
margin-bottom: 204px;
color: #f2f9bd;
padding-left: 10px;
font-size: calc(19px + 2vw);
}
.jmb-full-width-image-paragraph2 {
margin-top: -145px;
margin-bottom: 81px;
color: #f2f9bd;
padding-left: 10px;
font-size: calc(19px + 2vw);
}
.jmb-full-width-image {
background: url(/wp-content/uploads/gourmand-perfumes1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100vw;
height: 400px;
margin-top: -36px;
margin-left: -50px;
padding: 0;
outline: none;
}

The interesting point is
width: 100vw;
that set the width of the image at 100% of the viewport

At the moment it works correctly in the staging site where I had to modify the width in Enfold settings => General Layout => Maximum Container width from 1310px to 100%, in the production site I did not do this modification yet, because I am afraid that it could break something.

Setting Maximum Container width to 100% can have some weird effect? From the staging site it does not seem so

Thank you
Mauro

Thank you Ismael,
so if I copy enfold/js/avia-snippet-sticky-header.js to enfold/-child/javia-snippet-sticky-header.js and modify this file it should work?
Or this is valid only in case of php files?
Mauro

Solved, you can close
I found, you can add the link from the advanced tab => Link Settings => Heading Link
I would suggest moving it to the Content tab just below “Display Element Heading?”
Thank you
Mauro

Great thank you
There is still an unwanted shift to the right in the third and fourth column due to
div .av_one_fourth {
margin-left: 6%;
width: 20.5%;
}
If I set margin-left: to zero all the last three columns squeeze to the left
Please look at the screenshot

Thank you
Mauro

Thank you Mike,
it works
The only thing is that when I open funtions.php in Dreamweaver (CS6) it says that there is an error at the line
return new Promise(resolve => {
Please see https://www.loom.com/i/632444c3a9ab4df19904170915171a58
I have other closing php tag followed by a <script> but they do not raise errors
There is anything that I can do?
Thank you anyway
Mauro

ok thank oyu

Sorry Yigit,
the problem is on the production website, not the staging one
Please see https://imgur.com/a/NdMyl8o
In both websites is installed Enfold Version: 4.8.1, but in the production website we have WordPress 5.6.2 while in staging we have 5.7
If it is possible we would like not to update WordPress
In private content his reference and access
Thank you
Mauro

Thank you Victoria,
it is working, but it is a css that shrinks the existing image. This way is inefficient because you have to download a large image to present it smaller and this penalizes you in Google PageSpeed

I was hoping to see a PHP snippet that give an image size for browser windows over a certain size and another size below that.
Is it possible?

Thank you
Mauro

Hello,
I have added the snippet of code in functions.php, but I don’t see any change, neither in desktop nor in mobile view

Please see a reference page in private content
Mauro

Dear Yigit,
perfect, thank you very much
Mauro