"Enhance your website navigation with the Bootstrap BS3 navbar clc Dropdown-Submenu feature

Utilizing Bootstrap BS3 for the construction of my Django website. I created a dropdown-submenu that is operational on http://www.bootply.com/nZaxpxfiXz#

https://i.sstatic.net/85uTq.png

However, when implementing the same in my project, I encountered:

https://i.sstatic.net/hctZy.png

The issue is that the dropdown-menu title lacks the small arrow, which prevents navigation and displaying submenus such as:

  • Accueil Fiches Individuelles
  • Création Fiches Individuelles
  • ...

This is the script used:

<!DOCTYPE html>
<html>
    <head>

    {% load staticfiles %}
    {% load user_tags %}

    <title> DatasystemsEC - Accueil </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="base.js" type="text/javascript"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
    <link rel="stylesheet" type="text/css" href="{% static 'css/Base.css' %}"/>
    </head>

    <!-- #################### -->
    <!-- Upper navigation bar -->
    <!-- #################### -->

        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="http://www.datasystems.fr/"> DatasystemsEC </a>
                </div>

                <!-- Home tab -->
                <ul class="nav navbar-nav">
                    <li><a href="{% url "accueil" %}"> <span class="glyphicon glyphicon-home"></span> Accueil </a></li>

                <!-- Resume Tab with acts -->

                {% if user.is_authenticated %}
                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Actes Etat Civil <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                <span class="glyphicon glyphicon-baby-formula"></span> Fiches Individuelles </a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Accueil Fiches Individuelles</a></li>
                                    <li><a href="#">Création Fiches Individuelles</a></li>
                                    <li><a href="#">Consultation Fiches Individuelles</a></li>
                                    <li><a href="#">Edition Fiches Individuelles</a></li>
                                    <li><a href="#">Suppression Fiches Individuelles</a></li>
                                </ul>
                            </li>
                            <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
                                <span class="glyphicon glyphicon-baby-formula"></span> Actes de Naissance</a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Accueil Actes de Naissance</a></li>
                                    <li><a href="#">Création Actes de Naissance</a></li>
                                    <li><a href="#">Consultation Actes de Naissance</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    {% endif %}
                </ul>
            </div>
        </nav>

        {% block content %}
        {% csrf_token %}
        {% endblock content %}
</html>

A CSS file is also included:

/* ###################################################### */
/* CSS File about BirthCertificate application properties */
/* ###################################################### */

/* Define background color from upper navbar */
.navbar-inverse {
    background-color: #0083A2;
    }

/* DatasystemsEC tab */
.navbar-inverse .container-fluid .navbar-header .navbar-brand {
    color : white;
    }

/* Tab properties from navbar */
.navbar .nav > li > a {
    color:  white;
    }

.navbar .nav > li > a:hover {
    color:  #454545;
    }

.active {
    background-color: #454545;
    }

/* Titles properties */
h1, h2, h4 {
    color: #0083A2;
    }

/* Define button properties */
.button {

    display: inline;
    margin-left: auto;
    margin-right: auto;
    border-radius: 8px;
    font-size: 16px;
    background-color: #e7e7e7;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
    }

/* Define form fields properties */
.form-fields {
    border-radius: 8px;
    margin-right: auto;
    }

.col-sm-6 {
    display:inline-block;
    margin-left : 10px;
    width: 30%;
    list-style: none;
    }

.col-sm-8 {
    list-style: initial;
    }

.col-sm-10 {
    display:inline-block;
    margin-left : 10px;
    width: 800%;
    list-style: none;
    }

/* Hoover button properties */
.button:hover {
    background-color: #0083A2;
    color: #454545;
    }

/* Hover color dropdown menu */
.dropdown-menu>li>a:hover {
   color: #FFFFFF;
   text-decoration: none;
   background-color: #0083A2;
    }

.logo {
    position : fixed ;
    top:0;
    left:100px;
}

@justify {
    text-align: justify;
}

.marginBottom-0 {margin-bottom:0;}

.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:hover>a:after{border-left-color:#555;}
.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}

In need of assistance? Unable to find a solution for my predicament.

jquerycssdjangotwitter-bootstrapdrop-down-menu

Answer №1

This code snippet is functioning correctly:

