CODEWITHSUNDEEP
next.jstailwind-cssnextui
bruce wu
bruce wu

Reputation: 1

About Nextjs + tailwindcss + NextUI mobile end adaptation md: hidden does not work

I used nextjs14+typescript+tailwindcss to make a website https://www.all-free-novels.com, initially according to the web version to do, later want to optimize the time to do mobile end, when doing mobile end adaptation, I hope to achieve "block md: hidden" function, that is, a component, such as the navigation bar, when the mobile end is displayed as an icon, and when the md icon is hidden, displayed as a text version of the navigation bar, currently found that hidden md: block is working, but block md:hidden is not working

Tried a lot, it's weird I am a novice at the front end, is there any god who can see what the problem is?

the code is like that

return (
    <Navbar className="px-0">
      <NavbarBrand>
        <Logo />
      </NavbarBrand>
      <NavbarContent className="gap-4" justify="center">
        <NavbarItem className="hidden md:block">
          <Link color="foreground" href={`/${locale}`}>
            {t('home')}
          </Link>
        </NavbarItem>
        <NavbarItem className="hidden md:block">
          <Link color="foreground" href={`/${locale}/ranking`}>
            {t('rank')}
          </Link>
        </NavbarItem>
        <NavbarItem className="hidden md:block">
          <Link color="foreground"  href={`/${locale}/category`}>
            {t('category')}
          </Link>
        </NavbarItem>
        <NavbarItem className="hidden md:block">
          <Link color="foreground" href={`/${locale}/search`}>
            {t('search')}
          </Link>
        </NavbarItem>
      </NavbarContent>
      <NavbarContent justify="end">
        <LocaleSwitcher />
        <ThemeSwitcher />
        <NavbarItem className="md:hidden">
          <Menu/>
        </NavbarItem>
      </NavbarContent>
    </Navbar>
  )

I try to use "md:hidden" or "block md:hidden" or use a div tag wrapped it, all of them are not working.

I hope when use "md:hidden" and when screen is middle or larger, then don't show the menu icon and NavbarItem

<NavbarItem className="md:hidden">
 <Menu/>
</NavbarItem>

Upvotes: 0

Views: 192

Answers (1)

praizjosh
praizjosh

Reputation: 142

are you trying to display the Hamburger icon on the Navbar only when on mobile and make it hidden on desktop? If so, add md:hidden class.

If not, it'll be more helpful if you can add a codesandbox of your code for better understanding.

Upvotes: 0

Related Questions