How can i make the sidebar responsive? [closed]

Asked
Active3 hr before
Viewed126 times

7 Answers

responsivesidebarclosed
90%

Learn how to create a responsive side navigation menu with CSS.,Tip: Go to our CSS Navbar Tutorial to learn more about navigation bars.,If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Pretag
 Pretag team - issue, fix, solve, resolve
88%

As of late, there is another design choice you can make: consolidate your sidebar links into a dropdown on mobile devices. This method provides an intuitive user experience as your sidebar links will collapse into a dropdown select box that, upon click, acts as a link.,Within the HTML, you can see how we set up to different sets of the sidebar links. The first is a select box that will appear on mobile and the second is what would be visible on desktop:,And with the above code you can transform how your sidebar navigational links appear on mobile devices. Take a look at the JSFiddle below and be sure to resize your viewpoint to get the full effect of how things appear on all devices.

Pretag
 Pretag team - issue, fix, solve, resolve
72%

You said sidebar, but your markup doesn't really look like a sidebar to me, it looks like a responsive topnav. I'll try to make sense of it as best I can, and I will demonstrate a working sidebar as well, in case that is what you really do want.,You said sidebar, but your markup doesn't really look like a sidebar to me, it looks like a responsive topnav. I'll try to make sense of it as best I can, and I will demonstrate a working sidebar as well, in case that is what you really do want. ,Or, you could simply rely on the window's width (but small desktop windows will be treated like the mobile version):

It looks like this has been answered here: https://stackoverflow.com/a/36289507/378779 Basically, add one of the navbar-expand-* classes to your <nav>, e.g.:

<nav class="menu menu-open navbar-expand-md" id="theMenu">
load more v
65%

Building responsive navigations for mega sites is never an easy task. If you’re working on an admin panel, chances are you’ll need to design and develop a vertical menu, with plenty of sub-categories. That’s why we decided to share today's snippet! Our Sidebar navigation can make your life easier by providing a starting, simple template for your next project ;),Besides, we integrated a Vanilla JS modified version of the jQuery-menu-aim plugin to differentiate between users trying to hover over a sidebar item and user trying to navigate into a submenu’s contents (desktop version only).,An easy-to-integrate side, vertical navigation, ideal for dashboards and admin areas.

The HTML structure is composed by 2 main elements: a <header> element, containing the website logo, the search form, the navigation trigger (.cd-nav-trigger - mobile version only) and the top navigation, and a <main> element containing the page main content (div.content-wrapper) and the sidebar navigation (nav.cd-side-nav).

<header class="cd-main-header js-cd-main-header">
   <div class="cd-logo-wrapper">
      <a href="#0" class="cd-logo"><img src="assets/img/cd-logo.svg" alt="Logo"></a>
   </div>

   <div class="cd-search js-cd-search">
      <form>
         <input class="reset" type="search" placeholder="Search...">
      </form>
   </div> <!-- cd-search -->

   <button class="reset cd-nav-trigger js-cd-nav-trigger" aria-label="Toggle menu"><span></span></button>

   <ul class="cd-nav__list js-cd-nav__list">
      <li class="cd-nav__item"><a href="#0">Tour</a></li>
      <li class="cd-nav__item"><a href="#0">Support</a></li>
      <li class="cd-nav__item cd-nav__item--has-children cd-nav__item--account js-cd-item--has-children">
         <a href="#0">
            <img src="assets/img/cd-avatar.svg" alt="avatar">
            <span>Account</span>
         </a>

         <ul class="cd-nav__sub-list">
            <li class="cd-nav__sub-item"><a href="#0">My Account</a></li>
            <!-- other list items here -->
         </ul>
      </li>
   </ul>
</header> <!-- .cd-main-header -->

<main class="cd-main-content">
   <nav class="cd-side-nav js-cd-side-nav">
      <ul class="cd-side__list js-cd-side__list">
         <li class="cd-side__label"><span>Main</span></li>
         <li class="cd-side__item cd-side__item--has-children cd-side__item--overview js-cd-item--has-children">
            <a href="#0">Overview</a>

            <ul class="cd-side__sub-list">
               <li class="cd-side__sub-item"><a href="#0">All Data</a></li>
               <!-- other list items here -->
            </ul>
         </li>

         <li class="cd-side__item cd-side__item--has-children cd-side__item--notifications cd-side__item--selected js-cd-item--has-children">
            <a href="#0">Notifications<span class="cd-count">3</span></a>

            <ul class="cd-side__sub-list">
               <li class="cd-side__sub-item"><a href="#0">All Notifications</a></li>
               <!-- other list items here -->
            </ul>
         </li>

         <!-- other list items here -->
      </ul>

      <!-- other unordered lists here -->
   </nav>

   <div class="cd-content-wrapper">
      <!-- main content here -->
   </div> <!-- .cd-content-wrapper -->
</main> <!-- .cd-main-content -->
load more v
75%

Bootstrap (Part-5) | DropDowns and Responsive Tabs,How to place SVG icons on a round circle side by side to another div using Bootstrap?,Responsive images in Bootstrap with Examples

40%

One of the great things about Bootstrap is that it is responsive by default. Unfortunately, this can also cause some small issues when the layout has a sidebar.,If the side menu has a fixed set of items, it doesn’t make sense for this part of the page to have its width changed as the screen size changes.,Here is an animated gif of it scaling. Pay attention to the sidebar. You will notice that as the page width gets smaller, so does the sidebar.

<nav>...</nav>
<div class="container-fluid">
   <div class="row">
      <div class="col-sm-3 col-md-2 sidebar">
         <ul class="nav nav-sidebar">
            <li class="active"><a href="#">Overview</a></li>
            <li><a href="#">Reports</a></li>
            <li><a href="#">Analytics</a></li>
            <li><a href="#">Export</a></li>
         </ul>
      </div>
      <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
         <h1 class="page-header">Dashboard</h1>
         ...

      </div>
   </div>
</div>
load more v
22%

Great stuff! Thank you!,This is the coolest sidenav i have ever seen. Congrats! The only thing i wonder is how do i close the sidenav on mobile on clicking a button (and not closing on desktop also).,About your question, the sidenav can be closed using the close button or clicking on the content area.

Pretag
 Pretag team - issue, fix, solve, resolve

Other "responsive-sidebar" queries related to "How can i make the sidebar responsive? [closed]"