Is there a way to display icons alongside each option in the dropdown menu?

I have a dropdown icon (pumpkin 1) div that is causing spacing issues with the other icons on the page. The problem is that it has a dropdown functionality which needs to overlay the text at the bottom.

I want to display all icons next to each other (1,2,3,4) while maintaining the dropdown behavior (clicking on the first icon shows the dropdown).

Can someone help me identify what is wrong in my CSS?

.header-bar__top {
  height: 3.5rem;
  background-color: greenyellow;
  z-index: 100;
  /* box-shadow: $header-bar-shadow; */
  padding-top: 15px;
}

.header-bar__container {
  position: relative;
  height: 100%;
  margin-right: auto;
  margin-left: auto;
  max-width: 1152px;
}

.header-bar__container:after {
  content: "";
  display: table;
  clear: both;
}

.header-bar-mobile-drop-down {
  display: inline;
}

.header-bar-mobile-drop-down__icon-button {
  color: black;
  border: none;
  background-color: transparent;
  font-size: 1.5rem;
  float: right;
  line-height: 1.5rem;
  cursor: pointer;
}

.header-bar-mobile-drop-down__item {
  visibility: hidden;
  opacity: 0;
  border: 1px solid orange;
}

.header-bar-mobile-drop-down__icon-button:focus
  + .header-bar-mobile-drop-down__item {
  visibility: visible;
  opacity: 1;
  margin-top: 13px;
  height: 4.25rem;
  background-color: orange;
  display: inline-flex;
  opacity: 1;
  align-items: center;
  text-align: center;
  justify-content: center;
  width: 100%;
}

.header-bar-utility {
  height: 100%;
  padding: 0 0.5rem;
  display: flex;
  align-items: center;
  float: left;
  color: pink;
  background-color: transparent;
  border: none;
  font-size: 16px;
  line-height: 1.5rem;
  text-decoration: none;
  cursor: pointer;
}

.header-bar-utility__icon {
  display: inline;
  font-size: 1.5rem;
}

.header-bar {
  height: 3.5rem;
  box-shadow: none;
}

