Forum Replies Created
-
Posts
-
Thank you! This worked well.
I just want to say how much I appreciate the support (without judgment) given by your team. That is why I have so many sites running Enfold and always use it for new sites.
Wow! These are both great solutions. I have the first one implemented right now, but it is only good if I create different responsive versions. The word wrap doesn’t play at all widths.
@guenni007, your solution looks elegant! I will try that shortly. Thank you so much.I should mention that I can get the effect with a grid row — if only I could put the grid row within a color section.
Thank you. It ended up that I had to do the following in the CSS:
.av-horizontal-gallery {
min-height: 320px!important;
}For some reason, the @media declaration did not work properly. But, the min-height solved it.
Also, it worked better when I turned of the focus highlight. It seems that the expansion of the active item did not work well on the phone.Thanks again for pointing me in the right place!
Roger
Yes, that was it. I do not know why the Enfold version stopped updating automatically. (Somehow the license key was removed.) But, it is all good now.
Feel free to close the ticket.
Yes, of course. The page is https://bbspreview.wpengine.com/menu/.
You will see the images below the words “BB’s FAVORITES” just below the hero image. I used CSS to remove the hover circle and arrow. But, I would prefer to remove the link entirely -or- just prevent the highlighting of the image.
Thank you
Oh, I just figured that out too. I guess that I was too tired before.
#top .home-hero:before {
content: “”;
position: absolute;
left: 0; right: 0;
top: 50%; bottom: 0;
background: linear-gradient(0deg,rgba(0,0,0,0.5),rgba(0,0,0,.1));
}I found my own answer. Here it is:
#top .home-hero:before {
content: “”;
position: absolute;
left: 0; right: 0;
top: 0; bottom: 0;
background: linear-gradient(0deg,rgba(0,0,0,0.5),rgba(0,0,0,.1));
}Now, I am trying to figure out how to run the gradient from the bottom to the halfway up to the top Still playing with CSS.
It is looking good. Thank you. I am a bit amazed that is all it took. But, I am glad.
Thanks again
Roger
Thank you for your quick reply. Sadly, I upgraded to 4.8.3, but it did not solve the problem. I guess the bug is still there.
I moved everything to my staging site, so there are new credentials below.
Roger
OK. There is an Enfold bug. I found a workaround, but it is a bug.
When I invoke transparent header under “Main Menu -> Menu Items For Mobile” at 767px, it works fine. When I use the following code, it works perfectly up to 767:
/* Transparent Header For Mobile */
@media only screen and (max-width: 767px) {
#top #wrap_all .av_header_transparency, .av_header_transparency #advanced_menu_toggle { background-color: transparent; }
.responsive #top #wrap_all #header { position: absolute; }
}That is a problem for my site as I need a transparent menu for iPads and tablets. I have spent most of a day playing working on this. Let me summarize:
When I invoke transparent header under “Main Menu – Menu Items For Mobile” at 990px, the transparent header does not work at any width from 1-990. It is completely broken. It should still work up to 767px if I do not change the CSS. It does not.
When I change the CSS to 990px, as shown below, it is still broken at all widths from 1-990px. The code looks like this:
/* Transparent Header For Mobile */
@media only screen and (max-width: 990px) {
#top #wrap_all .av_header_transparency, .av_header_transparency #advanced_menu_toggle { background-color: transparent; }
.responsive #top #wrap_all #header { position: absolute; }
}However, if I leave the setting under “Main Menu – Menu Items For Mobile” at 767 and use the following code, it works at all widths including iPad widths:
/* Transparent Header For Mobile */
@media only screen and (max-width: 1200px) {
#top #wrap_all .av_header_transparency, .av_header_transparency #advanced_menu_toggle { background-color: transparent; }
.responsive #top #wrap_all #header { position: absolute; }
}NOTE: There is nothing magical about 1200px. It is the width at which my text menu bumped up against my logo. So, I want the burger menu at 1200px, which I accomplished with the code at the bottom of this reply.
So, I think there is a problem with the theme code under the “Main Menu – Menu Items For Mobile” setting. I have found a workaround after an entire 8-hour day. But, you may want to look into what is happening here.
For anyone else working on this problem, I invoked the burger menu at 1200px by the following CSS:
@media only screen and (max-width: 1200px) {
.menu-item {
display: none!important;
}
.main_menu {
display: block !important;
}
.av-burger-menu-main.menu-item-avia-special {
display: block!important;
}
}Found my own answer. Posting for anyone else who needs it:
/* Transparent Header For Mobile */
@media only screen and (max-width: 1200px) {
#top #wrap_all .av_header_transparency, .av_header_transparency #advanced_menu_toggle { background-color: transparent; }
.responsive #top #wrap_all #header { position: absolute; }
}/* Burger Menu at 1200px for iPad */
@media only screen and (max-width: 1200px) {
.menu-item {
display: none!important;
}
.main_menu {
display: block !important;
}
.av-burger-menu-main.menu-item-avia-special {
display: block!important;
}
}
/* END Burger Menu at 1200 px */Ismael,
I really do not know what to do here.
The image does not need to be full width. It just needs to not be cut off on the top and bottom to fit the portfolio size.
Can you be more specific, please?
RogerFor those following this discussion, you need to also change the margins around the hotspot. Otherwise, the hotspot starts in the same place and then goes to the right and down. Here is what I did to create a large circle of 200px, which is centered in the right place:
/* Hotspot circle size */
@media only screen and (min-width: 990px) {
.responsive .av-image-hotspot {
margin-left: -100px;
margin-top: -100px;
width: 200px;
height: 200px;
}
}Actually, I had not decided on an events plug-in, yet. I am exploring the best way to do this and had originally thought about posts. Any recommendations for plugins that work well with Enfold?
Thank you. I understand your answer. My question is subtly different.
Instead of using background images in a cell, is there a way to use the image element in a cell in such a way that the image takes up the entire cell from the edge of the cell without a margin or padding?
Roger@yigit I am glad to contribute a small part to help the community that has helped me so much over the years. Thank you for your efforts.
Yes, I did exactly what it said to do in https://imgur.com/a/6Oy3Ijk.
I went to Enfold –> Theme Options, which is the top/default choice in the theme. I scrolled down to SELECT YOUR EDITOR. I saw that the default editor was changed to “Use Block Editor.” I changed it back to USE WP CLASSIC EDITOR.
It is working for me now.Good luck.
Switching to the classic editor helped. I guess that the system automatically forced the block editor.
I am also having the same problem. The Advanced Layout Editor button is visible, but does not work. Please help.
I wanted to let you know that I found a workaround for this application. But, the bug is still in the software.
The problem occurs when you define a minimum height. It seems to paint the page at the size of the image. Then, it resets and paints again at the new size. This creates the fading and the problem.
My workaround was to define a larger buffer and to add whitespace. It is not the ideal solution and looks funny on some devices. But, it does work.Thank you
