Troubleshooting: Navbar Hover Effect in Tailwind CSS Not Functioning as Expected

This week, I've been working on building a navbar and it seems like the layout is coming together nicely. However, I've encountered a couple of small issues with the hover effect and the links for the menu items on the left and the logo in the center.

Oddly enough, when the menu is at full width, the hover effect stops working. But when I collapse it to the hamburger menu, everything works fine. I'm not exactly sure what I missed here, so any suggestions on what went wrong with the hover effect and the links would be greatly appreciated.

The accented-pink color is a custom configuration in my tailwind.config.js file

Navbar.jsx

import Link from "next/link";
import { useState } from "react";
import React from "react";
import Logo from "../Logo";
import headerLogo from "../../assets/images/headerImages/phreaquencyLogoPink.png";
import { FiGithub, FiMail, FiTwitter } from "react-icons/fi";

const NewNavbarLogoCenter = () => {
  const [active, setActive] = useState(false);

  const handleClick = () => {
    setActive(!active);
  };
  return (
    <>
      <nav className="flex flex-row w-screen bg-yellow-100">
        <div className="fixed top-0 flex text-center pl-[5vw] pr-[5vw] md:pl-[1.5vw] md:pr-[1.5vw] lg:pt-[3vw] pb-9 lg:px-[1.5vw] z-50 text-xl w-full align-baseline pt-[5vw]">
          <div className="lg:absolute flex lg:left-0 lg:right-0 z-10 lg:mx-auto lg:inline-block md:top-[3vw] md:left-[1.5vw] md:w-[calc(131px+3vw)] md:block">
            <Link href="/">
              <a>
                {" "}
                <Logo
                  logoSrc={headerLogo}
                  logoAltSrc="phreaquency logo"
                  logoLayout="intrinsic"
                  logoObjectFit="contain"
                  logoWidth="172px"
                  logoHeight="50px"
                  className="relative items-center "
                />
              </a>
            </Link>
          </div>
          <button
            className="inline-flex p-3 ml-auto rounded outline-none hover:text-pink-accented lg:hidden"
            onClick={handleClick}
          >
            <svg
              className="w-6 h-6"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M4 6h16M4 12h16M4 18h16"
              />
            </svg>
          </button>
          <div
            className={`${
              active ? "" : "hidden"
            }   w-full lg:inline-flex lg:flex-grow lg:w-auto`}
          >
            <div className="">
              <div className="flex flex-col lg:flex-row lg:justify-start">
                <div className="items-center justify-center w-full mr-3 lg:flex lg:w-auto hover:text-pink-accented">
                  <Link href="/">
                    <a>Agency</a>
                  </Link>
                </div>
                <div className="items-center justify-center w-full mr-3 lg:inline-flex lg:w-auto hover:text-pink-accented">
                  <Link href="/">
                    <a>Work</a>
                  </Link>
                </div>
                <div className="items-center justify-center w-full mr-3 lg:inline-flex lg:w-auto hover:text-pink-accented">
                  <Link href="/">
                    <a>Services</a>
                  </Link>
                </div>
                <div className="items-center justify-center w-full mr-3 lg:inline-flex lg:w-auto hover:text-pink-accented">
                  <Link href="/">
                    <a>Insights</a>
                  </Link>
                </div>
                <div className="items-center justify-center w-full mr-3 lg:inline-flex lg:w-auto hover:text-pink-accented">
                  <Link href="/">
                    <a>Contact</a>
                  </Link>
                </div>
              </div>
              <div className="lg:absolute lg:top-0 lg:right-0 flex flex-row text-center pt-[6vw] lg:pt-[3vw] lg:pb-9 px-[1.5vw] z-50 text-xl lg:items-center lg:justify-end w-full justify-center items-center content-center">
                <div className="flex items-center justify-center w-full mr-3 lg:inline-flex lg:w-auto hover:text-pink-accented">
                  <Link href="/">
                    <a>
                      <FiGithub />
                    </a>
                  </Link>
                </div>
                <div className="flex items-center justify-center w-full mr-3 lg:inline-flex lg:w-auto hover:text-pink-accented">
                  <Link href="/">
                    <a>
                      <FiTwitter />
                    </a>
                  </Link>
                </div>
                <div className="flex items-center justify-center w-full lg:inline-flex lg:w-auto hover:text-pink-accented">
                  <Link href="/">
                    <a>
                      <FiMail />
                    </a>
                  </Link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </nav>
    </>
  );
};

export default NewNavbarLogoCenter;

tailwind.config.js

const defaultTheme = require("tailwindcss/defaultTheme");

