Hi –
I’m using the new burger menu, which is awesome! How can I show submenu items on click instead of on hover?
I gave this a try but didn’t have any luck: https://kriesi.at/support/topic/show-submenu-on-click-instant-hover/
hm – you can see here on a custumer projekt that this is what you try to obtain: http://webers-testseite.de/art-varij/gemaelde/phoenix/
if you look to the images in the lightbox there is no resize at all.
img.mfp-img {
height: auto;
max-width: 100%;
width: auto;
}
but these are the default settings. Those rules above are for the image to show in lightbox. And “full” means – no resize – original uploaded image.
Only on linking to an iframe in a lightbox there has to be some corrections:
f.e.
.mfp-iframe-holder .mfp-content {
left: 50%;
max-height: 56vw !important;
max-width: 80vw !important;
position: absolute;
top: 100px;
transform: translate(-50%);
}
i can not see your site – so i only can make suggestions. But these are definitly the right rules for gallery-images and masonry-gallery images.
Hey!
Please add this in the Quick CSS field:
.home .avia_ajax_form .form_element_fourth {
width: 20%;
}
.home .avia_ajax_form .form_element:last-child {
width: 10%;
float: left;
clear: none;
margin-left: 12%;
top: 30px;
}
Adjust the values as necessary.
Regards,
Ismael
Hey!
Please check the class attribute in the code. Make sure that the “noHover” class is remove. If you want to add it to the gallery element, follow this one: https://kriesi.at/support/topic/remove-rollover-on-gallery-thumbnails/#post-686690
Regards,
Ismael
Hi,
Great, glad you found the problem :-)
Let us know if you should need any further help on the topic.
Best regards,
Rikard
Hi!
If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.
Thanks!
Cheers!
Ismael
Hi,
Great, glad it started working again :-)
Please let us know if you should need any further help on the topic.
Thanks,
Rikard
Hi Alex,
Yes, that is one way of working as well. Let us know if you should need any further help on the topic.
Best regards,
Rikard
Hello. When applying this to a section, it actually applies to the top of the next section, rather than the bottom of the section it’s applied to.
Please look at the section with the Icon Boxes (e.g. Cloud Solutions)
Thank you,
Ryan
This is the settings I am using: Header / Extra Elements / Header Social Icons / Display in main header area
Looks great on the desktop but is not visible on a mobile, what can be done to make the social icons visible on a mobile like they are when they are displayed in the bar option?
Thank you.
By the way, love the updates with 3.8, can’t wait to explore it more!
When I attempt to embed mailchimp into my website the subscribe button is missing. See here:
for screenshot:
http://my.jetscreenshot.com/demo/20160914-3ry3-19kb
Also the word subscribe appears at the top when it should not. I’ve double checked the code and it’s correct. I’ve copied it to the widget area within a text box inserted into the Sidebar Pages Section.
Can you please help,
Hi. This is for other theme users looking for a solution because I looked at some of the past posts on changing the color of the fields in the Contact Form, but the given CSS wasn’t working. I’m guessing that perhaps the theme changed some code from “.main_color” (which was used in other posts) to “.socket_color”. Anyway, here’s what worked for me:
#top .socket_color input[type="text"], #top .socket_color textarea{
border-color: gray;
background-color: white;
color: gray;
}
By the way, the “textarea” portion is for the “message” field.
Hello Kriesi,
We have a slider on the home page with the below css that works great for adjusting the height of the image and font size for slider heading and caption.
I am trying to do the same for a slider on another page but I need to adjust the height and font size for this other page (page id 861). I tried adding .page-id-861 at the beginning of the below code but without success.
What am I missing in the code for page id 861 to ensure that I have slider mobile view adjustments on 2 DIFFERENT pages- 1 being the home page and 2 being a seperate page (page id 861)?
Thanks
this is the one that works great:
/******************
Home page-title, caption, and slider size when minimized
****************/
@media only screen and (max-width: 425px) {
.avia-slideshow-inner, .avia-slideshow-inner img {
height: 200px !important;
}
}
@media only screen and (max-width: 886px) {
.avia-caption-content {
font-size: 11px !important;
}
.responsive #top .slideshow_caption h2 {
font-size: 17px !important;
}
}
this is the one that is not working for specific page id 861:
/******************
Cohort 1 page-title, caption, and slider size when minimized
****************/
.page-id-861 @media only screen and (max-width: 425px) {
.avia-slideshow-inner, .avia-slideshow-inner img {
height: 100px !important;
}
}
.page-id-861 @media only screen and (max-width: 886px) {
.avia-caption-content {
font-size: 11px !important;
}
.page-id-861 .responsive #top .slideshow_caption h2 {
font-size: 17px !important;
}
}
Hey guys,
what are the point settings for fixing this overlap on the menu yo’re seeing here.
How best do I determine? Thanks!
JS
Thanks, Andy. That doesn’t actually solve the issue because it creates a fixed height container and the breadcrumbs length (and thus wrapping onto multiple rows) varies.
How about:
On mobile,
1. change the color of the breadcrumb background color to transparent or white,
2. change the color of breadcrumb text to black
3. allow the breadcrumb text to display on top of anything else
That way, I can set the height to be something like 10px and allow the breadcrumbs to span a few rows without overlapping the page title below, while still being visible.
Is that a legitimate solution or more of a hack? Would love any suggestions and the code to implement if possible.
Thank you so so much!
Hi Andy,
I dont have shrinking header enabled.
Think you missunderstand the problem.
I walk you through it:
I want a header with custom height 45px, the menu centered (and responsive) and the logo to the left.
Menu and logo should be on one line.
To have the menu centered, I started with [Logo center, menu below], then moved the logo to the left and the menu up so that they align on one line.
Now on the transparent header page(welcome page) the content starts at the top.
And on the non transparent pages(all other pages), there is a gap before the content starts which is larger than 45px.
This gap is what I want to get rid of, so that the header always has the same size.
Thanks for any advise!
Thank yoy Yigit,
but your solution doesn’t work.
You can see here http://www.pinkatmosphere.com/mediaset-premium-sport/
The problem is that the play icon is visible but doesn’t work if I click on it. I must click on the video area to play and stop.
The second problem is that sometimes the icon play doesn’t disappear while the video is playing and I must click on the video to hide the icon.
Hi,
I have a testimonial slider on this page: http://www.caseyandassociates.co.uk (scroll down to it).
It is fine on Desktop but on mobile it appears to the right and off the screen!
I’ve tried adding this CSS:
@media only screen and (max-width: 479px) {
#top .av-large-testimonial-slider.avia-testimonial-wrapper .avia-testimonial { padding: 0px 20px 0px 0px !important; }
}
This helped a little bit but increasing the padding from 20px doesn’t make any difference.
On a side note, I have also this to hide the arrows on mobiles:
@media only screen and (max-width: 768px) {
#top .av-large-testimonial-slider .avia-slideshow-arrows a {
display: none !important; }}
Is there anything else I can try so that it is centred rather than too far right? It is ok when I resize my browser so t’s narrow but not ok on say an iPhone 5.
Hi,
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:
@media only screen and (max-width: 767px) {
#header {
position: fixed!important;
top: 0;
}}
Best regards,
Yigit
Hey pinkabbestia!
Please add following code to Quick CSS
@media only screen and (max-width: 767px) {
#top .rv-avia-button .avia-button {
font-size: 14px;
min-width: 120px;
}}
Best regards,
Yigit
Hey belenluna!
Please add following code to Quick CSS in Enfold theme options under General Styling tab
#top .av-main-nav li:hover > ul {
opacity: 1!important;
visibility: visible!important;
}
Please make sure that > sign is not converted to – http://i.imgur.com/IDXRZQ3.png in Quick CSS field.
Best regards,
Yigit
Hi!
Please add following code to Quick CSS in Enfold theme options under General Styling tab and adjust as needed
.widget {
background: orange;
padding: 10px;
margin-top: 10px;
}
Best regards,
Yigit
Ok I managed to have the site upgraded to Enfold 3.8 but it did not fix the issues we have with the background images.
Then I had an idea that might work.
Since the whole idea of upgrading Enfold was because we had to Upgrade WordPress to 4.6 and in doing we had the bulled text editor feature broken which forced us to upgrade Enfold to seek for a solution the in fact it did but broke the background images.
I thought that if a start little by little upgrading the site from Enfold 3.0.4 taking not 3.8 nor 3.6 but rather the updates in middle I can figure which update breaks the background images and stop there.
I hope all this make sense to you and I hope you can allow me to have or download or you can send them to be by whatever means you find appropriate the Enfold update version between 3.0.4 and 3.6.
If I have those packages I can start testing to see which one fixes the bulled edition issue and does not break the background images.
Please let me know if you need any further explanation.
Hi!
Please add following code to Quick CSS in Enfold theme options under General Styling tab
#header_main_alternate {
background: #e6e6e6;
}
.av-main-nav > li:hover > a:before {
border-top: 29px solid transparent;
border-right: 12px solid transparent;
border-bottom: 20px solid transparent;
border-left: 12px solid transparent;
content: '';
position: absolute;
top: 0;
left: -24px;
border-top-color: transparent;
border-right-color: #0193bf;
border-bottom-color: #0193bf;
border-left-color: transparent;
}
Then edit Main menu links hover state in Enfold theme options > Advanced Styling and change hover background color to #0193bf
Regards,
Yigit
Hey guys,
love the burger menu for the desktop version.
Is it possible to have it say MENU with a frame around it (like a light button) as opposed to the burger icon?
Some users for this specific client are not the most tech savvy.
LMK…thanks!
JS
Hi,
By editing or creating a post with “advanced layout editor” breaks the “Feature image” property which is to appear on blog masonry and on top of the post itself.
Look theses two screenshots for better understanding:
Article edited with basic layout editor
Article edited with Advanced layout editor
Did you try successfully to reproduce this bug ?
Thxs
-
This reply was modified 9 years, 6 months ago by
Dantin.
Hi,
please stick to one issue/question in one thread only, otherwise it gets very confusing here. Feel free to open a new ticket for another issue.
Keep all plugins but gravity forms plugin deactivated while trouble shooting.
Try this code instead:
#top .gform_wrapper input, #top .gform_wrapper select {
color: white !important;
}
However, I notices that none of your CSS code inside Quick CSS field is working. If I add a simple new code to change any color settings of any element, then it’s not working. Are you using any caching on your server? please ask your host about it. Make sure that all files have the correct file permissions.
Best regards,
Andy
Don’t minify inline-css with tools like autoptimize.
Dear support,
I don’t know what to do. When I open the site on mobile device the masonry gallery shows only Title and caption, but not the picture while on computer everything works perfectly. What should I do about it? I have updated the theme to 3.8. because I saw that may be the problem in other similar topics, but it stayed the same.
Hope you can help me with that.
Best regards!
Doris