What are the steps involved in changing a dropdown menu?

My current bootstrap dropdown list has been causing some issues, specifically with the 'Log out' link not working properly. The 'Logout' button seems to be functioning correctly, but for some reason the other one is not. Can someone please take a look and help me fix the 'Log out' link?

<div class="logout-dropdown-list float-right">
    <button class="btn btn-secondary btn-md dropdown-toggle" type="button" data-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false></button>
    <div class="dropdown-menu">
        <p align="right">Logged as <span sec:authentication="name"></span></p>
        <div class="dropdown-divider"></div>
        <form action="#" class="float-right" th:action="@{/logout}" method="POST>
            <input type="submit" value="Logout">
        </form>
        <a class="dropdown-item" href="#" th:action="@{/logout}" method="POST>Log out</a>
    </div>
</div>
htmlcssbootstrap-4thymeleaf

Answer №1

            **Here is an example of how to implement a custom logout dropdown menu using HTML and CSS:**

            <div class="logout-dropdown-list float-right">
                <button class="btn btn-secondary btn-md dropdown-toggle" type="button" data-toggle="dropdown"
                        aria-haspopup="true" aria-expanded="false"></button>
                <div class="dropdown-menu">
                    <p align="right">Logged as <span sec:authentication="name"></span></p>
                    <div class="dropdown-divider"></div>
                    <div class="custom-dropdown-item">
                      <form action="#" th:action="@{/logout}" method="POST">
                        <input type="submit" value="Logout" class="dropdown-item">
                    </form>
                    </div>

                    <a class="dropdown-item" href="#" th:action="@{/logout}" method="POST">Log out</a>
                </div>
            </div>


            **Custom CSS Styles**
            .custom-dropdown-item{display:block;}
            .custom-dropdown-item input{border:none !important; border-radius:none !important; cursor:pointer; outline:none !important; box-shadow:none !important;}

            DEMO: https://jsfiddle.net/0fpgLk6h/

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

Bootstrap dropdown malfunction

I am having trouble with my dropdown menu. The browser is cutting off the blue box in the dropdown area. I'm not sure if I need to add some CSS or make changes to the Bootstrap code to fix this issue. I haven't made any unusual modifications, jus ...

htmlcssbootstrap-4navbar

JQuery / Javascript - Mouse Position Erroneously Detected

I'm currently working on developing a drawing application where users can freely draw by moving their mouse over a canvas. My goal is to create a pixel at the precise location where the user drags their mouse. However, I've encountered an issue ...

javascriptjqueryhtmlcanvas

Most left-aligned icon on the left, most right-aligned icon on the right, and evenly spaced icons in between

Imagine a scenario where you are presented with a questionnaire that allows you to respond using a slider (HTML range element). Below the div containing the range selector (slider), I have arranged icons that need spacing. The icon on the far left should ...

htmlcssbootstrap-5

Emphasize a passage by clicking on a different section of text

Seeking Assistance I am currently customizing this template which incorporates the MixItUp plugin. My query pertains to highlighting the "filter tab" upon clicking on the corresponding text when hovering over each image, a task I find challenging as a new ...

javascriptjqueryhtmlcss

The left border is failing to appear on the Td element

When attempting to add border styling to td elements, the left border is not displaying correctly. This issue seems to vary across different browsers. Here is the HTML code: <table class="table-bordered"> <thead> <tr> ...

javascriptjqueryhtmlcss

Validate the presence of `<HTML>`, `<HEAD>`, and `<BODY>` tags using JSoup

