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

The download attribute in HTML5 is functioning properly, however it is causing a redirection to

Is it possible to use the HTML5 download attribute with a URL without being redirected to a new page? Here is the code I am currently using: exportToPdf: function(e) { var link = document.createElement('a'); link.href = 'https://filegener ...

html

Cordova: Opening App through a Website Link Click

Embarking on my app development journey, I recently dived into creating an Android app with Cordova. However, I found myself stuck at a particular issue: In the sign-up process, users receive an email containing an activation link to click and confirm the ...

androidhtmlcordova

What is the process for manually looping an HTML5 video on iOS 4.3/5?

I'm facing an issue with a video that has specific segments I need to be looped. The problem arises on iOS 5, where after updating videoElem.currentTime for the third time, mobile Safari stops recognizing this attribute correctly. Interestingly, on i ...

iosipadhtmlvideo

Error: The specified object does not contain the 'tableRow' method

I am currently working on a contacts book project and I need a table to update as the user inputs data. However, I keep encountering an error related to 'tableRow'. I have tried changing function names and other solutions but haven't been ab ...

javascripthtmlhtml-table

Link the html button with the php code in order to perform a specific action

I am looking to link my HTML code with PHP in order to achieve the following functionality: 1. Create a cookie that prevents a specific message from being displayed again when a certain button is clicked. 2. Hide messages using CSS after the button clic ...

phphtml

Ensure that the content is perfectly aligned with the rest of the page for a visually pleasing

Seeking guidance on how to symmetrically center an image gallery with a list background, regardless of the browser's size. Any tips for aligning content perfectly? I attempted using a wrapper around the gallery and list with a fixed width, but it onl ...

htmlcss

What is the best way to refresh information following its removal?

In my app, I have implemented a feature where posts are displayed as HTML cards using a component called PostList. Each card has a delete button to remove it from the list. The issue I am facing is that when I delete a card, it remains visible in the post ...

htmlangulartypescriptreload

Creating a vertically scaling div with full height using Bootstrap 3

I am facing an issue with creating a full-height website using Twitter because the body min-height set to 100% seems to be causing problems. Here is my CSS code: html{ height:100%; } body{ min-height:100% } #main{ min-height:100%; } And here ...

htmlcsstwitter-bootstrap

jQuery allows you to assign the identical function to multiple actions

I am faced with a situation where I have multiple actions that need to perform the same function. <ul> <li> <select id="s1"> <option>Name</option> <option>Year</option> ...

jqueryhtml

Refresh meta tags in a Next.js/React app

In the process of optimizing a website for SEO, I am facing the challenge of updating the meta description's content dynamically without using any third-party libraries. While I have successfully implemented the functionality, it currently requires a ...

javascripthtmlreactjsnext.js

Tips for implementing event handlers on dynamically generated li elements in VueJS

Creating multiple ul elements using v-for in the following way <div v-for="item in info"> <ul> <li><a>{{item.number}}</a></li> <li><a>{{item.alphabet}}</a></li> </ul> </div&g ...

javascripthtmlvue.js

Instead of utilizing just one <select> element, Django mistakenly generates two while attempting to implement Bootstrap for form uploads

Struggling to develop a website using django and facing an issue where two select lists are appearing instead of one. Here is the HTML code: <form action="/upload/" method="post" enctype="multipart/form-data"> {% csrf_token %} <div class="form-g ...

pythonhtmldjangotwitter-bootstraptemplates

Resizing rectangular images with CSS/Bootstrap into perfect squares

Imagine there is a rectangular image with dimensions of 1400px (height) x 700px (width). I am looking to turn it into a square while maintaining its original proportions and having white sides added. I specifically do not want to crop the image - I want it ...

cssbootstrap-4

Get information from one div and implement it in a different div

I am working on an application that creates div boxes dynamically and loads images through AJAX to place inside these boxes. To avoid unnecessary loading, I want to check if a box already exists before loading images. If it does exist, then I would like t ...

jqueryajaxdomhtml

Is there a way to fix the noticeable difference in how bold text appears between IE11 and Chrome?

When viewing some of the titles on in Google Chrome, they appear like this: However, when viewed in MSIE11, they look like this: The use of strong/bold/font-weight seems to have no effect. Is there a way to make the font appear "bolder"? ...

csswindowsgoogle-chromeinternet-explorerfonts

Get rid of the background shade in the area separating the menu items within a CSS menu

Is there a way to add some spacing between the menu items without affecting the background color applied to the anchor tags? I currently use a right margin of 13px for the spacing, but it also applies the background color, which is not the desired outcome ...

css

Display an HTML image within a span tag and ensure it is aligned to the bottom

I am facing a layout issue with 2 images that are placed side by side within their tag . The sizes of the images are different, but they are both anchored at the top of their parent element. <span style="position: relative; left: 0; top: 0; vertical- ...

htmlcssangularalignment

Ways to target other links exclusively during hover effect on a single link

I've been attempting to shrink all other links when one link is hovered over, but I'm only able to make the links after the hovered one shrink. .navlink { width: 100px; display:inline-block; background-color: red; } .navlink:hover~.navl ...

css

Creating consistent image placement across all divs: a step-by-step guide

html { font-family: 'Open Sans', sans-serif; } body {margin: 0; padding: 0; } #wrapper { padding-left:50px; padding-top:30px; } #third, fifth { background-color:#E8E8E8 ; } img[src^="my_menu.png"] { z-index:10; } #s ...

htmlcss

Bootstrap 4 radio buttons are not aligning properly with the padding

There seems to be an issue with the alignment of Bootstrap 4 custom radio buttons and my left padding. Here is a snippet: https://i.sstatic.net/vWTNo.png This is part of the code for displaying an item <div class="p-4"> <ul class="d-flex ...

htmlcssbootstrap-4radio-button