Question 45862 in CSS Question posted in
Some basic documentation can be found here.

Getting a toggle button on navbar to work – CSS

I am having trouble with a navbar when it’s on tablet and mobile size. When I click on the dropdown button I need it to take up the whole page. Basically it has to take up the whole height when I click on the dropdown button for mobile or tablet. I think I need to use JavaScript for it but I don’t know how exactly.

This is my navbar. I’m using Bootstrap 4 and also some CSS to edit it but I just need to somehow make it for tablet and mobile like I explained above.

 <nav class="navbar navbar-expand-lg navbar-light bg-yellow px-5 py-3 font-weight-bold" id="navbar">
        <div class="logo d-flex flex-column">
          <a href="index.html" class="mx-auto"><img src="./Design/Logo.png"  width="40" height="40" class="logo-img"></a>
        <a class="navbar-brand mx-auto font-weight-bold" href="#">Logo</a>
        </div>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav w-90 justify-content-around ml-lg-auto">
            <li class="nav-item">
              <a class="nav-link" href="#">Academy</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Academy</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Academy</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Academy</a>
            </li>
            <li class="nav-item justify-self-end">
                <a href="./contact.html" class="btn btn-danger">Button</a>
            </li>
          </ul>
        </div>
    </nav>

enter image description here

enter image description here

This is how its supposed to look like when clicked on the dropdown button when on tablet or mobile—basically it has to take up the whole space.

Tags:

2

Answers


  1. 0

    I’m guessing that you want the navbar to be full-height when the button is clicked. For that you’ll need a javascript function:

    <script>
    function toggleNav() {
        document.querySelector("#navbar").style.height = "100%"
        document.body.overflow = "hidden" // added this for making the page unscrollable.
    }
</script>

    This script tag will be placed at bottom of the body tag. And what it basically does is giving height: 100%; to the #navbar when called.

    Now we need to call the function when the button is clicked. So, we’ll add onclick="toggleNav();" to the button. Like this:

    <button onclick="toggleNav();" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">

    If you check your webpage now, you’ll see that the #navbar DOES get the height: 100%; when the button is triggered. But you won’t see anything happen, that is because our html tag’s height is limited. So, lets fix that by adding these css codes:

    html, body {
    height: 100%;
}

    Let me know if this is what you wanted.

    Login or Signup to reply.
  2. 0

    From what I am able to understand you want the navbar to cover the entire screen by hiding the content.
    In bootstrap 5 there is offcanvas component for this functionality.

    To implement similar functionality in bootstrap 4 you would need to use jQuery.

    Here is an to use off-canvas functionality in bootstrap 4.
    Hope this helps.

    $(document).ready(function() {
  var fixHeight = function() {
    $('.navbar-nav').css(
      'max-height',
      document.documentElement.clientHeight - 150
    );
  };
  fixHeight();
  $(window).resize(function() {
    fixHeight();
  });
  $('.navbar .navbar-toggler').on('click', function() {
    fixHeight();
  });
  $('.navbar-toggler, .overlay').on('click', function() {
    $('.mobileMenu, .overlay').toggleClass('open');
  });
});
    @media (max-width: 992px) {
  .mobileMenu {
    transform: translateX(-100%);
    position: fixed;
    top: 0px;
    bottom: 0;
    margin: auto;
    left: 0;
    transition: all ease 0.25s;
    &.open {
      transform: translateX(0%);
    }
    .navbar-nav {
      overflow-y: auto;
    }
  }
  .overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    &.open {
      display: block;
      z-index: 1029;
    }
  }
}
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Off-canvas Sidebar Navigation For Bootstrap 4 Example</title>
  <link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha256-L/W5Wfqfa0sdBNIKN9cG6QA5F2qx4qICmU2VgLruv9Y=" crossorigin="anonymous" />
  <link rel="stylesheet" href="css/style.css" />
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <div class="container-fluid">
      <a class="navbar-brand order-1 order-lg-0 ml-lg-0 ml-2 mr-auto" href="#">jQueryScript</a>
      <button class="navbar-toggler align-self-start" type="button">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="collapse navbar-collapse bg-dark p-3 p-lg-0 mt-5 mt-lg-0 d-flex flex-column flex-lg-row flex-xl-row justify-content-lg-end mobileMenu" id="navbarSupportedContent">
        <ul class="navbar-nav align-self-stretch">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0 align-self-stretch">
          <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">
            Search
          </button>
        </form>
      </div>
    </div>
  </nav>
  <div class="overlay"></div>
  <div class="container py-4 my-5">
    <div class="row">
      <div class="col-md-12">
        <h1>Off-canvas Sidebar Navigation For Bootstrap 4</h1>
        <div id="carbon-block" style="margin:50px auto"></div>
        <div style="margin:50px auto">

        </div>
      </div>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.bundle.min.js" integrity="sha256-OUFW7hFO0/r5aEGTQOz9F/aXQOt+TwqI1Z4fbVvww04=" crossorigin="anonymous"></script>

</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search