Menu remains open even after clicking the nav button again

I've been searching extensively, but haven't found a straightforward solution to the issue. When I click the button, it opens but doesn't close again. Any suggestions on what might be missing? Thanks in advance.

<nav class="navbar navbar-expand-md sticky-top">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">
            <img src="midia/logo.jpg" alt="Tutto Piccolo">
        </a>
        <button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#navbarResponsive" >
            <span class="navbar-toggler-icon"> </span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#home">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#sobre">About Tutto</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#colecao">Collection</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contato">Contact</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#cliente">Client Area</a>
                </li>
            </ul>

        </div>

    </div>
</nav>
htmlcssbootstrap-4

Answer №1

The Bootstrap documentation explains that Navbars can use different classes like .navbar-toggler, .navbar-collapse, and .navbar-expand{-sm|-md|-lg|-xl} to control their behavior when collapsing behind a button. By combining these classes with other utilities, you have the flexibility to show or hide specific elements as needed.

If you want a navbar to never collapse, include the .navbar-expand class. If you want a navbar to always collapse, do not use the .navbar-expand class.

Therefore, modify 

<nav class="navbar navbar-expand-md sticky-top">
to 
<nav class="navbar sticky-top">

Check out this JSfiddle example.

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

Is there a way to keep my fixed footer container from moving while zooming in and out on a webpage

Is there a way to prevent the bottom text from shifting when zoomed in or out on the page? The rest of the content remains stable, but due to using position:absolute for this section to stay at the bottom of another div (content), it causes movement. #con ...

htmlcsslayoutpositioningabsolute

Forward the jsp to the servlet before navigating to the following page

Issue: After submitting the JSP form on Page1, it redirects to a server-side JSP page but appears as a blank page in the browser. Instead, I want it to redirect to Page2 which includes a list box that highlights the newly created item. Seeking help with t ...

javascripthtmljspurlredirect

Struggling with aligning images in the center while ensuring they remain responsive on various devices

My website has an image with dimensions of 955x955, which is a square size. I want this image to be responsive on all devices, but the section it's in is not squared. This causes the image to look distorted when viewed on smaller screens. The focus of ...

htmlcss

Utilizing Bootstrap 4 with Angular 2 CLI

Currently, I am delving into the world of Angular2 CLI on my local server at http://localhost:4200/. Following the tutorial from , I have successfully installed Angular2. However, I encountered an issue while trying to import Bootstrap4 CSS. I attempted t ...

javascripthtmlcssangularbootstrap-4

Adjust an SVG text to fit perfectly within an SVG background rectangle

Inside this box are two SVGs: one for the text and one for the background rectangle. My goal is to make sure the text fits perfectly within the background rectangle without any stretching or overflowing. I don't want to break the text into multiple l ...

javascripthtmlcsssvg

Turning my dual button navigation into tabs to display distinct HTML pages beneath a designated header

body{ background:url(background.jpg); background-size: cover; } h1{ font-family: 'Dancing Script', cursive; font-size: 5em; color: white; text-align: center; margin-top: 25px; margin-bottom: 20px; } h2{ font-size: 18px; color: white; text-align ...

javascripthtmlcss

Capture user input from an HTML form and save it as key-value pairs in a JSON object, which can accommodate multiple input

I'm trying to figure out how to collect input from an HTML form and save it into a JSON object for AJAX use. The traditional method of $('#id').val(); won't work in this case because there are multiple fields, as shown below. Here' ...

javascriptjqueryhtmlajaxjson

What method can I use to incorporate a custom CSS code in Formfacade to conceal the back button on a Google Form?

Looking for a way to hide the back button on my custom questionnaire created with Google Forms? While there is no built-in option to do this directly on Google Forms, I decided to embed my form into Formfacade. However, I am struggling to find the CSS co ...

csshidegoogle-formsback-button

Extracting the text field value associated with the radio button that has been chosen

Utilizing Bootstrap for extracting the corresponding text value from the selected radio button's text field. The expected output is as follows: https://i.sstatic.net/pKG5W.png function getSelectedRadioButtonValue() { console.log($('input[ ...

htmltwitter-bootstrapradio-buttonbootstrap-4textfield

- Challenges with internal systems

I have a dialog window where I want to display a confirm dialog when clicking Cancel. To achieve this, I am creating a div element with some text that should be shown in the confirm dialog. However, the issue I'm facing is that the text intended for t ...

javascriptjqueryhtmlcssmodal-dialog

Ensure that Bootstrap Carousel images stay centered as the browser window is resized

I have encountered several questions similar to mine, but none of the solutions provided worked for me. My objective is to create a Bootstrap carousel that will keep the image centered when the window size is adjusted, while also maintaining specific imag ...

htmltwitter-bootstrapcsscarousel

Transform the look of the GroupLabels in MUI Autocomplete components within a React environment

Looking for some assistance with customizing the appearance of group labels in the Autocomplete component from React Material-UI on my website. I've successfully changed the List-Elements to have a dark background, as shown in this image: https://i.ss ...

cssreactjstypescriptmaterial-ui

Modifying Class Background Image with AngularJS

I have a class called "tp-cont" that is loaded from a separate .css file. I was able to update the background image using jQuery with the following code. HTML: <li ng-click="changeTemplateBackgroundImage()"></li> Controller: $scope.changeTe ...

htmlangularjs

Issue with CSS animations not functioning correctly within React application

Currently in the process of creating a basic dice roller and aiming to incorporate a spin animation for added visual interest. Strangely, the animation only triggers on the first roll and not on subsequent attempts (unless I refresh the page). Here is the ...

cssreactjsreact-hooks

What is the distance between the different segments in HTML code?

I have the following HTML structure: <body cz-shortcut-listen="true"> <div id="panels"> <section id="sect0" name="lvl0"> <div id="divLvel0" class="level zero"> <h2>top<nav><ul& ...

htmlcss

AngularJS: Optimizing load times by consolidating all partial views/templates for production

My goal is to maintain views in a highly modular way. This entails using numerous small, generalized HTML snippets that come together to form the actual HTML page. While ng-include and custom directives with templateUrl work well for me during development, ...

htmlangularjsviewproduction-environment

The art of controlling iframe elements with jquery

I've been researching various topics related to this issue, but I'm still unable to achieve the desired outcome. Currently, I am embedding an iframe within an HTML document like so: <iframe class="full-screen-preview__frame" id="nitseditpre ...

javascriptjqueryhtmliframe

What is the best way to eliminate padding for a specific element within a div container?

In my bootstrap design, I have nested columns where the grey background color for my h3 element has gaps on the left and right due to the padding of the bootstrap columns. While I can remove the padding by using padding:0px, this will affect all elements ...

htmlcsstwitter-bootstrap

Keep the CSS Grid cell blank without explicitly defining the position of other elements

I am trying to have an icon with a specific class element positioned in the center in relation to the first row, while skipping a cell in the second row's first column. Is there a way to skip that cell without explicitly specifying the grid-column po ...

htmlcss

Unable to center label when adjusting TextField height beyond default

I was tasked with reducing the size of the MUI Component TextField by 4px. To achieve this, I modified the root & .MuiOutlinedInput-input. Although it adjusted the height as desired, the label (Email) is no longer vertically centered. I attempted to so ...

cssreactjsmaterial-ui