Dropdown menu with CSS arrow

I'm attempting to create something similar to this:

Here's what I have so far:

Html:

<div class="panel-heading" data-toggle="collapse" href="#data2">
    <div class="heading">
        APPLICATION
    </div> 
    <span class="caret icon"></span
</div>

And css:

.panel-heading {
    padding: 0px;
    overflow: hidden;
}

.panel-heading>.heading {
    padding: 5px;
    float: left;
}

.panel-heading>.icon {
    float: right;
    background: yellow;
    height: 100%;
    padding: 5px 10px;
}

.item-detail .mini-title {
    font-size: 14pt;
    margin-bottom:5px;
    color: orange;
    font-weight: bold;
    margin-top: 10px;
}

.panel-heading {
    background: #FF6600;
}

.panel-body {
    background: #EAECED;
}

.caret {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #000000;
    width:1px;
}

JSFiddle result: JSFiddle

I'm having trouble styling the right side of the div.

I want to make a square yellow, and the rest orange. The caret should be black and centered within the small square.

Thank you!

htmlcss

Answer №1

If you're trying to add both the icon and caret classes to the same element, it won't work as you need to utilize borders to create an arrow effect.

Here is a suggestion:

<div class="panel-heading" data-toggle="collapse" href="#data2">
    <div class="heading">
        APPLICATION
    </div> 
    <div class="icon"><div class="caret"></div></div>
</div>

(This code should function properly in your fiddle)

For centering an element horizontally, try setting the margins by using 'auto' for left and right like so:

.caret { margin: 8px auto 0px auto; }

This will center your element with a top margin of 8px.

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

Enhancing the appearance of React Native WebView with CSS styling

Currently, I find myself facing a challenge... We are using a WebView in a section of our app because we receive an HTML string from an API endpoint. The HTML styling is not optimized for mobile use, so we are attempting to make some stylistic changes to i ...

cssreactjswebviewreact-native

Retrieving the value of an inner div upon clicking the outer div

I currently have a collection of button divs, each containing distinct information: <div class="button"> <div id="first"> Johny </div> <div id="second"> Dog </div> <div id="third"> Pasta & ...

javascriptjqueryhtml

Original code

I have a database containing HTML code for a table. I would like to display this code in its original form within a textarea so that I can edit it. However, when I try to echo the code, it appears in compiled form as a table rather than the original HTML ...

phphtmlmysqli

Using *ngIf together with fxFlex.lg and fxFlex.xl is causing compatibility issues

One of the challenges I faced involved a div element with a conditional *ngIf statement and responsive layout values set using fxFlex.lg="30" fxFlex.xl="50": <div class="project-test__element" *ngIf="myCondition()" ...

htmlcssangular

Issue with Dynamic Image Path in Require Function: Unable to locate the relative module

I've been struggling with an error in VueJs require function for the past two days. I'm attempting to pass a prop to the Home component and then display the image. Home.vue <template> <BlogPost :post="welcomeScreen"/> <B ...

javascripthtmlvue.js

Is it possible to make one <td> tag bold in a table if the <tr> contains two <td> tags?

I need to make the first td tag bold and apply this style to the entire table. <table> <tr> <td><strong>Cell A</strong></td> <td>Cell B</td> </tr> </table> ...

htmlcsshtml-table

Tips for Aligning Images of Various Sizes in the Center of a div

My images are displayed in a horizontal line, but some have different sizes. I want to center all the images within their container div for a better look. Is there a way to do this automatically with CSS so that the images remain centered regardless of siz ...

htmlcss

Jquery Toggle not applying class change on mobile devices

Check out my website: . There's a menu option called Services with a dropdown feature. Here is the code for it: <li class="dropdown menu-services"><a class="dropdown-toggle" href="#" data-toggle="dropdown" data-target="#">Services <b c ...

jquerycss

When I hover my mouse over the items on the Navigation bar, they shift forward

Seeking assistance with a coding issue. When hovering over TOYOTA, the HONDA and CONTACT US sections move forward unexpectedly. This movement is unwanted as I would like only the next list item to display when hovering over TOYOTA and HONDA. How can I corr ...

htmlcss

Creating Sub Menu in Blogger with pageListJSON

I am looking to enhance the menu on my blog by adding a sub-menu structure. Specifically, I want to organize my menu to include "Manual Testing" and "Automated Testing" as sub-menus under the main category of "Testing". Testing Manual Testing Automated ...

htmljsonblogger

Is it possible to modify the dropdown menu so that it opens on the right side instead of using a select tag?

Is there a way to make the drop-down from the select tag open to the right side(drop-right)? <label for="ExpLabel">Select Message Expiry:</label> <select name="ExpSelect" id="Expiry"> <option value="ExpiryDate">1 Day</opt ...

htmlcssangularangular-material

Connecting CSS and JS files in JSP was a bit of a challenge

Just starting out with jsp and using Glassfish server via netbeans. Struggling to link my jsp file with css and javascripts. Below is the structure of my files: Web Pages --Web-Inf --assets --css --style.css --js --jquery.js ...

javajavascriptcssjsp

Delivering Access data in HTML format via email

In my MS Access database, I have a report that combines client records from one table (including email addresses) with grouped records fetched from other tables using a Query. I want to send this report directly to each client via email, within the body o ...

htmlvbams-access

Need help altering the CSS style of a button once the mouse is released from the :active pseudo class? Look no further!

Is it possible to change the style of an element, such as a button, immediately after the :active pseudo-class is triggered? I noticed that on "Facebook" in their "Sign Up" button, when you click on it and release your mouse, the button background turns ...

cssbuttonmouseevent

Problem with aligning divs in Bootstrap

I am currently facing a challenge when it comes to aligning my div in Bootstrap 3. My goal is to achieve the following: I have experimented with pull and push commands, but it seems like I still need more practice. Code: <div class="container"> ...

csstwitter-bootstrap-3sidebarcol

Focused on individual characters in a string to implement diverse CSS styles

Is there a way I can apply different CSS classes to specific indexes within a string? For example, consider this string: "Tip. \n Please search using a third character. \n Or use a wildcard." I know how to target the first line with CSS using : ...

javascriptcssreactjs

The PHP/MySQLi registration form is displaying a blank white page without any visible output or error messages

Hey everyone, I'm currently working on a simple registration form in PHP and no matter how many times I try to run it, all I get is a blank white page. There are no errors or outputs, just pure emptiness. I was hoping someone could shed some light on ...

phphtmlmysqlformsmysqli

Creating a connection to an external website through a JavaScript function within an Angular application

I am currently working on an Angular application. Within the index.html file, there is a header that contains links to external websites. <a href="#" onclick="getExternalUrl('about.html');">Click here </a> <scr ...

javascripthtmlangular

Trouble with downloading a file from an HTML hyperlink

When I attempt to download a file from my file folder using the absolute path <a href='N:\myName\test.xlsx'>download</a>, the file opens directly instead of downloading. However, if I use the relative path <a href=&apos ...

javascripthtmlhyperlink

Steps to obtain an Element binding from a Svelte component

Is it possible to retrieve the bounding client rect of an anchor element? I typically mark this using the syntax bind:this={someVariable}. However, when I add this code to a Svelte component, I receive a different object that Svelte uses to represent a c ...

javascripthtmlsvelte