CODEWITHSUNDEEP
cssreactjs
Noble Polygon
Noble Polygon

Reputation: 806

Dropdown menu not going over div

I'm following this tutorial https://blog.campvanilla.com/reactjs-dropdown-menus-b6e06ae3a8fe to make a dropdown in my React app.

The click/open function works fine except the menu, which is inside of its own component is not going beyond the header container:

enter image description here Here is the css for my Header:

#inner-header {
  background-color: #f1c40f;
  font-family: "Rubik", sans-serif;
  font-weight: 700;
  display: flex;
  width: 100%;
  flex-direction: space-between;
  height: 60px;
  align-items: center;
  padding: 15px 0 15px 2.5%;
  align-items: top;
}

The tutorial didn't show CSS for the dropdown so I created my own:

.drop-down {
  z-index: 1000;
  overflow-y: visible;
  width: 300px;
  background-color: white;
  display: block;
  box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.1), 0 4px 4px 0 rgba(0, 0, 0, 0.15);
}

The only difference between my code and the tutorial is that I've imported the <Card /> component into my header in a React Component:

import React from 'react'
import {Link} from 'react-router-dom'
import logo from '../images/logo.svg'
import Card from '../components/Card'

export default function InnerHeader() {
    return (
        <>
        <div id="inner-header">
          <div className="logo">
            <Link to="/dashboard"><img src={logo} height="50px" alt="snack-page" /></Link>
          </div>
          <Card />
        </div>
      </>
    )
}

I thought that giving the dropdown a z-index would allow it to go over the header but that wasn't the case. What is the best way to display the dropdown while it's in its own component? I'm not sure what the solution would be in this case?

Upvotes: 0

Views: 781

Answers (2)

Noble Polygon
Noble Polygon

Reputation: 806

I was able to resolve this by making two changes to the code based on the answers here (slightly modified)

First, the flex-direction needed to be set to row.

Next, justify-content needed to be set to space-between as @JoeLloyd pointed out in my typo.

Finally, the z-index is now set to 3 and was given a position of relative

#inner-header {
  background-color: #f1c40f;
  font-family: "Rubik", sans-serif;
  font-weight: 700;
  display: flex;
  width: 100%;
  height: 75px;
  justify-content: space-between;
  flex-direction: row;
  padding: 15px 0 15px 2.5%;
  align-items: top;
}

.menu-button {
  padding-right: 15px;
  float: right;
}

.drop-down {
  z-index: 3;
  margin-right: 12px;
  position: relative;
  width: 200px;
  height: 200px;
  display: inline-block;
  background-color: white;
  box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.1), 0 4px 4px 0 rgba(0, 0, 0, 0.15);
}

Upvotes: 1

Joe Lloyd
Joe Lloyd

Reputation: 22323

flex direction is wrong

Set it to column if you want your content to go into a column and not a row. There's no such thing as flex-direction: space-between;

flex-direction: column;

Upvotes: 0

Related Questions