module.exports = {
  darkMode: "class", //remove this to have dark mode switch automatically
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "./layouts/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      height: {
        "50v": "50vh",
        "60v": "60vh",
        "70v": "70vh",
        "80v": "80vh",
        "90v": "90vh",
      },
      fontFamily: {
        sans: ["Poppins", ...defaultTheme.fontFamily.sans],
      },
      colors: {
        "off-white": "#f8f8ff",
        "off-black": "#2e343b",
        "pink-accented": "#ed61a2",
        "section-overlay": "rgba(0,0,0, .2)",
      },
    },
  },
  plugins: [],
};
cssreactjsnext.jstailwind-css

Answer №1

Utilizing accentuated colors in forms is recommended according to the Tailwind documentation.

To remove the "-accent" and define the color intensity after the word "pink," you will have a good result.

hover:text-pink-500

Answer №2

Seems to be working well for me.

view on wide screen

view on smaller screen

You might want to utilize the developer tools to understand what happens when hovering over the wide screen.

A small tip: consider looping through data in an array instead of duplicating code multiple times. https://i.sstatic.net/8NGJA.png Here's how I test the code, hope it provides some insight.

import React,{ useState } from "react";

const Navbar = () => {

  const [active, setActive] = useState(false);

  const handleClick = () => {
    setActive(!active);
  };

  const links = [
      {
        name:'Agency',
        url:'/',
      },
      {
        name:'Work',
        url:'/',
      },
      {
        name:'Services',
        url:'/',
      },
      {
        name:'Insights',
        url:'/',
      },
      {
        name:'Contact',
        url:'/',
      },
  ]

  return (
    <>
        <nav className="flex flex-row w-screen bg-yellow-100">
            <div className="fixed top-0 flex text-center pl-[5vw] pr-[5vw] md:pl-[1.5vw] md:pr-[1.5vw] lg:pt-[3vw] pb-9 lg:px-[1.5vw] z-50 text-xl w-full align-baseline pt-[5vw]">
            <div className="lg:absolute flex lg:left-0 lg:right-0 z-10 lg:mx-auto lg:inline-block md:top-[3vw] md:left-[1.5vw] md:w-[calc(131px+3vw)] md:block">
            <a href="/">
                logo
            </a>
          </div>
          <button
            className="inline-flex p-3 ml-auto rounded outline-none hover:text-pink-accented lg:hidden"
            onClick={handleClick}
          >
            burgerbutton
          </button>
                <div className={`${
              active ? "" : "hidden"
            }   w-full lg:inline-flex lg:flex-grow lg:w-auto`}>
                    <div className="">
                        <div className="flex flex-col lg:flex-row lg:justify-start">
                            {
                                links.map((link)=>{
                                    return (
                                        <div className="items-center justify-center w-full mr-3 lg:flex lg:w-auto hover:text-pink-accented">
                                            <a href={link.url}>{link.name}</a>
                                        </div>
                                    )
                                })
                            }
                        </div>
                    </div>
                </div>
            </div>
        </nav>
    </>
  );
};

export default Navbar;

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

Using react-confetti to create numerous confetti effects simultaneously on a single webpage

I'm looking to showcase multiple confetti effects using the react-confetti library on a single page. However, every attempt to do so in my component seems to only display the confetti effect on the last element, rather than all of them. The canvas fo ...

reactjstypescriptanimationreact-ref

"Struggling with the 2-Column Layout Glitch

I attempted to follow a tutorial for creating a 2 column layout from this person: Here is the result of my implementation: / http://jsfiddle.net/WrpA8/ The CSS: #container { width: 800px; margin: 40px auto; border: 1px solid black; } #header ...

csslayout

What is the best way to shift all components on the screen when the keyboard is opened in a React Native app

In my setup, I have two components: one black and the other red. When I open the keyboard, only the red component moves upward while the black one remains stationary. This results in the red component stacking on top of the black one. How can I ensure tha ...

reactjsreact-native

Is there a way to customize the background color of the active list item class in Bootstrap 4?

Customizing Boostrap Code : <!-- Custom Sidebar --> <div class="bg-light border-right" id="sidebar-wrapper"> <div class="sidebar-heading"><strong><?= __('Admin Panel') ?></strong></div> <div class="li ...

css

tips for resolving issue with empty table data in react js data table

I am a newcomer to react js and I am trying to show all the data from the database in a data table. However, I keep encountering an error saying "No data available in table". To address this issue, I included the getStudent function inside useEffect so tha ...

reactjsdatatable

Why is my background image also rotating when I rotate the text using 'transform: rotate'?

