Make the Bootstrap navbar hidden by default

I am a beginner in using bootstrap and I am working on setting up a left side navigation bar that is closed by default when the page loads, requiring the user to click a menu link to open it. The page is a content-heavy dashboard that needs as much space as possible.

Here is the relevant code snippet:

<nav class="navbar-default navbar-static-side" role="navigation">
    <div class="sidebar-collapse">
        <ul class="nav metismenu" id="side-menu">
            <li class="nav-header">
                <div class="dropdown profile-element">
                        <a href="index.html"><img src="img/lc-logo.png" width="172"/></a>
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <span class="clear"> <span class="block m-t-xs"> <strong class="font-bold">(username)</strong></span> 
                            <span class="text-muted text-xs block">(user role) <b class="caret"></b></span> </span>
                        </a>
                        <ul class="dropdown-menu animated fadeInRight m-t-xs">
                            <li><a href="#">Logout</a></li>
                        </ul>
                </div>
                <div class="logo-element">
                    LC
                </div>
            </li>
            <li class="active">
                <a href="index.html"><i class="fa fa-calendar-o fa-lg"></i> <span class="nav-label">Schedule</span></a>
            </li>
            <li>
                <a href="index.html"><i class="fa fa-th fa-lg"></i> <span class="nav-label">Releases</span></a>
                <ul class="nav nav-second-level">
                    <li class="active"><a href="release.html">v2.3</a></li>
                    <li><a href="release.html">v2.6</a></li>
                    <li><a href="release.html">v2.7</a></li>
                    <li><a href="release.html">v3.0 <span class="label label-primary pull-right">NEW</span></a></li>
                    <li><a href="offcycle.html">Off Cycle <span class="label label-primary pull-right">NEW</span></a></li>
                </ul>
            </li>
            <li><a href="testing.html"><i class="fa fa-bug fa-lg"></i> <span class="nav-label">Test Status</span></a></li>
            <li><a href="stats.html"><i class="fa fa-bar-chart fa-lg"></i> <span class="nav-label">Stats</span></a></li>
            <li><a href="settings.html"><i class="fa fa-cogs fa-lg"></i> <span class="nav-label">Settings</span></a></li>
        </ul>
    </div>
</nav>
jqueryhtmlcsstwitter-bootstrap

Answer №1

To easily achieve this, you can hide your navigation bar by setting the nav element to hidden in your CSS and then link it to a button for toggling visibility on click.

Start by giving your navigation bar an id of nav, like this:

 <nav id="nav" class="navbar-default navbar-static-side" role="navigation">

Then, create a button outside of the nav tag:

<a href="#" id="btn" class="btn btn-default">Toggle</a>

In your CSS, set the style for #nav to:

#nav{
   display:none;
}

This will initially hide your navigation bar.

In your JavaScript file, add the following code:

$('#btn').on('click',function(){
   $('#nav').slideToggle();
});

Now, your navigation bar will be hidden by default and will toggle visibility when you click the button.

Check out a CODEPEN DEMO here

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

How to Use Django to Load a Text File into an HTML File with the Help of

I came across an interesting code example on a website called w3schools.com that I would like to incorporate into my Django project. The code utilizes the jquery load() function to load a text file into an HTML file. Here is a snippet of the code: <!DOC ...

javascripthtmljquerydjango

Tips for aligning two canvases with different heights at the top in HTML5

My problem involves two canvases housed within a single <div>. Despite their different heights, they are currently aligned at the bottom. +-------+ + + +-------+ + + + + + + +-------+ +-------+ Is the ...

csshtml

jscrollpane does not work properly in Firefox, but it functions correctly in Chrome

I am currently utilizing jScrollpane to display a combination of images and a div in a horizontal format. While I have successfully implemented it on Chrome, it appears that Firefox is not applying the CSS correctly to prevent images from wrapping, resulti ...

jqueryhtmlcssjscrollpane

HTML/CSS - Enhances user experience by zooming in on select tag when tapped on mobile devices

I am experiencing an issue with a select menu on mobile devices. Whenever I tap on the menu, it seems to zoom in slightly. Is there a particular -webkit property causing this behavior? How can I prevent the screen from zooming when I tap on the select me ...

javascripthtmlcsswebkit

The border-radius style will not be effective on the top part of the div

I'm currently developing a landing page for my personal use, but I've encountered an issue. There is a div with a border-radius named .popOut. The border-radius is applied to the bottom of the div but not the header part. Why is this happening? H ...