<!DOCTYPE html>
<html>
    <head>
    <title> DatasystemsEC - Home </title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style>
            .marginBottom-0 {margin-bottom:0;}
            /* Other CSS styles here */
        </style>
    </head>
    <body>
        <nav class="navbar navbar-inverse">
            <div class="container-fluid">
                <a class="navbar-brand" href="http://www.datasystems.fr/"> DatasystemsEC </a>
                <ul class="nav navbar-nav">
                    <li><a href="{% url "accueil" %}"> <span class="glyphicon glyphicon-home"></span> Home </a></li> 
                    
                    <!-- Dropdown menu code here -->
                    
                </ul>
            </div>
        </nav>
        
        <script>
            (function($){
                $(document).ready(function(){
                    $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
                        event.preventDefault(); 
                        event.stopPropagation(); 
                        $(this).parent().siblings().removeClass('open');
                        $(this).parent().toggleClass('open');
                    });
                });
            })(jQuery);
        </script>   
    </body>     
</html>

Make sure your Base.css and Base.js files include the necessary CSS and JS from http://www.bootply.com/nZaxpxfiXz#.

Answer №2

It seems that the issue you are experiencing may be related to the scripting and class naming in your code. Allow me to elaborate on this.

The carret that you mentioned is not responsible for triggering the submenu open event, as it should have been generated by this specific line of code:

.dropdown-submenu > a:after{
    display:block;
    content:" ";
    float:right;
    width:0;
    height:0;
    border-color:transparent;
    border-style:solid;
    border-width:5px 0 5px 5px;
    border-left-color:#cccccc;
    margin-top:5px;
    margin-right:-10px;
}

You should inspect your browser's debugger tool to determine why this rule is being overridden by another one, especially if it appears at the end of your stylesheet.

In addition to the carret not displaying correctly, the menu should still activate. If it does not, consider adjusting the following:

Instead of using 

class="dropdown dropdown-submenu"
, I recommend using just class="dropdown-submenu". Also, ensure that the inner <a> element has an onclick="return false" attribute. These changes may produce the desired results, even if they differ from what you see on the website you referenced.

Adding onclick="return false" to the <a> tag prevents it from triggering any events upon clicking within the submenu, which can be helpful unless already handled elsewhere in your code.

Answer №3

The chosen icon is being utilized:

<span class="glyphicon glyphicon-baby-formula"></span> Individual Files </a>

To modify, replace glyphicon-baby-formula with your preferred icon, such as glyphicon-triangle-right

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

Align select and number inputs vertically in Firefox

How can I achieve vertical alignment for these inputs on Firefox? The alignment works perfectly in Chrome, Safari, and Opera, but not in Firefox (Version 57 tested on macOS, Windows, and Linux Mint). While removing type="number" from the input resolves th ...

htmlcssfirefoxvertical-alignment

Handling the display of divs using two select elements

I've been pondering this problem for a while now, and I'm starting to believe that there may not be a solution. Essentially, what I am trying to achieve is the ability to select options from two dropdown menus which will then show or hide specifi ...

javascripthtmljquery

Is there a way to simulate a KeyboardEvent (DOM_VK_UP) that the browser will process as if it were actually pressed by the user?

Take a look at this code snippet inspired by this solution. <head> <meta charset="UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> </head> <body> <script> $(this). ...

javascriptjquery

How can I create my own unique scrolling behavior in JavaScript?

Looking to create a similar effect as seen on this website: where the vertical scrollbar determines the movement of the browser "viewport" along a set path. I believe that using Javascript to track the scroll bar value and adjust background elements acco ...

javascripthtmlcssinteractive

Error 1048: The column "user_id" must have a value and cannot be left empty

models.py class UserInformation(models.Model): user = models.OneToOneField(User, on_delete=models.CASCADE) name = models.CharField(max_length=30,blank=False,null=False) bio = models.TextField(max_length=500, blank=True) location = models.C ...

pythondjangoformsdjango-modelsdjango-views

What could be causing the issue of node-sass generated CSS files not loading on the initial GET request?

I've set up a node express app and incorporated sass support for the CSS. However, when I attempt to access http://myhost.com:port/css/whatever.css, the whatever.css file is generated in the express_app_root/public/css directory as expected. The *.scs ...

cssnode.jsweb-applicationsexpresssass

A dynamic 3-column layout featuring a fluid design, with the middle div expanding based on the

