Oops, I was not understanding that part – It all makes sense now. I have all the CSS in place and the menu is switching to mobile before anything overlaps. Thanks for your help Victoria!

Theresa

Thanks Basilis. I checked the thread and have inserted the following in my child CSS:

@media only screen and (max-width: 1100px) {
.html_mobile_menu_tablet .main_menu , .html_mobile_menu_tablet #header_main_alternate{display:none;}
.html_mobile_menu_tablet .container #advanced_menu_toggle, .html_mobile_menu_tablet #advanced_menu_hide{display:block;}
.html_mobile_menu_tablet #mobile-advanced{display:block;}
}

The main menu is hidden at 1100px, which is perfect, but the mobile menu is not displaying until I reduce the screen size to 990px. How do I get the mobile/burger menu to display at 1100px or less?

Thanks again,
Theresa

Thanks Victoria, you are absolutely right – the CSS was overriding the mobile menu from displaying. Instead of adding your CSS, I removed this from my child CSS file:

/* SWITCH TO MOBILE MENU AT CUSTOM WIDTH (to fix menu overlap onto logo for 990 – 1024px screens) */
@media only screen and (max-width: 1024px) {
nav.main_menu {display:none !important;}
#advanced_menu_toggle, #advanced_menu_hide {display:block !important; }
}

The mobile/burger menu now displays. Can you update this rule to trigger the mobile menu on screens less than 1024px, so that I can add it back into my child CSS?

I’m also not sure why the mobile sub-menus are not opening. Any ideas about this?

Thanks again,
Theresa

Hi John, I’ve cleared all caches and confirmed with my web host that I got them all. Still not seeing the burger menu on mobile. Have cleared browser cache and tried multiple browsers. Any other ideas?

Thanks

Thanks so much Sarah,

If you visit my test page, there are two text blocks that include an icon near the top of the page. The first one has your code applied through Quick CSS. For some reason, there isn’t a change to the background color of the icon.

The second block has my custom class applied through the child style.css file, but the icon background color fills behind the icon as well as to the right and left.
[av_font_icon icon='ue842' font='entypo-fontello' style='border' caption='' link='' linktarget='' size='80px' position='center' color='#ebce3b' custom_class='rca-iconbox-map' admin_preview_bg=''][/av_font_icon]

Keep in mind, I’d like the background color to just affect a single icon. Can you see what I’m doing wrong?

Theresa

Sorry, spoke too soon. Cleared the cache but it took a few minutes to show a change. The icons are displaying as they should.

Thanks

Thanks Rikard! I updated our .htaccess file and it seems to have solved the problem.

All the best

Thanks Rikard.

There’s a screenshot of the slider in private content. But I think you’re on track with what I was trying to do….

1) Blog category (“Facility Rentals”) – would like to hide so it doesn’t display.
2) Slide Entry Titles (room names) – would like to change the font color to white, add 10px padding to top, and give the area a minimum height of 60px, to keep height consistent for titles that use 1 or 2 lines.

The CSS you sent looks good, but I don’t see any change after adding it to my child theme. Is there something else I could try?

Thanks again

Apologies, I will re-post question 2.

RE question 1: There is no cropping happening, it is instead squishing a rectangular image into a square size. Here’s an example of an event post that’s using the original (rectangular) image as it’s source, and re-sizing to a square in the upcoming events widget:

<img width="180" height="101" alt="salsa" class="av-upcoming-event-image wp-post-image" src="http://cdn.rotarycentreforthearts.com/wp-content/uploads/salsa.jpg" scale="0">

In contrast, images from other event posts are sourcing different versions of the image, and using a square version. These images display well in the upcoming events widget.

<img width="180" height="180" sizes="(max-width: 180px) 100vw, 180px" srcset="http://cdn.rotarycentreforthearts.com/wp-content/uploads/cal-nv-logo11-80x80.jpg 80w, http://cdn.rotarycentreforthearts.com/wp-content/uploads/cal-nv-logo11-36x36.jpg 36w, http://cdn.rotarycentreforthearts.com/wp-content/uploads/cal-nv-logo11-180x180.jpg 180w, http://cdn.rotarycentreforthearts.com/wp-content/uploads/cal-nv-logo11-120x120.jpg 120w, http://cdn.rotarycentreforthearts.com/wp-content/uploads/cal-nv-logo11-450x450.jpg 450w, http://cdn.rotarycentreforthearts.com/wp-content/uploads/cal-nv-logo11-50x50.jpg 50w" alt="New Vintage Theatre" class="av-upcoming-event-image wp-post-image" src="http://cdn.rotarycentreforthearts.com/wp-content/uploads/cal-nv-logo11-180x180.jpg" scale="0">

Can it be changed so they all use a source set?

Thanks

• This reply was modified 8 years, 10 months ago by kvpacs. Reason: code didn't show

Thanks Yigit. Works great.

Please let me know if these links are what you’re looking for.

Thanks.

I’ll let Modern Tribe know. Thanks.

Thank you so much Ismael! Appreciate your help.

I left Page Preloading active and deactivated Page Transitions as that seems to be causing the issue.
Is this issue between Enfold and The Events Calendar plugin something that will be resolved in a future update?

I was so close. That worked great, thanks again Rikard!