S
suppenhuhnOct 21, 2021
Hi!
I'm using the blocks template Header Layout 3. Where's a sidebar open on click by default.
Now i'm trying to change it slighty so that:
the sidebar is only open on click on medium devices
the sidebar is fixed open on large devices
the sidebar is a hamburger menu on small devices ( as it is by default )
What i've done so far is changed classes on the body & the header trigger and added data-classes to the body:
<!-- Body org -->
<body class="stretched side-header open-header push-wrapper block-nav-header-3">
<!-- Body new -->
<body class="stretched side-header block-nav-header-3" data-class-md="open-header" data-class-sm="push-wrapper"
data-class-xs="push-wrapper">
<!-- Trigger org -->
<div id="header-trigger" class="d-none d-lg-flex">
<!-- Trigger new -->
<div id="header-trigger" class="d-none d-md-none d-lg-flex d-xl-none">But there are issues with visibility of the sidebar & position of the trigger when resizing the browser ( guess one of the reasons is the side-header-open class which is added by script ? )
Thanks in advance :)