htmlcss

What is the best way to add an element while preserving its original placement?

I need a solution to duplicate the code of an element and transfer it to another element without removing it from its original position. Currently, I have a JavaScript function that allows you to move a picture to a box when it's clicked. However, th ...

javascriptjqueryhtmlcss

Scrollbar auto-scrolling problem

I have been attempting to create a div that displays content scrolling horizontally, similar to a slideshow, after a set period of time. I am utilizing the mcustomscrollbar plugin in my implementation. As I iterate through a for loop to increment the IDs a ...

javascriptjqueryhtml

Utilizing Javascript and CSS for horizontal alignment from left to right

I have a JavaScript function that generates a list of store locations and creates a DIV beneath the map. Currently, the items are displayed top to bottom on the page. However, I would like to change the layout so that the items are shown as 3 in a row fro ...

javascriptcss

What can I use instead of "display:none" in Javascript or Jquery?

A problem I encountered with my website involves a menu that toggles content visibility based on menu item clicks. The JQuery script responsible for this behavior is shown below: $(document).ready(function() { $("#bioLink").click(function(){ $ ...

javascriptjquerycss

Rotate text vertically (90 degrees) on IE and Firefox browsers

On one of my pages, I have an asp GridView and I want to display the text vertically to improve its printing quality. I am currently using CSS to achieve this effect: .rotate { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); width: 25px; ...

asp.netcsstextrotation

Using jQuery to toggle between two elements and updating the SELECT field

<div class="r_row"> <div class="row field_currency"> <div class="f_row"><label class="" for="currency">Currency</label></div> <div class="r_row"> <select id="currency" name="currency" class=" select ...

javascriptjqueryhtmlcss

"Methods for manipulating the text within an HTML li element and then reinserting it into the main

I have been attempting to replace underscores with a different string in list items, but for some reason, the original text of the list item is not being altered. Here is the code I am using: $.each($.parseHTML(customFormSentenceView), function (i, item ...

javascriptjqueryhtmltext

Attach various events according to visibility status

I have a specific jquery code that I would like to bind according to the visibility of a particular box. Depending on whether the box is visible or not, I want to call different functions. Here's the code snippet that I think should work in theory. Wh ...

jquerybind

Encountering a Cross-Origin Resource Sharing (CORS) error when attempting to process payments using Node.js

I am trying to process a payment using PayPal SDK. My frontend is built with AngularJS and my backend uses Node.js. In my frontend, I simply make a call to a route on my Node server like this: $http.post('/paypal/pay', cart) I have CORS config ...

javascriptjqueryangularjsnode.jspaypal-sandbox

Struggling to resolve the "undefined index id" issue in PHP AJAX despite trying multiple approaches

While creating a click event to send the employee's ID, I am encountering an issue where even though I can see the value using console.log(), I continue to receive an index :id error. <input type="button" class="btn btn-primary" value="Appointment ...

phpjqueryajax

Ways to enhance numerical count and showcase it on a dynamically inserted div using jQuery

There is a link on top of a static div that is already loading by default (Div number 1). As shown in the image, each time I click on the hyperlink, a new div is added beneath every existing one. I want to be able to increase the count of the div numbers ...

jqueryincrement

Achieving a balanced css navbar size that fits the page dimensions

I'm encountering an issue with my navbar where it gets distorted when the window size is too small. How can I make it shrink proportionally to fit the page? I've attempted several solutions, but they only reduce the text size without properly res ...

javascripthtmlcssnavbar

Tips for refreshing the default style of Material UI select

I'm having trouble customizing the default background color of the first menuItem in the select component. The class I need is not visible when inspecting the element, as the background color disappears upon inspection. Steps to reproduce: 1. Click ...

javascripthtmlcssreactjsmaterial-ui

How to dynamically set a radio button as checked or active based on the current state value

Currently, I have a header that rotates through 4 images every 5 seconds. Users can manually cycle through these images using 5 radio buttons. The styling for the active/checked radio button is only applied when users click on it themselves. However, if t ...

javascripthtmlreactjsradio-buttonstate

A total of 12 columns within the Foundation grid layout, with ample space for customization

My layout structure is as follows: <div class="row"> <div class="columns small-12 large-6 medium-12 panel-wrapper"> Box no 1 </div> <div class="columns small-12 large-6 medium-12 panel-wrapper"> Box n ...

htmlcsszurb-foundation