Simple steps on incorporating a toggler button to collapse the header using Bootstrap

As a beginner in web development, I am facing challenges adding the collapse toggler to my code. I have tried various methods but have not been successful. Can someone please provide assistance?

Below is the code snippet:

<body>
        <div class="container">
        <header class="blog-header py-3 container">
            <div class="row flex-nowrap justify-content-between align-items-center">
            <div class="col-4 pt-1">
            
                <a class="text-muted" href="#">Subscribe</a>
                
            </div>
            <div class="col-4 text-center">
                <a href="#" class="navbar-brand"><img src="2611logo2.png" alt=""></a>
            </div>
            <div class="col-4 d-flex justify-content-end align-items-center">
                <a class="text-muted" href="#">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mx-3"><circle cx="10.5" cy="10.5" r="7.5"></circle><line x1="21" y1="21" x2="15.8" y2="15.8"></line></svg>
                </a>
                <a class="btn btn-sm btn-outline-secondary" href="#">Sign up</a>
            </div>
            </div>
        </header>
            
                <div class="nav-scroller py-1 mb-2">
                    <nav class=" nav d-flex justify-content-between">
                    <a class="p-2 text-muted" href="#">Shop</a>
                    <a class="p-2 text-muted" href="#">T-Shirts</a>
                    <a class="p-2 text-muted" href="#">Hoodies</a>
                    <a class="p-2 text-muted" href="#">Blog</a>
                    <a class="p-2 text-muted" href="#">Bags</a>
                    <a class="p-2 text-muted" href="#">Accessoriess</a>
                    <a class="p-2 text-muted" href="#">Tracksuit</a>
                    <a class="p-2 text-muted" href="#">Shoes</a>
                    </nav>
                </div>
htmlcssformsbootstrap-4navbar

Answer №1

