Is there a way to create a dropdown menu that transforms into a burger icon on smaller screens, while still housing all of my navigation items within it?

I'm currently working on a segment of my header that includes a navbar with 3 links, as well as a dropdown menu listing additional functionalities. Here is the current code I have:

<div class="col-md-4 pt-4">
<nav class="navbar navbar-expand-md">
    <div class="container-fluid me-0 pe-0" style="width: fit-content">
        <a href="/index.php?action=who_are_we" class="black_links pe-2"><?php echo $GLOBALS['translation']['who_are_we']; ?></a>
        <a href="/index.php?action=list_activities" class="black_links ps-2 pe-2"><?php echo $GLOBALS['translation']['schedule']; ?></a>
        <a href="/index.php?action=contact" class="black_links ps-2 pe-2"><?php echo $GLOBALS['translation']['contact']; ?></a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav">
                <li class="nav-item dropdown btn-group">
                    <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                        <?php echo $GLOBALS['translation']['show_more']; ?>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end ">
                        <a href="/index.php?action=calendar"><li class="dropdown-item nav-link black_links"><?php echo $GLOBALS['translation']['calendar']; ?></li></a>
                        <a href="/index.php?action=list_news"><li class="dropdown-item nav-link black_links"><?php echo $GLOBALS['translation']['news']; ?></li></a>
                        <a href="/index.php?action=register"><li class="dropdown-item nav-link black_links"><?php echo $GLOBALS['translation']['subscribe']; ?></li></a>
                        <a href="/index.php?action=login"><li class="dropdown-item nav-link black_links"><?php echo $GLOBALS['translation']['login']; ?></li></a>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

My issue relates to responsiveness. Using Bootstrap for this setup, on a large screen, it looks like this: Navbar in large screen

However, when reducing the screen size to medium or smaller, there are problems. The burger icon appears, but upon clicking it, only one item ("Show more") is displayed, leading to an awkward layout like this: Navbar in medium or less screen after clicking burger-icon

Subsequently, once "Show more" is selected, the display changes to this format: Navbar in medium or less screen after clicking on show more

My objective is to have the dropdown items appear instead of "Show more" when clicking the burger icon in a medium or smaller screen. Additionally, I am unsure how to integrate the three initial items (who we are, schedule, and contact) into the burger icon when the screen size decreases.

Any assistance would be greatly appreciated!

Answer №1

The CSS code for the hamburger menu can be enhanced by eliminating the dropdown using only CSS:

@media (max-width:991px){
        button.show-more {display: none;}
        ul.dropdown-menu {display: block;}
    }
<body>
    <head>
        <title>Demo</title>
    </head>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="11737e7e65626563706151243f223f213c707d61797020">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg">
    <div class="container-fluid">
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <a href="/index.php?action=who_are_we" class="black_links pe-2">Who are we <?php echo $GLOBALS['translation']['who_are_we']; ?></a>
        <a href="/index.php?action=list_activities" class="black_links ps-2 pe-2">Schedule<?php echo $GLOBALS['translation']['schedule']; ?></a>
        <a href="/index.php?action=contact" class="black_links ps-2 pe-2">Contact<?php echo $GLOBALS['translation']['contact']; ?></a>

        <ul class="navbar-nav">
          <li class="nav-item dropdown">
            <button class="btn dropdown-toggle show-more" data-bs-toggle="dropdown" aria-expanded="false">
              Show More
            </button>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#"><?php echo $GLOBALS['translation']['calendar']; ?>Calendar</a></li>
              <li><a class="dropdown-item" href="#"><?php echo $GLOBALS['translation']['news']; ?>News</a></li>
              <li><a class="dropdown-item" href="#"><?php echo $GLOBALS['translation']['subscribe']; ?>Subscribe</a></li>
              <li><a class="dropdown-item" href="#"><?php echo $GLOBALS['translation']['login']; ?>Login</a></li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="03616c6c77707771627343362d302d332e626f736b6232">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

</body>

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

What is the process of adding background color to text?

Is there a more efficient way to style this text without relying on the span tag? I am looking to add a background color to my text. Code: .subject { color: gold; background: gray; } <h2>Some Subjects</h2> <ol> <li style="bac ...

Adjust the width of the column to only contain fixed content and not span the entire page

Check out my solution on Plunkr to see the issue I'm facing: Plunkr I'm dealing with a layout that includes a menu on the left and page contents on the right. My goal is to have the menu fixed in place so that it doesn't move when the page ...

The radio button that disables other inputs only functions correctly for a single element when using Query Selector, but does not work with Query

