My bootstrap left nav slider is the wrong way around

[multichild1]

I have a left sliding navbar in progress in the site below, but its the wrong way around. I have added width to it through inline styling, but what I need is for it to be the other way around. On load its the smallest width from the left, on click of the hamburger menu it slides out the furthest.

My dev link

I havent touched the bootstrap or CSS, so no need to show that code, but below is my attempt to create a new template in wordpress.

<?php /* Template Name: MonnowTemplate */ ?> 
   
<?php
get_header();
?>
  <!-- Menu Toggle Script -->
    <div class="d-flex" id="wrapper">
    <!-- Sidebar -->
    <div class="bg-light border-right" id="sidebar-wrapper">
          <div class="sidebar-heading">Logo going here</div>
          <br/>
          <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom" style="position:relative; float:right">
              <button class="hamburger hamburger--arrow" type="button" id="menu-toggle">
  			  		<span class="hamburger-box">
    				<span class="hamburger-inner"></span>
  					</span>
			  </button>
      	  </nav>
      <div style="position: relative; width: 400px; height:auto; background-color:#000000; margin-top:100px;">
      <div class="list-group list-group-flush">
        <?php
			if ( has_nav_menu( 'primary' ) ) {
				wp_nav_menu(
				array(
				'container'  => '',
				'items_wrap' => '%3$s',
				'theme_location' => 'primary',
				)
				);
			}
		?>
	</div>
      </div>
    </div>
    <!-- /#sidebar-wrapper -->

    <!-- Page Content -->
    <div id="page-content-wrapper">
      <div class="container-fluid">
        	<?php
		if ( have_posts() ) {
			while ( have_posts() ) {
			the_post();
			get_template_part( 'template-parts/content', get_post_type() );
				}
			}
		?>
		<?php get_template_part( 'template-parts/pagination' ); ?>
      </div>
    </div>
    <!-- /#page-content-wrapper -->

  </div>
  <!-- /#wrapper -->

  <!-- Bootstrap core JavaScript -->
  <script src="https://www.accend4web.co.uk/Monnow/wp-content/themes/twentytwenty-child/vendor/jquery/jquery.min.js"></script>
  <script src="https://www.accend4web.co.uk/Monnow/wp-content/themes/twentytwenty-child/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

  <!-- Menu Toggle Script -->
  <script>
    $("#menu-toggle").click(function(e) {
      e.preventDefault();
      $("#wrapper").toggleClass("toggled");
    });
	
  /**
   * forEach implementation for Objects/NodeLists/Arrays, automatic type loops and context options
   *
   * @private
   * @author Todd Motto
   * @link https://github.com/toddmotto/foreach
   * @param {Array|Object|NodeList} collection - Collection of items to iterate, could be an Array, Object or NodeList
   * @callback requestCallback      callback   - Callback function for each iteration.
   * @param {Array|Object|NodeList} scope=null - Object/NodeList/Array that forEach is iterating over, to use as the this value when executing callback.
   * @returns {}
   */
    var forEach=function(t,o,r){if("[object Object]"===Object.prototype.toString.call(t))for(var c in t)Object.prototype.hasOwnProperty.call(t,c)&&o.call(r,t[c],c,t);else for(var e=0,l=t.length;l>e;e++)o.call(r,t[e],e,t)};

    var hamburgers = document.querySelectorAll(".hamburger");
    if (hamburgers.length > 0) {
      forEach(hamburgers, function(hamburger) {
        hamburger.addEventListener("click", function() {
          this.classList.toggle("is-active");
        }, false);
      });
    }
  </script>
</body>
</html>

[Erik_J]

@multichild1

but its the wrong way around.

Hi multichild1, welcome to the forums!

I think you have mixed the toggle state with the default state.

I’ll move your thread to the JavaScript forum as I think the issue is in the script.

[rpg_digital]

Just my take, but can you change the initial state in your template

So depending on whether you want the menu to be opened or closed on page load the HTML needs to be edited as follows

page loads menu in closed state

<div class="d-flex" id="wrapper"> 

changed to

<div class="d-flex toggled" id="wrapper"> 

or

page loads menu in opened state

<button class="hamburger hamburger--arrow" type="button" id="menu-toggle"> 

changed to

<button class="hamburger hamburger--arrow is-active" type="button" id="menu-toggle">

essentially it’s one or the other ‘toggled’ or ‘is-active’ not both

Question: Do you have numerous ‘hamburger’ menus?

If it is only one, then I would have thought you could do away with

var forEach=function(t,o,r){if("[object Object]"===Object.prototype.toString.call(t))for(var c in t)Object.prototype.hasOwnProperty.call(t,c)&&o.call(r,t[c],c,t);else for(var e=0,l=t.length;l>e;e++)o.call(r,t[e],e,t)};

var hamburgers = document.querySelectorAll(".hamburger");
...
...

and just use

$("#menu-toggle").click(function(e) {
  e.preventDefault();
  
  $(this).toggleClass("is-active");
  $("#wrapper").toggleClass("toggled");
});

[multichild1]

Thats great thank you, I understand now.

Thanks for your help