Give this a try (if you're using jQuery).

$('header').toggle();

However, keep in mind that once you toggle it, you may not be able to revert it back. You'll need a button or some sort of trigger.

$("the-css-or-id-of-the-thing-you-click").click(function(){
  $("header").toggle();
});

For more information: https://www.w3schools.com/jquery/eff_toggle.asp

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

Creating an interactive TABLE with twitching animations in a straightforward HTML and JavaScript project

Currently, I am tackling a JavaScript challenge involving placing eight queens on a chessboard in such a way that they do not attack each other. However, there seems to be an issue - whenever I place a queen in an unoccupied column, that particular column ...

javascripthtmlcsssvg

Sending the form without triggering a new window or tab

My goal is to submit a form using Ajax so that it doesn't open a new tab every time I submit it, which can be quite annoying especially when creating multiple images. The current method of submitting the form works fine, but it opens a new tab each t ...

javascriptjqueryajaxformsplone-4.x

Displaying data in an HTML table using PHP and adding a popup

I've successfully created a PHP script that retrieves data from a MySQL database and organizes the results into an HTML table. Within one of the fields in the database, there are links to file(s), separated by commas. Everything is working well thanks ...

phphtmlmysqltwitter-bootstrap-3

What is the best way to align these JavaScripts side by side using div elements?

After searching many sources and attempting various methods, I am still struggling to position two lines of code side by side on my website. My attempted solution can be found at the bottom of the code. http://pastebin.com/mV1DUbg0 The code looked strang ...

htmlcss

Is there a way to create a dynamic CSS class without relying on the use of IDs?

Is there a way to create a dynamic CSS class without using an ID? $( "#mydiv" ).css( "width", $("#widthtextbox").val() ); $( "#mydiv" ).css( "height", $("#heighttextbox").val() ); I am looking to implement multiple CSS classes for this task. ...

javascriptjqueryhtmlcss

Limit the character input in AngularJS/Ionic to a specific number

I have a text input field that needs to restrict the user from entering more than a specific number of characters. Let's say I only want the user to type 10 characters, and if they try to enter more, the text field should not accept it. It should stop ...

htmlangularjsvalidationangularjs-directiveionic-framework

Tips for inserting CSS into Django's UpdateView or CreateView forms

I have a project on the go, and the designer has handed me the design. I need to replicate the input forms from the design, which requires adding CSS to my form object. If I am using a Django class-based view, how can I add custom CSS to the form fields l ...

pythoncssdjangodjango-formsdjango-views

What is the best way to resize an image to fit its surroundings within a nested box?

Have you ever heard of a website called SPAM? It has a unique homepage that I want to replicate using JavaScript, jQuery, and some CSS. My main challenge is figuring out how to adjust the image size to match the center box on the page. I want to create th ...

javascriptcssuser-interfacelayout

Error Icon Displayed Incorrectly in Dynamically Generated List Items in Phonegap Android App

My attempt to dynamically create a list item with JSON response and set the data-icon to "check" is not working as expected. The result always shows "arrow-r" data-icon instead. This is how I generate the list item: function CallvarURL(url) { var res ...

androidjquerycsscordova

Checking date entries

After customizing the date format in the Django modelform widget and jQuery datepicker, I encountered an error indicating that the field is not valid. class Sale_Invoice_Main_Page(forms.ModelForm): class Meta: model = SaleInvoice field ...

javascriptdjangobootstrap-4

The center alignment doesn't seem to function properly on mobile or tablet devices

I've designed a basic webpage layout, but I'm facing an issue with responsiveness on mobile and tablet devices. The problem seems to be related to the width: 100% property in my CSS, but I can't seem to pinpoint the exact solution. While tr ...

htmlcssmobilewidthcentering

Is it achievable to create shadows that do not overlap?

When you hover your mouse over the pill-shaped object, it should smoothly move over the circle as desired. However, the shadow of the circle still remains visible creating an unwanted effect. I am looking for a solution where the shadows do not overlap but ...

cssbox-shadow

Bootstrap4: What could be causing the adjacent row cell to remain left-justified instead of being centered as intended with mx-auto?

I've been working on creating a responsive header using Bootstrap4. The main goal is to have the logo displayed as left-justified text and the menu items as right-justified when the viewport is large, then transition to both being centered in a "small ...

htmlcssbootstrap-4flexbox

The formatting for a class that was added using ClassList isn't functioning as expected

Despite my code appearing correct, the styles are not being applied even though the class is added. It was functioning perfectly before, so I'm not sure what caused this issue now. Any assistance would be greatly appreciated! JavaScript code: let max ...

javascriptcss

Place the span element above the div container

I recently created some social media buttons with share counters, but I'm facing an issue where the counter data appears inside the buttons rather than on top of them. Has anyone encountered this problem before? Is there a way to display the numbe ...

htmlcss

Learn how to customize the background color of the DropdownToggle when a DropdownItem in Bootstrap 4 is clicked

Is it possible to modify the background color of DropdownToggle when selecting DropdownItem? Additionally, is there a way to adjust the top and bottom blue borders when clicking DropdownToggle? Picture 1: The image depicts the initial appearance before se ...

cssbootstrap-4dropdown

What is the best way to transition all elements down while sliding a header up or down?

Is it possible to bring down the entire page when hovering over a header element using CSS, ensuring that the header overlaps nothing else on the page? If so, how can this be achieved? See an example of the header in action here: Thank you! ...

javascriptjqueryhtmlcss

Looking to adjust line-height property for text with different line heights

I am struggling with adjusting the line-height of row-based text content in HTML enclosed in <p> tags. The challenge I'm facing is that the text could vary in length, resulting in either one or two lines. If it's a single line, it should co ...

jqueryhtmlcssheightline

Is there a more efficient method to halt a jQuery animation plugin? Surely, there must be a more effective solution

After feeling under the weather for the past week and feeling incredibly bored, I decided to delve into the world of creating jQuery plugins. In just half an hour, I managed to put together a plugin that mimics the "wiggle" effect when pressing and holding ...

jqueryjquery-pluginscss

Unable to render data in HTML page using Vue component

home.html: <body> <div id="app"> {{ message }} </div> <div id="counter"> {{ counter }} </div> <script type="text/javascript" src="https://cdn.js ...

javascripthtmlvue.js