What is the best way to position this dropdown menu component directly under a specific section of my navbar in a React application?

As I delved into creating a basic navbar and dropdown menu in React, I encountered a puzzling issue. I envisioned a section within the nav that would trigger a dropdown menu right below it upon hovering over it. Attempting to replicate this functionality by copying code from the w3 site led to more complications than anticipated. Consequently, I decided to embark on my own approach...

The solution involved crafting a Dropdown functional component embedded within the Navbar component. The visibility toggling of the Dropdown is orchestrated using a useState variable named hideDropdown.

Thus far, everything seems to be operating smoothly. Nonetheless, trouble reared its head when trying to align the Dropdown underneath the account segment in the Navbar. Despite various attempts, achieving the desired position on screen becomes elusive. Even specifying the pixel count for the component's left offset statically proves futile—resizing the screen disrupts the alignment. Perplexingly, the Dropdown materializes on the left side by default, with only the left property demonstrating any noticeable impact on positioning. Right appears ineffectual while percentages appear disassociated from page width; setting the left property to 800% is necessitated to situate the Dropdown completely on the right side.

Refer here for the code snippet

Navbar.js

Beloved Readers,
I am currently immersing myself in web development and deriving immense pleasure from it. However, this particular task has become somewhat vexing as I perceive it as a relatively straightforward challenge. Any guidance extended my way would be greatly appreciated!

Warm regards,
Neophyte Developer
htmlcssreactjsnavbar

Answer №1

Here is the solution that I believe meets your requirements:

I made some adjustments to the CSS and JS code

CSS

.navinator {
  z-index: 1;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: rgb(218, 10, 10);
  position: fixed;
  top: 0;
  width: 100%;
  height: 47px;
}
.navElement {
  float: left;
}
.anchor{
  display: block;
  color: white !important;
  text-align: center;
  padding: 14px 16px; 
  text-decoration: none !important;
  cursor: pointer;
}
.anchor:hover {
  background-color: rgb(255, 23, 15) !important;
}
.active {
  background-color: rgb(28, 13, 110) !important;
  float: right;
  width: 120px;
}
.active .anchor{
  align-items: center;
  justify-content: center;
}
.active .anchor:hover {
  background-color: rgb(32, 11, 156) !important;
}
.profile-image {
  width: 30px;
  height: 30px;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}
#profile {
  color: white !important;
  text-align: center;
  padding: 11px 16px; 
  text-decoration: none !important;
  /* height: 52px; */
  overflow: auto;
}
#profile:hover {
  background-color: rgb(255, 23, 15) !important;
  cursor: pointer;
}
.arrow-down {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid white;
  margin-top: 10px;
}
.dropdown {
  opacity:0;
  visibility: hidden;
    top: 47px;
    width: 222px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    /* display: inline-block; */
    background-color: rgb(6, 6, 6);
    position: absolute;
}
.drop-item:hover .dropdown{
  opacity:1;
  visibility: visible;
  transition: all .3s;
}

.dropdown li{
  list-style-type: none;
}

JS

const Navbar = () => (
  <div style={{ zIndex: "1", position: "fixed", display: "flex" }}>
        <ul className="navinator">
          <li className="navElement">
            <a className="anchor" href="/home">
              Home
            </a>
          </li>
          <li className="navElement">
            <a className="anchor" href="/profile">
              Profile
            </a>
          </li>
          <li className="active">
            <a
              className="anchor"
              // href="#"

            >
              + New Post
            </a>
          </li>
          <li class="drop-item" style={{ float: "right" }}>
            <div
              id="profile"
              >
              <div style={{ float: "left", paddingRight: "10px" }}>
                <img
                  src=""
                  alt="error"
                  className="profile-image"
                />

              </div>
              <div style={{ float: "left", paddingRight: "5px" }}>
                whatever
              </div>
              <div style={{ float: "left" }} className="arrow-down"></div>
            </div>
            <div style={{float:"right"}} className="dropdown">

     <li>
        <a className="anchor" style={{ textAlign: "left" }} href="/profile">
          Profile
        </a>
      </li>
      <li>
        <a className="anchor" style={{ textAlign: "left" }} href="/profile">
          Profile
        </a>
      </li>

    </div>
          </li>
        </ul>

      </div>
)

ReactDOM.render(<Navbar />, document.getElementById('root'))

The issue solved involves displaying a dropdown menu upon hovering over an element in the navigation bar, positioning it below the parent element appropriately

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

CSS hover effect applied uniformly to all link children

Here is the HTML code snippet I am working with: <a href="">Bioshock 2<span> - Xbox 360 review</span></a> My goal is to style the first part of the link differently from the span. The desired styling should look like this: https: ...

css

What is the best method for arranging multiple images in a grid while keeping them within a specific maximum width and height?

I've been staring at this problem for a while now, attempting every possible solution to resize images and maintain aspect ratio, but none seem to work in my case. Here are two images that I manually resized so you can view them side by side: highly ...

javascripthtmlcssimagelayout

React Type Mutation response feedback is a valuable tool for receiving input

