How do I create a Bootstrap 4 multi-level navigation bar that drops to the right on the third level?

clickable dropdown

hover dropdown.jpg

Source:

Is there a way to create a dropdown menu that opens to the right like the clickable version, rather than to the left like the hover dropdown in the provided example? I'm open to other solutions as long as they utilize the latest versions of Bootstrap and jQuery. Thank you.

/*!
 * Bootstrap 4 multi dropdown navbar ( https://bootstrapthemes.co/demo/resource/bootstrap-4-multi-dropdown-navbar/ )
 * Copyright 2017.
 * Licensed under the GPL license
 */


$( document ).ready( function () {
    $( '.dropdown-menu a.dropdown-toggle' ).on( 'click', function ( e ) {
        var $el = $( this );
        var $parent = $( this ).offsetParent( ".dropdown-menu" );
        if ( !$( this ).next().hasClass( 'show' ) ) {
            $( this ).parents( '.dropdown-menu' ).first().find( '.show' ).removeClass( "show" );
        }
        var $subMenu = $( this ).next( ".dropdown-menu" );
        $subMenu.toggleClass( 'show' );
        
        $( this ).parent( "li" ).toggleClass( 'show' );

        $( this ).parents( 'li.nav-item.dropdown.show' ).on( 'hidden.bs.dropdown', function ( e ) {
            $( '.dropdown-menu .show' ).removeClass( "show" );
        } );
        
         if ( !$parent.parent().hasClass( 'navbar-nav' ) ) {
            $el.next().css( { "top": $el[0].offsetTop, "left": $parent.outerWidth() - 4 } );
        }

        return false;
    } );
} );
/*=-====Bootstrapthemes.co btco-hover-menu=====*/

.navbar-light .navbar-nav .nav-link {
    color: rgb(64, 64, 64);
}
.btco-hover-menu a ,  .navbar > li > a {
    text-transform: capitalize;
    padding: 10px 15px;
}
.btco-hover-menu .active a,
.btco-hover-menu .active a:focus,
.btco-hover-menu .active a:hover,
.btco-hover-menu li a:hover,
.btco-hover-menu li a:focus ,
.navbar>.show>a,  .navbar>.show>a:focus,  .navbar>.show>a:hover{
    color: #000;
    background: transparent;
    outline: 0;
}



/*submenu style start from here*/


.dropdown-menu {
    padding: 0px 0; 
    margin: 0 0 0; 
    border: 0px solid transition !important;
    border: 0px solid rgba(0,0,0,.15);
    border-radius: 0px;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;

}