I have been attempting to rotate text on a background-image, but I am facing an issue where my background image also moves with the text rotation. Can someone explain why this is happening? Below is the code snippet: HTML code snippet: <ul> <li ...

htmlrotationcss

Error encountered during NextJS build process: The use of dynamic code evaluation methods such as 'eval', 'new Function', and 'WebAssembly.compile' is restricted in Edge Runtime

My project, which is a React with NextJS application using middleware, consists of a frontend that consumes a backend. I'm facing issues building it. Below is the content of my package.json file: { "name": "xxxx", "versio ...

reactjsnext.jsbuild

Is it possible to align a row so that it is centered based on one of the columns in the row?

Calling all experts in CSS and HTML: Let's say I have 3 columns in a row, each with a different size (refer to the image). Now, picture this - I want to center the 2nd column right in the middle of my page. If I simply use justify-content: center to ...

htmlcssangularbootstrap-5

Using jQuery to smoothly scroll horizontally to a specific div element

In my project, I aspire to create a layout similar to the BBC website: with a side scroll from section to section. Here is my code and the issue I am encountering: jsFiddle: http://jsfiddle.net/neal_fletcher/kzQFQ/2/ HTML: <div class="wrapper"> ...

javascriptjquerycsshtml

How can I show the content of a variable in Next.js without displaying any HTML tags?

For instance, I have the description variable set up like this in NextJS: description={storeDetail?.translation?.description} When outputting the description, it shows me <p>Tenis</p>. However, I would prefer to display just "Tenis" without th ...

htmlnext.js

Ways to modify the attribute of an element in an ImmutableList({}) nested within Immutable.Map({})

Is there a way to modify the property of an item within an ImmutableList({}) that is nested inside an Immutable.Map({})? This is my current setup: const initialState = Immutable.Map({ width: window.board.width, height: window.board.height, li ...

javascriptreactjsimmutabilityimmutable.js

Is the array State not setting properly in React Native?

I apologize for the strange request, but I need help with a validation method for form inputs within a modal. Currently, I am checking each this.state.variable and pushing them to an aux array, which is then supposed to be set to the original fieldErrors ...

javascriptarraysreactjsreact-native

What is preventing me from accessing a JSON file on Vercel while utilizing Next.js SSR?

I am currently working on a basic Next.js project with three main files. My goal is to populate the index page with data from a JSON file. Interestingly, when I deploy the project to Vercel using getStaticProps, everything functions correctly. However, up ...

next.jsserver-side-renderingvercel

What is the best way to reset a controlled input field?

I just can't seem to figure this out. Currently, I'm dealing with a controlled input using Material-UI's TextField and Autocomplete components. While I'm comfortable letting the component handle its own value, I do need a way to clear ...

reactjsmaterial-uicontrolled-component

What is the best way to generate two <div> elements, with one of them being centrally fixed?

When it comes to CSS, I must admit that it's not my strong suit. My current challenge is to create two boxes or divs where one remains fixed in the center of the page, while the other adapts and positions itself right next to the first one. Essentiall ...

cssreactjsflexboxmaterial-uistyled-components

Key Enhancements for Functional Stateless Components

How can I accurately assign a key in a functional component, specifically using the 'key' keyword instead of just a general index? I am attempting to use Map in a functional component to generate a list of another element. However, when I try to ...

javascriptreactjs

JavaScript: exporting everything from ... causing excessive bloat in the build file

After building my react-app with create-react-app, I noticed a decline in performance. Here is the structure of my project: /store actions.ts reducers.ts /module1 module1.actions.ts module1.reducers.ts /moduleN moduleN.actions.ts m ...

javascriptreactjstypescriptcreate-react-app

The issue with mapDispathToProps is that it is failing to assign a function

import React, { Component } from "react"; import PropTypes from "prop-types"; import { connect } from "react-redux"; import { ShelfModal } from "./shelf-modal"; import { openShelfModal } from "../../../redux/actions/shelf-modal"; export class ShelfTest ex ...

javascriptreactjsreduxreact-redux

How can the Calendar Ant Design showcase events that have fluctuating dates?

Seeking a solution to display events on an Ant Design Calendar using dateCellRender with dates stored in a variable object. Here's an example of the object: [ { "id": 1, "content": "Example", & ...

reactjstypescriptantd

100% width with a pixel offset

In the past, I have achieved this by using padding. The concept is to have two div elements positioned side by side, where one has a width of 100% and the other has a fixed width of 50px. Here's a rough illustration: ------------------------------- ...

csswidthpercentage