PRIMARY PAGE HEADER

Layout

The basic page layout.

Observe that the .page class is important to the modal component since they work togehter to disable scrolling in the background when the modal has long content.

<body>

    <div class="container-fluid">			
	
        <div class="row">
            <nav class="navbar">						
                NAVBAR
            </nav>
        </div>
		
        <div class="row">
            <div class="col sidebar">
                SIDEBAR
            </div>
            <div class="col page">				
                <div class="row">
                    <div class="col primary-page-header">
                        PRIMARY PAGE HEADER
                    </div>
                </div>
                    
                <div class="row">
                    <div class="col page-content">
                        PAGE CONTENT
                    </div>
                </div>
            </div>
        </div>		
	
    </div>
	
</body>

Sidebar

Use a sidebar for a navigation menu or some other content.

The sidebar can collaps on a viewport smaller than large (lg) and a hamburger menu button appears in the navbar to the left. The button toggles the sidebar that slides in and out to the left. To make this work, some modifications has to be done to the basic layout.

<head>
    <script src="js/toggle-sidebar.js"></script>
</head>

<body>

    <div class="container-fluid">			
	
        <div class="row">
            <div class="col navbar">
                <button class="btn btn-secondary-alt d-lg-none" onclick="toggleSidebar('leftSidebar')"><i class="fas fa-bars fa-lg"></i></button>
                <div class="navbar-logo">
                    LOGO
                </div>
            </div>
        </div>
		
        <div class="row">
            <div class="col sidebar sidebar-collapse" id="leftSidebar">
                SIDEBAR
            </div>
            <div class="col page">				
                PAGE
            </div>
        </div>		
	
    </div>
	
</body>
  • Include the toggle function toggle-sidebar.js to the head-tag.
  • The button is added before the .navbar-logo.
    • The styling and content can be whatever you want.
    • Add .d-lg-none if you want the button to hide on a large screen (it doesn't do anything on large screns).
    • The onclick event must contain the function toggleSidebar() which must pass the id of the sidebar, in this case 'leftSidebar'. This is because there can be other sidebars on the page that should not be toggled.
  • Add the .sidebar-collapse class to the sidebar to make it collapseable.
  • Give the sidebar an id, in this case 'leftSidebar'.