I have attempted to develop a form section that is disabled when the user selects option A and enabled when they choose option B. document.getElementById('delivery').onclick = function() { var disabled = document.querySelectorAll(".dis ...

ngModel is not taken into account when processing form data

Attempting to make use of a dynamic form in AngularJS, the code snippet below has been utilized: <dynamic-form template="formTemplate" ng-model="formData" ng-submit="processForm()"> </dynamic-form> The controller script inc ...

Stop users from signing up if the chosen username is already in use

I have a script that successfully checks if a username is available, but even if the username is already taken, the user can still register. I am looking for a way to prevent registration if the username is not free. Here is the code snippet: index.php $ ...

Using JavaScript/Angular to borrow a function and add additional parameters

In my scenario, I have a service function that requires a static parameter and a second custom parameter that changes based on the controller it is being used in. I am looking for a way for my controller/view to invoke this service function without havin ...

Record the success or failure of a Protractor test case to generate customized reports

Recently, I implemented Protractor testing for our Angular apps at the company and I've been searching for a straightforward method to record the pass/fail status of each scenario in the spec classes. Is there a simple solution for this? Despite my at ...

How do I preserve data within $scope upon switching views using ng-include?

Can you please take a look at this jsFiddle? http://jsfiddle.net/mystikacid/b7hqcdfk/4/ This is the template code: <div ng-app="myApp"> <div ng-controller="dataCtrl"> <div>Data : {{data}} (Value outside views)</div> < ...

Hide the div if the content is empty

Within a div created by the_content, there may be content or it could be null, resulting in an empty div that I want to hide. To address this issue, I attempted to store the content in variable $pageContent. However, upon declaring the variable, it either ...

Utilizing Express.js: Passing the req Object to Middleware without the Need for a New Multer Route

Hello to the Express.js and StackOverflow communities! I hope this question is not a duplicate, as I searched and found nothing similar. Currently, I am working on a project using Multer with Express to enable users to upload images, which will be saved a ...

What steps do I need to take in order to ensure that each webpage displays unique thumbnails?

As a newcomer to website development, I recently looked into implementing open graph on my site. However, I ran into an issue where I could only set one thumbnail for the entire website. This posed a problem as I wanted each navigation menu tab (Home, Abou ...

Ways to make ionic slides adhere to column width

I've been immersing myself in learning the latest versions of AngularJS and Ionic through practical application. I am currently working on a page that uses ionic rows and columns to display JSON data. The layout includes a 50/50 column setup, with a t ...

What is the reason for triggering a rerender when there is a modification to a map() element using document.querySelector() in JS/next.js?

const slides = [ [string1, string2, stringi], [string1, string2, stringi], [string1, string2, stringi], [string1, string2, stringi], ]; const changeSlide = (num) => { const discipline = document.querySelector("#changeSlide-&quo ...

Issues with response functionality in Node.js (Openshift) using express

I am currently working with OpenShift and Node.js to calculate the average rating for each result. However, I am facing an issue where the response is not being displayed even though the console logs show the correct data. The console displays 3.9454323, ...

Does having an excessive amount of variable declarations result in a noticeable decline in performance?

One thing I notice for the sake of readability is that I tend to create new variables for data that I already have on hand. I'm curious, does this impact performance significantly? Here's an example of what I mean: const isAdult = this.data.per ...

What is the best way to transfer static assets from an npm package to a nuxt project?

Has anyone successfully sent assets from an npm package to a nuxt application before? I have a vue component within an npm package with the following structure: -src/ -assets/ -noun-filter.svg In this npm package, the vector image is included in the v ...

troubles with dividing string

Recently delving into JavaScript/Angular development and encountering a little roadblock. I am attempting to break up a string of a textarea into an array at the \n character within a controller by utilizing $scope.mytext.split("\n"), however, I ...

The alignment of my card icons changes depending on the size of the paragraph

Here are my cards I am attempting to give them a relative position and the parent div an absolute position, but it is not working as expected. Despite several attempts, I still cannot get the desired result of positioning the cards correctly within the p ...

Tips on obtaining the screen resolution and storing it in a PHP variable

Hey there! I've run into a bit of a roadblock that I'm struggling to overcome. I know that I need to incorporate some JavaScript to solve this issue, but I'm having trouble grasping how to do so. Here's the script I'm working with: ...

Performing ad-hoc queries on a Postgresql database using Node.js and Express to manipulate row data

I am faced with a challenge of selecting one entry randomly from a table containing 46 entries, and then passing the data from that particular query to my handlebars files. I am unsure about how to approach the task of randomly querying the database and re ...