Making the toggle button functional on the navbar

Trying to customize my navbar for tablet and mobile devices is proving to be a challenge. I am looking for a way to make the dropdown button take up the entire page when clicked on. It seems like JavaScript might be the solution, but I'm not quite sure how to implement it.

The current setup uses Bootstrap 4 and some CSS for styling, but I need to adjust it to behave as described above on smaller screens.

 <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 justify-self-end">
                <a href="./contact.html" class="btn btn-danger">Button</a>
            </li>
          </ul>
        </div>
    </nav>

View image here

View image here

I am aiming for the design where clicking on the dropdown button on tablets or mobiles expands it to fill the whole space available.

javascriptcssbootstrap-4navbar

Answer №1

It seems like you're looking to have the navbar cover the entire screen and hide the content, which can be achieved using the offcanvas component in Bootstrap 5.

If you're working with Bootstrap 4, you'll need to utilize jQuery for similar functionality.

Here is an example of implementing off-canvas functionality in Bootstrap 4. Feel free to use it as a reference:

$(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>

Answer №2

Perhaps you are looking to make the navbar full-height when a button is clicked. In order to achieve this, you will need to implement 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 snippet should be placed at the bottom of the body tag. It essentially assigns height: 100%; to the #navbar element upon invocation.

To trigger the function when the button is clicked, add onclick="toggleNav();" to the button markup. Like so:

<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 notice that the #navbar indeed receives the height: 100%; property when the button is activated. However, no visible changes occur due to the restricted height set in the HTML tag. To address this, include the following CSS rules:

html, body {
    height: 100%;
}

Please let me know if this aligns with your requirements.

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

Guide to incorporating a fadeIn effect in Jquery triggered by a change event

Looking for some guidance on implementing a fade-in effect on a <p> tag with relevant CSS after making an AJAX call in response to a change event. Below is the current code snippet: $('#scenarioDropdownList').change(function() { var sc ...

javascriptjqueryhtmlcssajax

Looking for some guidance on grasping the concept of strict mode in React and determining what actions can be considered side effects

The other day, I came across a strange bug in React and here is a simplified version of it. let count = 0; export default function App() { const [countState, setCountState] = useState(count); const [countState2, setCountState2] = useState(count); con ...

javascriptreactjs

Guide on creating a readUInt16BE function in a Node.js environment

Looking to implement the readUint16BE function in node.js, here's how it is declared: buf.readUInt16BE(offset, [noAssert]) Documentation: http://nodejs.org/api/buffer.html#buffer_buf_readuint16be_offset_noassert This function reads an unsigned 1 ...

javascriptnode.jsgobyte

What is the best way to delete markers from a leaflet map?

I need to remove markers from my map. I am looking to create a function that will specifically clear a marker based on its ID. I am utilizing Leaflet for the map implementation. Here is my function: public clearMarkers(): void { for (var id in this. ...

javascriptangulartypescriptleaflet

Utilize CSS Animation to bring overlapped images to life

Trying to replicate the animation featured on the CISO website header. I have created a JSFiddle demo showcasing my attempt, but it seems like something is not quite right. img { transition: all .3s ease; overflow: hidden ...

htmlcsscss-animations

Discover the best way to reference a JavaScript variable within an HTML form textfield

I'm having trouble with a script that is supposed to display the selected value from a drop down list in a text field on an HTML form. When I select an option, the value is not appearing in the text field. Can someone please assist me with this issue? ...

javascripthtml

jinja2.exceptions.UndefinedError: The variable 'asset' has not been defined

Currently in my project, I am using a Python backend to fetch data from an API and then rendering it through Flask to the Vue.js frontend. However, I have encountered an error titled that is causing some issues. I have double-checked and printed the varia ...

javascriptpythonvue.jsflask

Using Node.JS, Sequelize, and Moment.JS to format dates

Seeking help on formatting a date loaded from Sequelize in my database. I'm working on a blog and need to display the creation date of an article. Here's my route: app.get("/", (req,res) =>{ Article.findAll({ order:[ [ ...

javascripthtmlnode.jssequelize.js

Tips for effectively utilizing CSS classes with current-device

Attempting to lock the screen orientation in portrait mode for mobile and iPad devices using a CSS snippet found on css-tricks.com. @media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) { html { transform: rotate ...

javascripthtmlcssscreen-orientation

I just finished crafting a dynamic line chart with d3.js within a React environment. However, I am now looking to add some personalized touches to enhance its appearance. Could you kindly review the details and code

I want to create a line chart using React and D3, similar to the one depicted in this image. Presently, I have partially implemented the chart with the code provided below. You can see it here. The code snippet I've developed so far is outlined as f ...

javascriptreactjsd3.jsdata-visualizationreact-d3

How to display a conditional component in a single line with Material UI

I'm facing an issue with a component that is being reused multiple times. Here's the current output: |MyComponent1| |MyComponent2| Specifically, my condition is: if (a == 'One' || b == 'Two'){ <MyComponent data={data}/> ...

javascriptreactjsmaterial-uicomponentsstyling

Navigating the Basics: Understanding the Four Quadrant Selection Grid in a Material UI & React Pop-Up Form

Sorry if these questions seem silly. I'm diving into React & Material-UI without a mentor to guide me, relying on documentation and tutorials. Is there a better place for quick beginner questions? Maybe a chat forum or Slack group? Not sure if Stack i ...

javascriptreactjsformsmaterial-ui

Vue Router generates a URL containing %2F when dealing with slug routes

I am facing an issue in my Vue 3 application where I need to create a route for dynamic slugs. Currently, when using RouterLink, the generated URL contains %2F instead of actual slashes which is not the desired result. For example, the current URL looks l ...

javascriptvue.jsvue-router

Why doesn't package.json typically utilize the preset values stored in the .npmrc file?

Windows 10 x64 Based on the information found here, I created a file called C:\Users\bushm\.npmrc with the following content: author = "Andrey Bushman" However, when I run the command npm init -y in a new directory, I noticed that the pac ...

javascripttypescriptnpmpackage.json

The sticky footer in React shifts upwards when the page has minimal content

Having trouble with my web app's footer not staying at the bottom when there is minimal content on the page. I'm feeling stuck and unsure of how to proceed. Can anyone provide guidance on creating a footer that remains at the bottom of the page, ...

cssreactjs

A step-by-step guide to implementing Inline Linear Gradient in Nuxt/Vue

How can I create a linear gradient overlay on top of my inline background image? I attempted to add a CSS style but the class seems to be positioned beneath the image. <div class="header__bkgd" v-bind:style="{'background-image': 'url(&ap ...

cssvue.jsbackground-imagelinear-gradientsnuxt.js

The HR tag does not display anything following the mailing

Struggling to design a newsletter template with different lines for each product using the HR tag. However, none of my attempts with divs, tables, or CSS properties have been successful. The template looks fine in Chrome, but when sent to the provider, th ...

htmlcsstemplates

I am attempting to activate the HTML5 color picker's popup using JQuery

Is there a way to open a color picker in a popup window when an input[type=color] is clicked, using JavaScript? HTML <div id="customColorPick"></div> <input id="customColorPickInput" type="color" /> JQuery $("#customColorPick").click( ...

javascriptjqueryhtml

Leveraging packages obtained from npm repositories

Recently, I came across this guide about React that included a paragraph that left me puzzled. According to the guide, CommonJS modules (found in npm) cannot be directly used in web browsers due to technical limitations. Instead, you need a JavaScript " ...

javascriptnode.jsnpm

The feature to prevent multiple selections in JSTree is not functioning as expected

Incorporating JSTree into my application involves the code below. this.CreateTreeView = function () { $('#jstree_demo_div').jstree({ 'core': { 'multiple': false, 'data': [ ...

javascriptjqueryjstree