Sorry for the vague title, I'm struggling to explain my issue clearly, so let me elaborate. I am using flexbox to create a 3-column layout and want the middle column to expand when either or both of the side panels are collapsed. Here is a screenshot ...

javascriptcssflexboxcss-transforms

Use jQuery to handle the focusout or blur event through delegation

I currently have the following code declared within my document ready function: jQuery("body").delegate(".ta_obsn", "focusout", function() { alert("Method Fired"); jQuery(".tas") .append('<textarea type="text" class="form-control" class="t ...

jquery

Connecting Datatables to dynamically loaded tables using Ajax

Currently, I am utilizing bootstrap nav-tabs to load tabs content via ajax. The challenge I am facing involves having two tables within the ajax loaded content that need to be incorporated with the datatable jQuery plugin. I understand that using the &apos ...

jqueryajaxdatatable

Tips for adjusting text to fit within a container without needing to use overflow:auto

Is there a way to prevent text overflow in a container without using the overflow:auto property? I've come across plugins that automatically reduce the text size, but I'm not keen on that solution. What I want is for long words or URLs to wrap on ...

jqueryhtmlcss

Having problems getting my fixed header to work on my datatable. What could be the

Struggling to make my data table Thead sticky? I attempted using position: fixed;, top: 0; with CSS but it only worked in Firefox, not Chrome, Edge, or Opera. Here is an excerpt of my Ajax code: "stateSave": false, "orderCellsTop&quo ...

javascriptjqueryajaxdatatable

Display elements exclusively when the class XY is in an active state using JavaScript

Hello everyone, I'm new to this platform and excited to share my first post. Currently, I find myself facing a major challenge as I navigate through a bootcamp program. I have been working on a website with different sections that require specific fu ...

javascripthtmlcss

Arrange the input fields on a single line in Rails for a clean and organized layout

Below is a Rails code snippet for input fields. Name:-<%=text_field_tag "specification[name1]","",:class=>"autocomplete form-control"%> <br/> Value:-<%=text_field_tag "specification[value1]","",:class=>"autocomplete form-control"%> ...

cssruby-on-rails

Error: The function 'nivoSlider' is not defined for the object [object Object]

Trying to integrate a nivo slider into my WordPress website, but encountering a strange exception: Uncaught TypeError: Object [object Object] has no method 'nivoSlider' The website URL is: (It's in Hebrew, so you may not understand) - th ...

jquerywordpress

I am interested in altering the color of table rows using either JQuery or CSS

Looking to update row colors based on grouping. For example: Color the TR accordingly for every 5 rows: First 5 rows in green (0-4 Rows), Next five rows in red (5-9 Rows), Following five rows in yellow (10-14 Rows) and repeat the pattern... ...

javascriptjqueryhtmlcss

calc() not supported on IE11

Why is IE11 unable to calculate this? The console shows it as invalid (highlighted in red) h6 { ... font-size: calc(calc((( (20 / 16) / 16 - 1 / 16) * (100vw - 20rem) / (992 / 16 - 20) + 1 / 16 * 1rem) * 16)); ... } However, the following code works ...

cssinternet-explorersassinternet-explorer-11css-calc

Using Tinymce to automatically send form on blur action

Attempting to trigger form submission upon blur event in Tinymce, but encountering difficulties. tinymce.init({ selector: 'textarea.html', menubar:false, force_br_newlines : true, force_p_newlines ...

javascriptjquerytinymcetinymce-4

How can you adjust the div orientation for small screens using Bootstrap?

I've been working with Bootstrap and I'm facing an issue with the orientation of a div on small screens. On medium screens, I have two columns set to 6, 6 which should stack on top of each other on smaller screens. Here's how I want it to lo ...

htmlcssbootstrap-4

Divs are unable to be positioned at the top of the container

I am struggling with the alignment of blocks inside a container that can be dragged and re-sized within their container. The default position should have 7 divs side-by-side at the top of the container, however, they are appearing stacked on top of each ...

jqueryhtmlcssjquery-ui

Incorporating multiple CSS style sheets within a single HTML document

As part of my assignment, I have successfully created two different CSS style sheets. The next step is to link both style sheets to a single HTML page and provide users with the option to switch between the two styles. I am wondering how to achieve this. ...

javascripthtmlcssdreamweaver