1

I could make a sidebar and responsive top navbar, but on smaller viewport (mobile, tablet), the sidebar doesn't adjust its position according to top navbar's one.

I have used fixed value to make it fixed on the left side, but this also makes it cant resize the height on a smaller screen, a gap appears between the top navbar and sidebar-content area

How can you make this sidebar responsive as the top navbar when resizing?

This is my code:

https://www.codeply.com/go/XHDeSP3Fzv

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Dorami - Nền tảng quản lý bán hàng và kho vận</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <style type="text/css">
        nav div ul li a.nav-link {
            color: white;
            padding: 1rem;
        }
        nav div ul li a.nav-link:hover {
            background-color: #004d40;
        }
        body { 
            padding-top: 50px; 
            padding-left: 80px;
        }
        .navbar {

            background-color: #00695c;
        }
        .sidenav {
            height: 100%; /* Full-height: remove this if you want "auto" height */
            width: 60px; /* Set the width of the sidebar */
            position: fixed; /* Fixed Sidebar (stay in place on scroll) */
            z-index: 1; /* Stay on top */
            top: 50px; /* Stay at the top */
            left: 0;
            background-color: #4e342e; /* Black */
            overflow-x: auto; /* Disable horizontal scroll */
        }
        .sidenav a {
            text-decoration: none;
            font-size: 16px;
            color: white;
            display: block;
            padding: 20px 0;
        }
        .sidenav a:hover {
            background-color: #3e2723;
        }
    </style>
</head>
<body>
    <nav class="navbar fixed-top navbar-expand-sm py-0">
        <a class="navbar-brand" href="/dashboard/">
            <img src="/images/logo.webp" width="40" height="40" alt="">
        </a>

        <button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="navbar-nav">
                <li class="nav-item px-2">
                    <a class="nav-link" href="#">Shop Manager</a>
                </li>
                <li class="nav-item px-2">
                    <a class="nav-link" href="#">Customer Care</a>
                </li>
                <li class="nav-item px-2">
                    <a class="nav-link" href="#">Messenger Order</a>
                </li>
            </ul>
        </div>
    </nav>
    <div class="sidenav">
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Clients</a>
        <a href="#">Contact</a>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>  
</body>
</html>
Laczkó Örs
  • 1,082
  • 1
  • 18
  • 38
Nguyễn Thanh
  • 43
  • 1
  • 6
  • The simple fix is just to set a min-height on your header bar. Bootstrap does have some limiitations, and you could also switch to a flexbox layout. – isherwood Sep 25 '19 at 16:36

2 Answers2

2

Here is the updated code, you need to tinker a little with CSS. We never use Padding or margin with HTML/BODY tags.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Dorami - Nền tảng quản lý bán hàng và kho vận</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <style>
        html,body { 
            padding: 0;
            margin: 0;
        }
        nav div ul li a.nav-link {
            color: white;
            padding: 0;
            line-height: 50px;
        }
        nav div ul li a.nav-link:hover {
            background-color: #004d40;
        }
        .fixed-top{
            height: 50px;
        }
        .sidenav {
            height: 100%; /* Full-height: remove this if you want "auto" height */
            width: 60px; /* Set the width of the sidebar */
            position: fixed; /* Fixed Sidebar (stay in place on scroll) */
            z-index: 1; /* Stay on top */
            top: 50px; /* Stay at the top */
            left: 0;
            background-color: #4e342e; /* Black */
            overflow-x: hidden; /* Disable horizontal scroll */
        }
        .sidenav a {
            text-decoration: none;
            font-size: 16px;
            color: white;
            display: block;
            padding: 20px 0;
        }
        .sidenav a:hover {
            background-color: #3e2723;
        }
    </style>
</head>
<body>
    <div>
    <nav class="navbar fixed-top navbar-expand-lg py-0" style="background-color: #00695c;">
        <a class="navbar-brand" href="/dashboard/">
            <img src="/images/logo.webp" width="40" height="40" alt="">
        </a>

        <button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="navbar-nav">
                <li class="nav-item px-2">
                    <a class="nav-link" href="#">Shop Manager</a>
                </li>
                <li class="nav-item px-2">
                    <a class="nav-link" href="#">Customer Care</a>
                </li>
                <li class="nav-item px-2">
                    <a class="nav-link" href="#">Messenger Order</a>
                </li>
            </ul>
        </div>
    </nav>
</div>
    <div class="sidenav">
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Clients</a>
        <a href="#">Contact</a>
    </div>
    <div class="content">
        <h1>Hello</h1>
    </div>
</body>
</html>

Feel free to comment for further queries

SGS Sandhu
  • 141
  • 3
  • You mean using padding and margin in body tag not recommended ?, but why ? – Nguyễn Thanh Sep 26 '19 at 04:22
  • There are ho hard rules in HTML. This is one of the few conventions followed by the designer community – SGS Sandhu Sep 26 '19 at 14:54
  • 1
    The styles that are added by default by the browser to the elements of HTML page called user agent styles. These styles vary for each browser. For our webpage to look the same in all browsers, we reset the default styles and then define our stylesheet. Also if you use any front-end CSS library, This is defined in every library If you look at Reset CSS(This is part of almost every CSS library) `https://meyerweb.com/eric/tools/css/reset/` Also in [Bootstrap](https://getbootstrap.com/),[Aione Framework](https://aioneframework.com/) and [MaterializeCSS](https://materializecss.com/) – SGS Sandhu Sep 26 '19 at 15:07
  • if body padding set to 0, the div content will be overlapped, my idea of using body padding comes from this https://stackoverflow.com/questions/11124777/twitter-bootstrap-navbar-fixed-top-overlapping-site i havent found another way to make content visible out of this one yet – Nguyễn Thanh Sep 26 '19 at 16:04
  • I agree to your point and great to know that your problem is solved. Please vote up if I helped you. – SGS Sandhu Sep 27 '19 at 15:40
0

I'm not seeing the gap when I resize the screen. However, I am seeing that the mobile menu button drops down and blocks the first link on the sidebar. You could just make a media query and adjust the top: 50px value to account for the increased height of the main navbar.

aqua
  • 23
  • 9