I am facing an issue with passing the mutation success response in my code. I have a file named change-email.tsx which calls a component file updateEmail.tsx containing a mutation function. The submit function is working fine, but I cannot figure out how t ...

javascriptreactjstypescriptreact-native

Testing a state update in a Functional Component using React and Enzyme

I'm having trouble grasping the concept of triggering a state update that can be confirmed. My focus is on testing 2 specific cases related to the visual appearance of a button. 1) Testing if the button changes visually when selected 2) Testing if th ...

reactjsjestjsmaterial-uienzyme

Placing a pair of labels onto a bootstrap form while ensuring column alignment

I'm trying to format a form according to my UI/UX specifications, where there is a parent label and two sub-labels. Can this be achieved using Bootstrap? https://i.stack.imgur.com/J8wJZ.png However, I'm struggling to align the columns and rows ...

htmlcsstwitter-bootstrapforms

jQuery Show/Hide Not Working Properly

I'm attempting to showcase one Tweet at a time and have it rotate through different tweets. I'm facing an issue where it works correctly on one type of page, but not on the other. Could this be due to a CSS precedence rule overriding the function ...

javascriptjqueryhtmlcss

The closing tag for the "body" element was excluded even though OMITTAG NO was specified

While attempting to validate my contact support page, I encountered the following errors: Omission of end tag for "body", even though OMITTAG NO was specified ✉ You may have forgotten to close an element or intended to self-close an element by ending ...

javascripthtmlvalidation

Transforming an HTML file into a Vue.js component

I'm working on a login.vue file and I need to incorporate styling along with the necessary js and css files. Unfortunately, I'm clueless about how to achieve this within the login.vue file. Below is a snippet from the html file: <!DOCTYPE ht ...

javascripthtmlvue.js

Form Input Field with Real-Time JavaScript Validation

Is there a way to validate the content of a textarea using pure JavaScript, without using jQuery? I need assistance with this issue. <script> function validate() { // 1. Only allow alphanumeric characters, dash(-), comma(,) and no spaces ...

javascripthtmlregex

What is the best way to arrange these divs one on top of another?

I have combed through numerous resources but still haven't found a solution to my problem. I am struggling with figuring out how to stack the "top_section" div on top of the "middle_section" div. Currently, "middle_section" is appearing above "top_sec ...

htmlcss

Display JSX using the material-ui Button component when it is clicked

When I click on a material-ui button, I'm attempting to render JSX. Despite logging to the console when clicking, none of the JSX is being displayed. interface TileProps { address?: string; } const renderDisplayer = (address: string) => { ...

reactjstypescriptmaterial-uijsxtsx

Creating a Loading Sign with a Button Component in React

Request Description: In my form, I have a button that triggers a submission to the backend. While the request is processing, I want the button to display a loading indicator instead of the usual text. Once the request is complete, I need the form to disap ...

reactjstypescriptmaterial-uifrontendreact-typescript

Is it possible to customize the default typography settings for Textfields and other components using a theme in Material UI v5?

Is there a method to customize the default typography for TextField and all inputs using themes? I am aware of this approach: components: { MuiInput: { styleOverrides: { root: { fontSize: '16px', ...

reactjstypescriptmaterial-ui

What could be the reason React components are not showing up on the screen?

Exploring the world of react, I decided to experiment with creating a bootstrap template. However, I ran into an issue where react does not recognize the components when compiling. app.js import React from "react"; import { BrowserRouter as Rout ...

reactjsreact-router

Avoiding unnecessary re-renders in your application by utilizing the useRef hook when working with

To prevent the component from re-rendering every time the input value changes, I am trying to implement useRef instead of useState. With useState, the entire component re-renders with each key press. This is the usual approach, but it causes the entire co ...

javascriptreactjsreact-hooksuse-stateuse-ref

Navigating with React-router can sometimes cause confusion when trying

I'm having trouble with my outlet not working in react-router-dom. Everything was fine with my components until I added the Outlet, and now my navigation component isn't showing even though other components are rendering. import Home from ". ...

javascriptreactjsreact-router-dom

Steps for eliminating double quotes from the start and end of a numbered value within a list

I currently have the following data: let str = "1,2,3,4" My goal is to convert it into an array like this: arr = [1,2,3,4] ...

javascriptnode.jsreactjs

Set a maximum character limit for HTML input forms

Is there a way I can limit user input to more than 5 characters for certain fields like name? Additionally, is it possible to restrict a text input field so that only numbers can be entered (for example, an ID)? <tr> <th>ID:</th> ...

phphtmlforms

NodeJS - session information lost after building ReactJavaScript application

I've created a NodeJS web application with basic functionality for user login and pulling data from MySql based on session information. The app is functioning as intended (Link). However, when I implement the client-side in React, the session data is ...

javascriptnode.jsreactjssession

The language selection feature is not appearing on the Safari Version 14.1.2 browser

Within the application I am developing, the language picker appears correctly in every browser. At the top of the screen, users have the option to select their preferred language for the app. However, when tested on Safari, the language picker does not ap ...

reactjssafarimaterial-uistyled-components