Ah yep, that’s closer @Nikko – now it’s hiding the main menu. Thank you.

However, when clicking the burger menu at that resolution, nothing happens (ie the menu doesn’t appear).

It’s fine at mobile resolutions – if I click the burger menu, the menu appears/drops down.

But at 1280×720 for example, clicking the burger menu – the dropdown doesn’t appear.

Would it be safe to assume something is “hiding” it? I can’t see anything in CSS that might be doing it, but I’m probably just missing it?

Hi @Yigit

Thanks for the response. I pasted in the code from the page you linked to (under “Burger/Mobile menu activation – Custom Screen Width”):

/* Activate burger menu */
 @media only screen and (max-width: 1300px) {
#top #header .av-main-nav > li.menu-item  {
    display: none!important;
}
#top #header .av-burger-menu-main {
    cursor: pointer;
    display: block!important;
}}

However, even after clearing server, CloudFlare and Chrome caches, there was no change – the burger menu didn’t activate until the tablet resolution (“Activate for Smartphones and Tablets (browser width below 990px” in the “Menu Items for mobile” subheading in the Enfold > Main Menu options that I’d set).

Thanks for the reply @Ismael, much appreciated. That worked!

Just to double check – when doing edits like this, should I emulate the folder structure as well?

For example, the child theme didn’t have an “includes” folder, so I created it.

Is this the best way to do it?

Also, final question. This is slightly unrelated, but also related.

Just under the part we just edited, are the social share buttons, which I left “activated” (ie on).

However, the header for this is “Share this entry“. I’d like to change this to “Share this article“.

Is there a simple way (in the browser Inspect function) to figure out which file the code comes from, to set this text?

Because if I know that, then I know the next steps. This is the same for a lot of sections that I may want to change update across the site – I can never know which file to look into to update – is it functions.php, or as above, loop-index.php etc etc.

Understood – thanks for the clarification @Ismael.

Perhaps something to consider for a future update to the theme….. :)

Actually, is there a way to dynamically display a “…” at the end of the text, if it’s one of the ones that is too long and gets cut off?

Just so the user can clearly see it’s “continued”, rather than just cutting it short?

Sure thing Ismael, I’ve included the link to the page below.

In the meantime I’ll check out the links you provided – thank you!

Thanks @Ismael.

I systematically went through and disabled each plugin one at a time and tested, and sure enough, after disabling this plugin, the spacebar started working in ALB elements again.

I have no idea how/why that could interfere with the spacebar function in some ALB elements, but perhaps somewhere in that plugin’s code was some code similar to what @Guenni007 mentioned.

Additionally regarding the second issue with “ld-section-heading” appearing in the wrong place, I noted that when I disabled “display: flex” in Chrome developer tools, the text went to where it should be.

As such, I added

.ld-section-heading {
    display: inline !important;
}

into Quick CSS, and that seemed to solve the problem.

I’m not sure if this is the best solution, and whether it’ll break when viewed on certain screens/resolutions, but for now I’m claiming it as a “win”….lol.

Thanks for the response Nikko. I’ve included the temporary login below. It’s set to expire 1 week after access – hopefully that’s sufficient time.

Please be advised, the issue mentioned above (spacebar not working) doesn’t just occur on LearnDash course/lesson pages, but sitewide, so on any regular Post or Page as well.

As mentioned, it works fine for Text Blocks, but seems like that’s the only element that it works for.

I’m wondering if it has something to do with the WYSIWYG editor? As that editor is not available in any other element.

Also please note – although I created a child theme, the active theme is NOT the child theme, so the code modification had to be made on the parent theme functions.php

Oh NICE! That’s it, that totally fixed it. Thank you!

Is there anyone from the support team able to help?

I still need help reducing the gap between elements when viewing on mobile. The solutions given above fix image/layout issues on desktop, but they have exacerbated the gaps when viewing the site on mobile.

Thanks Ismael.

Your solution is close to what I already had (and mentioned in my first post). I modified it slightly so it’s:

bottom: 230px;

(instead of 50px per your suggestion)

and I added:

@media only screen and (max-width: 767px) {
#top .av-masonry-outerimage-container .av-masonry-image-container {
    height: 50%;

This means both the thumbnail and title are exactly how I want them in terms of thumbnail image size and title is much closer to thumbnail, when viewing in mobile..

However, now the gap between elements is even bigger than before. Please see attached screenshot so you can see what I mean.

This is the problem I’ve had from the start – I was able to modify image height and move title so it’s directly under it’s thumbnail, and have different view settings for mobile vs desktop.

However, I can’t solve the problem where there’s such a big gap between each element, when viewing on mobile.

This is what I need help with.

BTW, when I say “each element”, I mean: thumbnail + it’s title = 1 element.

The page currently has 11 elements (ie articles).

Hope that makes sense, and hopefully you can help with this issue.

Thanks!

Hi Nikko

Thanks for the response. That does fix the issue with the images, so thank you for that.

The only problem is that it meant it created a fairly large gap between the thumbnail and the title, so I modified your suggested 54% to 70% instead, and that seems to have helped.

It means the images are “mostly” recognizable (they are still a little “zoomed in”), and the gap between the thumbnail and title isn’t so big that it’s noticeable, so that’s the best compromise for now.

Thanks once again :)

Sure thing – login details included below.

I’ve looked at the most obvious points and can’t figure out why the full width slider is getting “cut off” like that, so I’m guessing it’s something really obvious that I’ve completely overlooked, lol.

Any/all help is greatly appreciated!

Understood, thanks for the response.

Perhaps something you guys may consider for a future update, as it would be fantastic for ecommerce sites, where you need to build out hundreds if not thousands of product pages on the fly, and it just implements the template you’ve created for it.

Hi Mike

Thanks for the response. Please find the link in the “Private Content” section below.

One key thing to note – only the first post (the one at the top of the page) actually has the excerpt and links to it’s “full post”. All the other posts are “dummy” posts – they only contain the title and featured image, but don’t actually link to the “full post”.

Hope that makes sense! Let me know if you need anything else….

Thanks!