The sidebar remains concealed at all times within the HTML5UP prologue/Skeljs framework

Currently, I am using HTML5up Prologue with the skeljs framework at this link.

In my design, I prefer to keep my menu navigation hidden on the left side, especially in the narrow view (<961pixels). The toggle div should always remain visible. For reference, you can see a similar setup here:

The code for achieving this layout can be found in the init.js file available at this location.

(function($) {

skel.init({
    reset: 'full',
    breakpoints: {
        'global':   ... // (Code snippets omitted for brevity)
    },
    plugins: {
        layers: {
            sidePanel: { ... }, // (Code snippets omitted for brevity)
            sidePanelToggle: { ... } // (Code snippets omitted for brevity)
        }
    }
});

I have attempted to add more breakpoints in the layers sidePanel/sidepanelToggle definition, but so far, I have been unsuccessful. Could someone please guide me on how to incorporate additional breakpoints in the layer definition correctly? Alternatively, if this approach is incorrect, any suggestions or direction would be greatly appreciated.

Answer №1

I successfully concealed the sidebar by implementing a few tweaks in your files. - I have removed the breakpoints on both the sidePanel and sidePanelToggle in the JavaScript you shared - I ensured that the specified div in the main HTML file appeared in its correct position

<div data-action="toggleLayer" data-args="sidePanel" 
   class="toggle" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer;"></div>

You can check out the outcome of my changes on this link

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Bootstrap - creating seamless navigation between accordion sections on a single webpage

I am currently attempting to create internal links within an accordion menu on the same page. Here is the code I have been working with: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> & ...

Struggling to display AJAX GET results on my webpage, although they are visible in the Google Element Inspector

I'm working on a basic invoice page where I need to populate a dropdown box from my MySQL database. The issue I'm facing is that when I select an item, the description box doesn't get prepopulated as expected. I've checked in the networ ...

Best practices for consuming streams using jQuery

Looking to extract VU meter data from my shoutcast server in a continuous live stream format with the following structure: "0xa5 leftVal rightVal 0xa5 leftVal ..... etc" My goal is to capture and decipher this data using JavaScript (jQuery) for animated ...

"Enhance User Experience with Multilevel Dropdowns in Bootstrap 4 - Submenus Aligned to the Top

I recently embarked on a project that involved using Bootstrap 4.4, The project is an eCommerce grocery store with departments comprising categories and subcategories. The main menu became very lengthy when using the default code, so I encountered some al ...

creating a div with the help of Ajax

I developed an ajax function that retrieves a list of products. I want to showcase these products in a specific div, meaning that I need to duplicate this div for each product and show the product name within a paragraph tag. The code below was my attempt, ...

Generating input fields dynamically in a list and extracting text from them: A step-by-step guide

I am designing a form for users to input multiple locations. While I have found a way to add input boxes dynamically, I suspect it may not be the most efficient method. As I am new to this, I want to ensure I am doing things correctly. Here is how I curren ...

Tips for creating dynamic row styles in a fluid table layout?

Could someone help me figure this out? I'm not familiar with JavaScript and need assistance as I've never created it, only edited existing scripts. I have a layout with two tables side-by-side. On mobile devices, the second table is pushed below ...

Is there a way to trigger an image flash by hovering over a button using the mouseover feature in AngularJS2?

When I hover over the 'click me' button, I want an image to appear on the webpage. When I stop hovering, the image should disappear using the mouseover option. This is what I attempted in my app.component.ts and my.component.ts files: Here is t ...

Download files using AJAX in Laravel 5.6

I am faced with a challenge in my Laravel 5.6 REST API. Users have the capability to upload their files to a non-public folder. Now, I need to ensure that users can only download files if their JWT token is valid and they have the necessary privilege. H ...

Is there a way to ensure the content of two divs remains aligned despite changing data within them?

Currently, I have two separate Divs - one displaying temperature data and the other showing humidity levels. <div class="weatherwrap"> <div class="tempwrap" title="Current Temperature"> ...

Suggestions for deleting browser cache programmatically by utilizing JS or HTML

Having trouble clearing the Chrome browser cache using Add-ons. Working on a site development project using JSP with Java, it's crucial for security reasons to clear the cache. Tried multiple methods but none have been successful. Any suggestions? Ple ...

Assigning active classes based on the href attributes of child <a> tags

I've created a navigation structure as follows: <ul class="page-sidebar-menu"> <li class="menu"> <a href=""> <span class="title">Menu Item</span> <span class="arrow"></span> < ...

Tips for Customizing the StrongLoop LoopBack Explorer CSS

Our team is currently utilizing Strongloop's LoopBack framework for our REST APIs and we are looking to customize the CSS of the LoopBack Explorer. Unfortunately, it seems unclear which CSS files are being employed (LoopBack vs Swagger) and their exac ...

Is there a way to bring my popup closer to my button?

Check out my jsfiddle example here: https://jsfiddle.net/annahisenberg/ft10ersb/34/ Currently, I have the following code: <div id="more_options_popup" style={{ left: this.ref.current.offsetLeft - 140 + "px", top: this.ref.current.offsetTo ...

Choosing between JavaScript and Handlebars.js depends on the specific needs

Can anyone explain the advantages of utilizing Handlebars.js or similar libraries over solely relying on JavaScript? Thus far, I haven't come across any functionality in Handlebars that cannot be achieved with just pure JavaScript. ...

The password-protected HTML blog remains hidden until the correct entry is entered into the password box, causing

After successfully creating a password redirect page where entering the correct password redirects you to another URL (psswrdtest.tumblr.com with the password as correctpsswrd, redirecting to google.com*), I attempted to improve it by making the password p ...

What is the method for duplicating the HTML code of multiple elements in the Chrome console?

Is there a way to easily copy all the HTML code from elements that have the "abc" class? I attempted using $('.abc') in the Chrome DevTools console, but it only returns an array that I can't expand and copy all at once... Any suggestions on ...

Transform one div to another using a CSS animation slide

I am experiencing an issue with two divs (page1 + page2) inside a container (also a div). The container has overflow:hidden property, but when the animation starts, the overflow configuration is being ignored. Additionally, the page that should be displaye ...

Can Bootstrap Modal be triggered using jQuery to display a Partial View?

I have looked through multiple answers on Stack Overflow regarding this issue, but none of the solutions I found have resolved my problem. What I am attempting to achieve I need to dynamically populate the content of a Modal, but the content includes Raz ...

Setting a fixed data value within a div for subsequent retrieval through a function

I found a helpful example that demonstrates how to convert numbers into words. You can check it out here. The function for converting numbers into words is implemented in the following HTML code: <input type="text" name="number" placeholder="Number OR ...