Slide menu stays open at higher screen size

[DanV1]

I figure this will probably be an easy one for the coders here.

I've found a free HTML 5 template that overall suits what I want to use it for.

<snip>

On that page it shows the menu open and then one can close it. But what I want is for the menu to be closed and then it can be opened if one chooses to. Sounds simple enough but as I looked around at the code I couldn't find just where this could be done.

Note: The menu does close at round 1280 but remains open at higher, such as 1366 which is what I use.

Any help appreciated

Daniel

[edited by: not2easy at 4:46 pm (utc) on Sep 25, 2022]
[edit reason] #3 - No links please, see ToS [/edit]

[not2easy]

Hi DanV1, if you could post the code in question we could probably help out, but as explained previously, we do not visit sites to provide assistance.

We do not need the entire page code, just the part that contains the menu. IF the menu is using javascript (.js) to control the open, close then that would be more helpful to include. IF it is using CSS to control the open/close then that portion of the CSS that relates to the menu could help. Please use example.com for any URLs.

[DanV1]

@not2easy

Thank you for responding and info about other websites.

In the interim I had a reply from the person who made the templates. He informed me to look for this in the main.js file:

 // Inactive by default on <= large.
breakpoints.on('<=large', function() {
$sidebar.addClass('inactive');
});

breakpoints.on('>large', function() {
$sidebar.removeClass('inactive');
});

And replace it with:

// Inactive by default.
$sidebar.addClass('inactive');

But the code on the particular template, the one I inquired about, is this:

// Inactive by default on <= large.
skel
.on('+large', function() {
$sidebar.addClass('inactive');
})
.on('-large !large', function() {
$sidebar.removeClass('inactive');
}); 

It differs somewhat and there's mention of 'skel' and nothing about 'breakpoints'. He has quite a few templates on his website and maybe he was referring to a different coding in general.

Anyway, I'm not that savvy on js so it would be more guessing on my part to remove, replace, what is indicated. I sent him a reply pointing this out so maybe he will respond with the modifications.

Daniel

[not2easy]

Good to hear they are giving some assistance. I think you are right, it looks like they are using a different, maybe updated script.

[tangor]

Big + they are communicating! All too often template providers are not that helpful.

Hang on to this one! :)

[DanV1]

@not2easy and tangor

I hadn't heard back from them so I decided to experiment around a little. What I did was replace the previously mentioned section in the Sidebar.

Before replacing (note: left code above dotted line untouched):

// Sidebar.
var $sidebar = $('#sidebar'),
$sidebar_inner = $sidebar.children('.inner');

....................................

// Inactive by default on <= large.
breakpoints.on('<=large', function() {
$sidebar.addClass('inactive');
});

breakpoints.on('>large', function() {
$sidebar.removeClass('inactive');
});

After replacing:

// Sidebar.
var $sidebar = $('#sidebar'),
$sidebar_inner = $sidebar.children('.inner');

// Inactive by default.
$sidebar.addClass('inactive');

So basically I didn't concern myself with 'breakpoints.on', etc.

So, it works. The only thing is when you refresh the page there is a split-second view of the menu but that's something one can live with. I figure that's just the code catching up for display. The css file also has a very long section for the grid so I'm going to make a separate css file for it thus leaving the main css easier to access for whatever changes may be needed later.

With over 20 years playing around with html and css I should have learned some javascript but I just didn't get to it other than looking around for appropriate snippets. I actually was interested in learning C+ at one time but nowadays everybody and their grandmothers seem to be making software and apps. :-D

Anyway, another coding hurdle cleared. :-)

Daniel