Hello there! I've been using JSoup to parse through an HTML file, and I've encountered a situation where I need to verify if the file contains certain tags. Here's the code snippet I'm currently working with: htmlDom = parser.parse("&l ...

javahtmldomjsouphtml-parser

Minimizing HTML code on the main page of WordPress is a crucial optimization technique

I implemented this code to compress the HTML output on my WordPress website. While it works perfectly on the main page and post pages, it's causing several issues in the admin section. function minify_html(){ ob_start('html_compress'); ...

phphtmlwordpressactionminify

Modify the color of the designated Tab in the PRIMENG TabMenu - customize the style

Currently, I am utilizing the Primeng tab menu component and facing an issue. Unfortunately, I seem to be unable to identify a method to alter the color of the selected tab to a different shade. If anyone has any insights or suggestions on how to achieve ...

cssangularionic-frameworkprimengtabmenu

What is the process for designing a dropdown box that showcases text details?

I am in the process of building an FAQ page and I am looking to incorporate a dropdown menu that lists all the frequently asked questions. When a user clicks on a question, I want the corresponding answer to be displayed without redirecting to a new page. ...

phpjqueryhtmlcssajax

Error message "Undefined is not a function" occurred while using jQuery's .replace and scrollTop functions

I'm having issues with the scroll function in my code. It doesn't seem to be able to locate the ids in my HTML, even though I can't figure out why. I had a previous version that worked perfectly fine (unfortunately, I didn't save it D:) ...

javascriptjqueryhtmlundefined

The Scrapy CSS selector is not fetching any prices from the list

Having trouble with the price CSS-selector while scraping an interactive website using Scrapy. Check out the HTML screenshot I captured: https://i.stack.imgur.com/oxULz.png Here are a few selectors that I've already experimented with: price = respon ...

pythoncssweb-scrapingscrapycss-selectors

The automated Login Pop Up button appears on its own and does not immediately redirect to the login form

Hey guys, I'm struggling with modifying the jquery and html to ensure that when the login button is clicked, the login form pops up instead of displaying another login button. Another issue I am facing is that the login button seems to pop up automati ...

javascriptjqueryhtmlcss

Once the database fetches and displays 500 results, the HTML/CSS formatting begins to

On my local webserver, I have a page running off SQLite as its database. Since it is used locally and loads results quickly, displaying all of them on one page isn't a concern. However, I'm facing an issue where the formatting goes awry after 500 ...

phphtmlcsssqlite

Is it possible to adjust the position/target values of a webkit CSS transition without interrupting its operation

Is there a way to smoothly change the target position or attributes of a running transition without halting it? To illustrate, let's consider this initial animation: -webkit-transition:-webkit-transform 5s ease-in-out -webkit-transform: translate3d( ...

javascripthtmlcsswebkit

Adaptive design exhibits varying appearances across various screen sizes

Currently, I am working on a responsive design WordPress site and here is the markup: <div class="contact-wrap"> <div class="contact-number">123-456-7890</div><!--.contact-number--> <div class="user-login"><a href="#"& ...

htmlcssresponsive-design

Using CSS to select a specific class within an attribute

Having trouble targeting a specific navigation item in a div using an attribute value in CSS. Here's the code I have so far: My goal is to target the navDepts class. HTML <div class="primary-nav" data-name="about"> <div class="sub ...

css

Extracting data from a dropdown menu and displaying it

I've created a form with a select tag that pulls options from a .csv file. However, I'm struggling to retrieve the selected option and display it later in the form. The variable to hold the selected currency is named $selectedCurrency. UPDATE: ...

phphtmlfilecsv

Utilize focusout and onclick events on multiple components at the same time

Currently, I am in the process of coding an Autocomplete feature from scratch in Vue, but I am encountering a challenge when it comes to selecting an option from the dropdown menu. I have set it up so that the dropdown is shown when the input is clicked ...

javascripthtmlvue.js

Can the orientation of the card reveal be customized in Materializecss?

Exploring the card-reveal feature in the materializecss framework on this page: https://codepen.io/JP_juniordeveloperaki/pen/YXRyvZ with official documentation located at: In my project, I've rearranged the <div class="card-content"> to display ...

javascriptcssmaterialize

Switch up the placement of the boxes by moving them in different directions, such as

I've been attempting to recreate the button movement demonstrated in this link , but I'm having trouble achieving it. Using CSS animation, I can make the buttons move in a straight line, here's what I have so far: <div id="box" style=&ap ...

javascriptjqueryhtmlcss