Responsive Navbar with Sub Navbar

Question

Good Day,

Forgive me as my nav vocabulary is not the best. If this question is confusing I apologize.

I'm working on a navigation bar that needs to be centered on the page at 768px and above. The items in the nav open (or perhaps toggle) a subnav that lives directly below. These nav also should appear centered on the page.

I have been able to work through the responsive portion of the nav bar, having the main items align vertically and the sub nav menu of each item roll out below, and I gave them an indent for some separation. This is working well.

However, my issue is not the responsive side, but the behavior at a width greater that 768px. What happens is that toggling a menu's sub navigation pushes the other main items down the page below the sub nav.

Here's my code:

$(document).ready(function () {

    //stick in the fixed 100% height behind the navbar but don't wrap it
    $('#slide-nav.navbar-inverse').after($(''));
  
    $('#slide-nav.navbar-default').after($(''));  

    // Enter your ids or classes
    var toggler = '.navbar-toggle';
    var pagewrapper = '#page-content';
    var navigationwrapper = '.navbar-header';
    var menuwidth = '100%'; // the menu inside the slide menu itself
    var slidewidth = '80%';
    var menuneg = '-100%';
    var slideneg = '-80%';


    $("#slide-nav").on("click", toggler, function (e) {

        var selected = $(this).hasClass('slide-active');

        $('#slidemenu').stop().animate({
            left: selected ? menuneg : '0px'
        });

        $('#navbar-height-col').stop().animate({
            left: selected ? slideneg : '0px'
        });

        $(pagewrapper).stop().animate({
            left: selected ? '0px' : slidewidth
        });

        $(navigationwrapper).stop().animate({
            left: selected ? '0px' : slidewidth
        });


        $(this).toggleClass('slide-active', !selected);
        $('#slidemenu').toggleClass('slide-active');


        $('#page-content, .navbar, body, .navbar-header').toggleClass('slide-active');


    });


    var selected = '#slidemenu, #page-content, body, .navbar, .navbar-header';


    $(window).on("resize", function () {

        if ($(window).width() > 767 && $('.navbar-toggle').is(':hidden')) {
            $(selected).removeClass('slide-active');
        }


    });

});

	.containerFluid {
	  width: 1280px;
	  margin: 0 auto;
	}
	
	@media (max-width:767px) {
	  .subMenuDiv {
	    position: realtive;
	  }
	}
	
	body.slide-active {
	  overflow-x: hidden
	}
	/*first child of #page-content so it doesn't shift around*/
	
	.no-margin-top {
	  margin-top: 0px!important
	}
	
	#slide-nav .navbar-toggle .icon-bar {
	  background: white;
	}
	/*wrap the entire page content but not nav inside this div if not a fixed top, don't add any top padding */
	
	#page-content {
	  position: relative;
	  padding-top: 70px;
	  left: 0;
	}
	
	#page-content.slide-active {
	  padding-top: 0
	}
	/* put toggle bars on the left :: not using button */
	
	#slide-nav .navbar-toggle {
	  cursor: pointer;
	  position: relative;
	  line-height: 0;
	  float: left;
	  margin: 0;
	  width: 30px;
	  height: 40px;
	  padding: 10px 0 0 0;
	  border: 0;
	  background: transparent;
	}
	/* icon bar prettyup - optional */
	
	#slide-nav .navbar-toggle > .icon-bar {
	  width: 100%;
	  display: block;
	  height: 3px;
	  margin: 5px 0 0 0;
	}
	
	#slide-nav .navbar-toggle.slide-active .icon-bar {
	  background: orange
	}
	
	.navbar-header {
	  position: relative
	}
	
	#page-content {
	  width: 1280px;
	  margin: 0 auto;
	}
	/* un fix the navbar when active so that all the menu items are accessible */
	
	.navbar.navbar-fixed-top.slide-active {
	  position: relative
	}
	
	@media (max-width:767px) {
	  #slide-nav .container {
	    margin: 0!important;
	    padding: 0!important;
	    height: 100%;
	  }
	  #slide-nav .navbar-header {
	    margin: 0 auto;
	    padding: 0 15px;
	  }
	  #slide-nav .navbar.slide-active {
	    position: absolute;
	    width: 80%;
	    top: -1px;
	    z-index: 1000;
	  }
	  #slide-nav #slidemenu {
	    background: #f7f7f7;
	    left: -100%;
	    width: 80%;
	    min-width: 0;
	    position: absolute;
	    padding-left: 0;
	    z-index: 2;
	    top: -8px;
	    margin: 0;
	  }
	  #slide-nav #slidemenu .navbar-nav {
	    min-width: 0;
	    width: 100%;
	    margin: 0;
	  }
	  #slide-nav #slidemenu .navbar-nav .dropdown-menu li a {
	    min-width: 0;
	    width: 80%;
	    white-space: normal;
	  }
	  #slide-nav {
	    border-top: 0
	  }
	  #slide-nav.navbar-inverse #slidemenu {
	    background: #333
	  }
	  /* this is behind the navigation but the navigation is not inside it so that the navigation is accessible and scrolls*/
	  #navbar-height-col {
	    position: fixed;
	    top: 0;
	    height: 100%;
	    bottom: 0;
	    width: 80%;
	    left: -80%;
	    background: #f7f7f7;
	  }
	  #navbar-height-col.inverse {
	    background: #333;
	    z-index: 1;
	    border: 0;
	  }
	  #slide-nav .navbar-form {
	    width: 100%;
	    margin: 8px 0;
	    text-align: center;
	    overflow: hidden;
	    /*fast clearfixer*/
	  }
	  #slide-nav .navbar-form .form-control {
	    text-align: center
	  }
	  #slide-nav .navbar-form .btn {
	    width: 100%
	  }
	}
	
	@media (min-width:768px) {
	  #page-content {
	    left: 0!important
	  }
	  .navbar.navbar-fixed-top.slide-active {
	    position: fixed
	  }
	  .navbar-header {
	    left: 0!important
	  }
	}


    
      
        
          Toggle navigation
          
          
          
        
      
      
        
          Section 1
            
              
                Sub-Section 1 1
                Sub-Section 1 2
                Sub-Section 1 3
                Sub-Section 1 4
              
            
          
          Section 2
            
              
                Sub-Section 2 1
                Sub-Section 2 2
                Sub-Section 2 3
                Sub-Section 2 3
              
            
          
          Section 3
            
              
                Sub-Section 3 1
                Sub-Section 3 2
                Sub-Section 3 3

Here's a Fiddle https://jsfiddle.net/8j600vmd/4/ Some style elements are missing for brevity.

Sensoray · Accepted Answer

Here's a method of doing it: Move the subMenuDiv out from under the

's and then put the submenus in that div. That way they appear under the menu, without you having to use position:absolute. Xnay some of the floats and text-align to center, and viola! I did not add in the js to make the others close though.

https://jsfiddle.net/meinkep2/8j600vmd/6/

Responsive Navbar with Sub Navbar

Answers (1)

Related Questions