.header-bar__toggle-menu {
  height: 100%;
  padding: 0 1rem 0 0.5rem;
  display: flex;
  align-items: center;
  background-color: transparent;
  color: black;
  border: none;
  font-size: 1.5rem;
  min-width: 0;
  cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="./test.css" />
    <title>Dropdown</title>
  </head>
  <body>
    <div class="header-bar">
      <div class="header-bar__top">
        <div class="header-bar__container">
          <div class="header-bar-mobile-drop-down">
            <button
              class="header-bar-mobile-drop-down__icon-button"
              tabindex="1"
            >
              🎃 1
            </button>
            <div class="header-bar-mobile-drop-down__item">
              This is a dropdown place
            </div>
          </div>

          <button :class="header-bar-utility">
            <div class="header-bar-utility__icon">🎃 2</div>
          </button>

          <button :class="header-bar-utility">
            <div class="header-bar-utility__icon">🎃 3</div>
          </button>

          <button class="header-bar__toggle-menu">🎃 4</button>
        </div>
      </div>
    </div>
    <h1>Text overlayed</h1>
  </body>
</html>

css

Answer â„–1

Some modifications were made to the code, including changes to not only the first icon button but also the 4th one. Additionally, the dropdown area was relocated from the button area to the outside. A JavaScript code snippet was added to enable the functionality of showing or hiding the dropdown.

HTML section -

<body>
<div class="header-bar">
  <div class="header-bar__top">
    <div class="header-bar__container">
    
      <div class="header-bar-mobile-drop-down">
        <button
          class="header-bar-mobile-drop-down__icon-button"
          tabindex="1"
        >
          🎃 1
        </button>
      </div>
      
      <div style="display: flex">
       <button :class="header-bar-utility">
        <div class="header-bar-utility__icon">🎃 2</div>
      </button>
      <button :class="header-bar-utility">
        <div class="header-bar-utility__icon">🎃 3</div>
      </button>
      <button class="header-bar__toggle-menu">🎃 4</button>
      </div>
      
    </div>
  </div>
</div>

            <div class="header-bar-mobile-drop-down__item">
          This is a dropdown place
        </div>

<h1>Text overlayed</h1>
</body>

JS section -

var firstBtn = document.querySelector('.header-bar-mobile-drop-down__icon-button');

firstBtn.addEventListener('focusin', toggleClass);
firstBtn.addEventListener('focusout', toggleClass);

function toggleClass() {
 const a = 
   document.querySelector('.header-bar-mobile-drop- 
   down__item').classList.toggle('header-bar-mobile-drop- 
   down__item_dropdown');
 }

Complete code - https://jsfiddle.net/alimurrazi/17wevh0t/3/

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

Tips for changing the size and color of SVG images in a NextJS application

Looking to customize the color and size of an svg image named "headset.svg". Prior to this, I used next/image: <Image src={'/headset.svg'} alt='logo' width={30} height={30} className='object-contain' /> The s ...

javascriptcssreactjssvgnext.js

"Implement a feature in JavaScript that allows users to click on images to navigate

I have a navigation feature on my website that allows me to cycle through images using the following code: <a href="JavaScript:previousImage()">Previous</a> | <a href="JavaScript:nextImage()">Next</a> <span id='num' ...

javascriptcssimagehyperlinkclickable

How to easily align an image and blockquote vertically in CSS with automatic width for the blockquote

I am struggling with a layout issue involving a list of items containing images and blockquotes. My goal is to set a maximum width for the images and have the blockquotes automatically adjust their size to fit next to the images, all while keeping both ele ...

htmlcss

Is there a way to adjust the image opacity of a background using Material UI?

Is there a way to adjust the opacity of a background image using Material UI? I attempted to achieve this by utilizing the makeStyles hook in Material UI. Here is an example of my code: import React from 'react'; import {Box,Typography } from &ap ...

javascriptcssreactjsmaterial-uibackground-image

Border utilities in Bootstrap 4 provide easy ways to add borders

I have been searching for a solution, but I can't seem to find it. Bootstrap 4 offers utility classes for adding and removing borders, but is there a way to define the border width or style like solid or dashed? <span class="border"></span&g ...

htmlcsstwitter-bootstrapbootstrap-4

Elements resize based on their parent's and siblings' widths

I have organized the parent div and its three children divs. Presently, the third child is concealed. I've designated the width of the first child as 20% and desire for the second child to automatically take up the remaining width without explicit set ...

htmlcss

The vertical scrolling functionality of the MUI DataGrid in Safari may occasionally fail to work

Utilizing the <Box> component from MUI core and the <DataGrid> component from MUIX, along with some other components, I have created a data grid that has the following appearance: https://i.sstatic.net/Gc8sP.png When the number of rows exceed ...

csstypescriptscrollmaterial-uioverflow

Attempting to arrange six images in a row using dividers

Having trouble aligning six images (2 per row with text in between) to the center of your webpage? Don't worry, we've got you covered! Check out the screenshot attached for reference and let us know how we can assist. Click here for a snapshot of ...

htmlcssimagecentering

Using CSS, the ability to scroll to the top of a page is restricted when an inner div expands to the top while using flex

While following a tutorial on YouTube, I encountered an issue where my expanding content, when exceeding the size of the window in a small screen view, prevented me from scrolling to the top. Interestingly, I could scroll to the bottom and back up to that ...

htmlcssflexbox

Clickable list element with a button on top

Within my web application, there is a list displaying options for the user. Each 'li' element within this list is clickable, allowing the user to navigate to their selected option. Additionally, every 'li' element contains two buttons - ...

javascripthtmlcss

The Semantic-UI Dropdown does not appear when utilizing the sidebar feature

Is it normal for a dropdown in the pusher not to show when using a sidebar? I tried setting overflow-visible but it didn't work. Any suggestions on how to resolve this? Check out this JSFiddle example: https://jsfiddle.net/3djmjhn5/1/ Code: $(&ap ...

htmlcsssemantic-ui

In Firefox, the width of a CSS grid cell is larger than the actual content it contains

My dilemma involves a div with a height of 15vw and the desire to insert four images into this div (each image's size is 1920*1080 px). When using the code below, everything appears correctly in Chrome. However, in Firefox, each image size is 195*110 ...

cssfirefoxcss-grid

What is the reason for the .foo a:link, .foo a:visited {} selector taking precedence over the a:hover, a:active {} selector in CSS?

Sample code: http://jsfiddle.net/RuQNP/ <!DOCTYPE html> <html> <head> <title>Foo</title> <style type="text/css"> a:link, a:visited { color: blue; } a:hover, a:active { ...

csscss-selectors

Using jQuery to load the center HTML element

So here's the plan: I wanted to create a simple static website with responsive images that load based on the browser width. I followed some suggestions from this link, but unfortunately, it didn't work for me. I tried all the answers and even a ...

javascriptjqueryhtmlcss

Selecting Child Elements in CSS

Suppose I have the below HTML structure: <div id="div1"> .... <span class="innercontents">...</span> .... </div> Is it possible to target only the child elements of a specific parent ID? For example, could I use this CSS rule? # ...

htmlcsscss-selectors

Footer to display exclusively on the final printed page's bottom

I am facing an issue with my certificate template. It contains dynamic content in the header, body, and footer sections. When printing a single page, everything looks fine. However, when printing multiple pages, the footer does not display at the bottom of ...

htmlcssprinting

Ways to center items in a row-oriented collection

When dealing with a horizontal list, the issue arises when the first element is larger than the others. This can lead to a layout that looks like this. Is there a way to vertically align the other elements without changing their size? I am aware of manual ...

htmlcss

How can I add an emoji picker button to a textbox?

Is there a way to incorporate an emoji picker button within a text box for selecting emojis without using jQuery, only utilizing CSS and core JavaScript? I am looking to implement an emoji picker similar to WhatsApp that allows users to insert emojis dir ...

css

Toggle sideBar within an iFrame by implementing Media Queries

I have implemented media queries in my code to hide the .sideBar when the screen resolution is less than 768px, showing only the .main section. @media (max-width: 768px) { .sideBar { display: none !important; } } Now, I want to add a ha ...

htmlcss

Attempting to align the fixed banner in the middle of my blog

I have spent hours combing through code after code on this site, trying to center my fixed banner without success. I am feeling frustrated and in need of some assistance. Here is the CSS snippet I have been working with: .heading { position:fixed; ...

csscentertumblrfixedbanner