/*first level*/
.btco-hover-menu .collapse ul > li:hover > a{background: #f5f5f5;}
.btco-hover-menu .collapse ul ul > li:hover > a, .navbar .show .dropdown-menu > li > a:focus, .navbar .show .dropdown-menu > li > a:hover{background: #fff;}
/*second level*/
.btco-hover-menu .collapse ul ul ul > li:hover > a{background: #fff;}

/*third level*/
.btco-hover-menu .collapse ul ul, .btco-hover-menu .collapse ul ul.dropdown-menu{background:#f5f5f5;}
.btco-hover-menu .collapse ul ul ul, .btco-hover-menu .collapse ul ul ul.dropdown-menu{background:#f5f5f5}
.btco-hover-menu .collapse ul ul ul ul, .btco-hover-menu .collapse ul ul ul ul.dropdown-menu{background:#f5f5f5}

/*Drop-down menu work on hover*/
.btco-hover-menu{background: none;margin: 0;padding: 0;min-height:20px}

@media only screen and (max-width: 991px) {
    .btco-hover-menu .show > .dropdown-toggle::after{
        transform: rotate(-90deg);
    }
}
@media only screen and (min-width: 991px) {

    .btco-hover-menu .collapse ul li{position:relative;}
    .btco-hover-menu .collapse ul li:hover> ul{display:block}
    .btco-hover-menu .collapse ul ul{position:absolute;top:100%;left:0;min-width:250px;display:none}
    /*******/
    .btco-hover-menu .collapse ul ul li{position:relative}
    .btco-hover-menu .collapse ul ul li:hover> ul{display:block}
    .btco-hover-menu .collapse ul ul ul{position:absolute;top:0;left:100%;min-width:250px;display:none}
    /*******/
    .btco-hover-menu .collapse ul ul ul li{position:relative}
    .btco-hover-menu .collapse ul ul ul li:hover ul{display:block}
    .btco-hover-menu .collapse ul ul ul ul{position:absolute;top:0;left:-100%;min-width:250px;display:none;z-index:1}

}
<!DOCTYPE html>
<html lang="en"><head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap 4 Navbar with hover multi dropdown</title>

        <!-- Bootstrap -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

        <link href="css/bootstrap-4-hover-navbar.css" rel="stylesheet">


        <!--Demo purpose css-->
        <style>
            body {
                padding-top: 50px;
            }
            .navbar {
                margin:  40px 0;
            }
            .jumbotron{background-color: #1f1f1f;color: #fff;}

        </style>
    </head>
    <body>


        <div class="container">

            <!-- Static navbar -->
            <nav class="navbar navbar-expand-md navbar-light bg-light btco-hover-menu">
                <a class="navbar-brand" href="#">Navbar</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
                            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Features</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Pricing</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="https://bootstrapthemes.co" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Dropdown link
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                <li><a class="dropdown-item" href="#">Action</a></li>
                                <li><a class="dropdown-item" href="#">Another action</a></li>
                                <li><a class="dropdown-item dropdown-toggle" href="#">Submenu</a>
                                    <ul class="dropdown-menu">
                                        <li><a class="dropdown-item" href="#">Submenu action</a></li>
                                        <li><a class="dropdown-item" href="#">Another submenu action</a></li>


                                        <li><a class="dropdown-item dropdown-toggle" href="#">Subsubmenu</a>
                                            <ul class="dropdown-menu">
                                                <li><a class="dropdown-item" href="#">Subsubmenu action aa</a></li>
                                                <li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>
                                            </ul>
                                        </li>
                                        <li><a class="dropdown-item dropdown-toggle" href="#">Second subsubmenu</a>
                                            <ul class="dropdown-menu">
                                                <li><a class="dropdown-item" href="#">Subsubmenu action bb</a></li>
                                                <li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li><a class="dropdown-item dropdown-toggle" href="#">Submenu 2</a>
                                    <ul class="dropdown-menu">
                                        <li><a class="dropdown-item" href="#">Submenu action 2</a></li>
                                        <li><a class="dropdown-item" href="#">Another submenu action 2</a></li>


                                        <li><a class="dropdown-item dropdown-toggle" href="#">Subsubmenu</a>
                                            <ul class="dropdown-menu">
                                                <li><a class="dropdown-item" href="#">Subsubmenu action 1 3</a></li>
                                                <li><a class="dropdown-item" href="#">Another subsubmenu action 2 3</a></li>
                                            </ul>
                                        </li>
                                        <li><a class="dropdown-item dropdown-toggle" href="#">Second subsubmenu 3</a>
                                            <ul class="dropdown-menu">
                                                <li><a class="dropdown-item" href="#">Subsubmenu action 3 </a></li>
                                                <li><a class="dropdown-item" href="#">Another subsubmenu action 3</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </nav>



        </div> <!-- /container -->


        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

        <script src="js/bootstrap-4-hover-navbar.js"></script>
    

</body></html>

htmlcssdrop-down-menuhoverbootstrap-4

Answer №1

Simply remove one line from the CSS code...

.btco-hover-menu .collapse ul ul ul ul{position:absolute;top:0;left:-100%;min-width:250px;display:none;z-index:1}

View the demonstration here:

The multi-level menu provided may be more complex than necessary. The same effect can be achieved with basic CSS: (without jQuery), as detailed in my response here.

Hover version
Click version

Answer №2

Here is a custom style to modify the default settings: 

@media only screen and (min-width: 991px)
.btco-hover-menu .collapse ul ul ul ul {
    left: 100%;
}

Answer №3

/* Custom CSS for Bootstrapthemes.co btco-hover-menu */

.navbar-light .navbar-nav .nav-link {
    color: rgb(64, 64, 64);
}
.btco-hover-menu a ,  .navbar > li > a {
    text-transform: capitalize;
    padding: 10px 15px;
}
.btco-hover-menu .active a,
.btco-hover-menu .active a:focus,
.btco-hover-menu .active a:hover,
.btco-hover-menu li a:hover,
.btco-hover-menu li a:focus ,
.navbar>.show>a,  .navbar>.show>a:focus,  .navbar>.show>a:hover{
    color: #000;
    background: transparent;
    outline: 0;
}

/* Submenu styles start here */
.dropdown-menu {
    padding: 0px 0; 
    margin: 0 0 0; 
    border: 0px solid transition !important;
    border: 0px solid rgba(0,0,0,.15);  
    border-radius: 0px;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

/* First level */
.btco-hover-menu .collapse ul > li:hover > a{background: #f5f5f5;}
.btco-hover-menu .collapse ul ul > li:hover > a, .navbar .show .dropdown-menu > li > a:focus, .navbar .show .dropdown-menu > li > a:hover{background: #fff;}

/* Second level */
.btco-hover-menu .collapse ul ul ul > li:hover > a{background: #fff;}

/* Third level */
.btco-hover-menu .collapse ul ul, .btco-hover-menu .collapse ul ul.dropdown-menu{background:#f5f5f5;}
.btco-hover-menu .collapse ul ul ul, .btco-hover-menu .collapse ul ul ul.dropdown-menu{background:#f5f5f5}
.btco-hover-menu .collapse ul ul ul ul, .btco-hover-menu .collapse ul ul ul ul.dropdown-menu{background:#f5f5f5}

/* Drop-down menu hover effect */
.btco-hover-menu{background: none;margin: 0;padding: 0;min-height:20px}

@media only screen and (max-width: 991px) {
    .btco-hover-menu .show > .dropdown-toggle::after{
        transform: rotate(-90deg);
    }
}
@media only screen and (min-width: 991px) {

    .btco-hover-menu .collapse ul li{position:relative;}
    .btco-hover-menu .collapse ul li:hover> ul{display:block}
    .btco-hover-menu .collapse ul ul{position:absolute;top:100%;left:0;min-width:250px;display:none}
    /*******/
    .btco-hover-menu .collapse ul ul li{position:relative}
    .btco-hover-menu .collapse ul ul li:hover> ul{display:block}
    .btco-hover-menu .collapse ul ul ul{position:absolute;top:0;left:100%;min-width:250px;display:none}
    /*******/
    .btco-hover-menu .collapse ul ul ul li{position:relative}
    .btco-hover-menu .collapse ul ul ul li:hover ul{display:block}
    .btco-hover-menu .collapse ul ul ul ul{position:absolute;top:0;left:-100%;min-width:250px;display:none;z-index:1}

}


/*!
 * Bootstrap 4 multi dropdown navbar ( https://bootstrapthemes.co/demo/resource/bootstrap-4-multi-dropdown-navbar/ )
 * Copyright 2017.
 * Licensed under the GPL license
 */


$( document ).ready( function () {
    $( '.dropdown-menu a.dropdown-toggle' ).on( 'mouseenter', function ( e ) {
        var $el = $( this );
        var $parent = $( this ).offsetParent( ".dropdown-menu" );
        if ( !$( this ).next().hasClass( 'show' ) ) {
            $( this ).parents( '.dropdown-menu' ).first().find( '.show' ).removeClass( "show" );
        }
        var subMenu = $( this ).next( ".dropdown-menu" );
        
        subMenu.css({'position': 'absolute', top: $el[0].offsetTop, left: $(this).width() + 50});
        subMenu.toggleClass( 'show' );
        
        $( this ).parent( "li" ).toggleClass( 'show' );

        $( this ).parents( 'li.nav-item.dropdown.show' ).on( 'hidden.bs.dropdown', function ( e ) {
            $( '.dropdown-menu .show' ).removeClass( "show" );
        } );
        
         if ( !$parent.parent().hasClass( 'navbar-nav' ) ) {
            $el.next().css( { "top": $el[0].offsetTop, "left": $parent.outerWidth() - 4 } );
        }

        return false;
    } );
    $( '.dropdown-menu a.dropdown-toggle' ).on( 'mouseleave', function ( e ) {
        var subMenu = $( this ).next( ".dropdown-menu" );
        subMenu.toggleClass( 'show' );
    });
} );
<!DOCTYPE html>
<html lang="en"><head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap 4 Navbar with hover multi dropdown</title>

        <!-- Bootstrap -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

        <link href="css/bootstrap-4-hover-navbar.css" rel="stylesheet">


        <!--Demo purpose css-->
        <style>
            body {
                padding-top: 50px;
            }
            .navbar {
                margin:  40px 0;
            }
            .jumbotron{background-color: #1f1f1f;color: #fff;}

        </style>
    </head>
    <body>




        <div class="container">

            <!-- Static navbar -->
            <nav class="navbar navbar-expand-md navbar-light bg-light btco-hover-menu">
                <a class="navbar-brand" href="#">Navbar</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
                            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Features</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Pricing</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="https://bootstrapthemes.co" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Dropdown link
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                <li><a class="dropdown-item" href="#">Action</a></li>
                                <li><a class="dropdown-item" href="#">Another action</a></li>
                                <li><a class="dropdown-item dropdown-toggle" href="#">Submenu</a>
                                    <ul class="dropdown-menu">
                                        <li><a class="dropdown-item" href="#">Submenu action</a></li>
                                        <li><a class="dropdown-item" href="#">Another submenu action</a></li>


                                        <li><a class="dropdown-item dropdown-toggle" href="#">Subsubmenu</a>
                                            <ul class="dropdown-menu">
                                                <li><a class="dropdown-item" href="#">Subsubmenu action aa</a></li>
                                                <li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>
                                            </ul>
                                        </li>
                                        <li><a class="dropdown-item dropdown-toggle" href="#">Second subsubmenu</a>
                                            <ul class="dropdown-menu">
                                                <li><a class="dropdown-item" href="#">Subsubmenu action bb</a></li>
                                                <li><a class="dropdown-item" href="#">Another subsubmenu action</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li><a class="dropdown-item dropdown-toggle" href="#">Submenu 2</a>
                                    <ul class="dropdown-menu">
                                        <li><a class="dropdown-item" href="#">Submenu action 2</a></li>
                                        <li><a class="dropdown-item" href="#">Another submenu action 2</a></li>


                                        <li><a class="dropdown-item dropdown-toggle" href="#">Subsubmenu</a>
                                            <ul class="dropdown-menu">
                                                <li><a class="dropdown-item" href="#">Subsubmenu action 1 3</a></li>
                                                <li><a class="dropdown-item" href="#">Another subsubmenu action 2 3</a></li>
                                            </ul>
                                        </li>
                                        <li><a class="dropdown-item dropdown-toggle" href="#">Second subsubmenu 3</a>
                                            <ul class="dropdown-menu">
                                                <li><a class="dropdown-item" href="#">Subsubmenu action 3 </a></li>
                                                <li><a class="dropdown-item" href="#">Another subsubmenu action 3</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </nav>



        </div> <!-- /container -->






        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

        <script src="js/bootstrap-4-hover-navbar.js"></script>
    

</body></html>

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

Adjusting animation placement when resizing the window

Is it possible to utilize jquery window.resize() to ensure that the positioning of the two donuts never interferes with the text in the middle of the home? I am unsure of how to connect the x and y values of the window size to adjust the top/left and botto ...

htmlcssanimationposition

Adjust the size of the input form

Trying to create this design: https://i.sstatic.net/rPSiN.png But currently stuck with this layout: https://i.sstatic.net/3k5bE.png I'm puzzled on how to resize the input field with an icon on the right while using col-md-12... Check out my code ...

htmlcssreactjsreact-css-modules

Reorder children in a column layout with the top and bottom child elements reversed

I am attempting to create a layout using flex-direction: column-reverse in order to swap the positions of button 1 and button 2 without modifying the HTML: <button>2</button> <button>1</button> Unfortunately, I'm encountering ...

htmlcssflexbox

What is the best way to showcase accurate information retrieved from mySQL?

I'm currently facing an issue with querying a database and displaying the results. The query is supposed to be based on input from an HTML form. Strangely, when I input a name like "John" into the form, even though there are 2 entries in the table wit ...

phphtmlmysqlxampp

Getting the checkbox count value in a treeview upon successful completion of an AJAX request

After successful JSON Ajax response, a treeview structure with checkboxes is displayed. I need to capture the number of checkboxes checked when the save button is clicked. @model MedeilMVC_CLOUD.Models.UserView <script type="text/javascript"> ...

javascriptjqueryhtmlcssajax

Navigate to the specified location using AJAX

When I update a comment using AJAX, I want to automatically scroll down to the updated comment: $("#aggiorna").click(function(){ var value = $("#id").val(); var dato = $("#comment_edit").val(); var dato1 = $("#user_id").val(); var dato2 = ...

javascriptjqueryhtmlajax

Ways to create unique hover effects for images in a filter gallery

I recently downloaded a filter gallery from this link and while everything is working fine, I noticed that the hover effect remains the same for all images. The code snippet responsible for this hover effect looks like this: <div class="portfolio"> ...

jqueryhtmlcssimagehover

Retrieving HTML code as a variable using Python

I am attempting to output HTML code as a variable in my Python script, but it's not working properly. What could be causing this issue? Here is an example of my code: return render_template("dashboard.html", services = "<h1>Service 1</h1> ...

pythonhtmlflaskjinja2

What is the best way to send HTML tag content to mark.js and delimit them with a space or comma?

I have been utilizing the mark.js library to highlight keywords on a webpage, and it's been working well. However, I now need to insert an extra space or a comma after each tag such as h1, h2, etc. Initially, I thought about using a loop like the one ...

javascripthtmlarraysmark.js

What is the process for programmatically aligning two cards side by side using Material UI in React after retrieving data from an API?

I am currently working with data from an API that I need to display in the format of cards, arranged side by side. To achieve this, I have been using an array and passing the data to components programmatically. You can see the output image and my code bel ...

javascriptcssreactjsmaterial-ui

Is it possible to conceal glyphicons by employing the attribute hidden="hidden"?

Is it possible to conceal a glyphicon icon in this manner? <i class="glyphicon glyphicon-remove-circle" title="Please add a suitable value" id="author" hidden="hidden"></i> <p>Author</p> ...

csshtmlglyphicons

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

Experimenting with applying jquery .slideDown() to multiple classes in order to create dynamic animations

I am facing an issue while using .slideDown() with multiple classes. I want only one class to toggle/dropdown at a time, but currently when I press the button, all classes show up instead of just the one I want to display. How can I achieve this? Here is ...

javascriptjqueryhtmlcss

Display Email content within a bootstrap modal using CSS styling

Is there a way to prevent CSS from overwriting tags on my original page when loading an email body into a modal via ajax call? The email body has its own CSS styles that are affecting the layout of my current page. I've considered renaming all the tag ...

jquerycsstwitter-bootstrap

What is the best way to change the active tab in a slider using JQuery?

I've been working on a tabbed slider that should change the color of the active tab, however, I'm having trouble getting it to switch properly. The tabs themselves are functioning correctly, but for some reason, the active class isn't changi ...

jquerybootstrap-4

php failure to execute included file

Hey there! I'm currently facing an issue with including a file that contains all of my 'head' information. My goal is to simplify and streamline my page by breaking it down. In my index.php file, here's what I did: <?php include & ...

phpjavascriptcssfileinclude

The background of the webpage section is being cropped on mobile devices

Currently, I am delving into the creation of a website completely from scratch to serve as an online CV for networking and job/school applications. My journey with HTML and CSS is relatively fresh, having started only about 5 months ago. Overall, things ha ...

htmlcssmobile

How can one go about incorporating the feature "updating list upon clicking a label" on a webpage?

On my website, I currently display a comprehensive list of publications. However, I am looking to organize these publications by various research topics using labels. Ideally, when clicking on a specific label, only the papers related to that topic will be ...

javascripthtmlcss

Incorporating a bottom line or border within the input field with a specified width

I have been struggling with styling an input field. I added a 1px solid #000 border around it, but now I need to include a thicker black line within the input itself. I tried using border-bottom: 5px solid #000, but that just created a border at the bottom ...

css

Steps for creating scrollable boxes with uniform size using tailwindcss:1. Define a specific width and height for

<div className="overflow-x-auto p-5 gap-5"> <div className={` bg-orange-700 w-[300px] h-[300px]`}></div> <div className={` bg-orange-700 w-[300px] h-[300px]`}></div> <div className={` bg-orange-700 ...

cssnext.jstailwind-css