-1

I just finished my homepage, but when it comes to testing I'm a bit confused the navbar is completely fine on my Desktop browser for all sizes, but when i test it on my android phone in any browser the button does not take any effect...

anyone help me please... I've done everything perfectly, I don't know why... I'm using flowbite

here is the component code :

import Logo from './../assets/aocLogo.png';

export default function Navbar() {
  return (
    <nav className='p-3 border-gray-200 bg-gray-800  '>
      <div className='container flex flex-wrap items-center justify-between mx-auto'>
        <a href='#' className='flex items-center'>
          <img src={Logo} className='h-6 mr-3 sm:h-14' alt='AOC Logo' />
        </a>
        <button
          data-collapse-toggle='navbar-solid-bg'
          type='button'
          className='inline-flex items-center p-2 ml-3 text-sm text-gray-100 rounded-lg md:hidden hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-200   '
          aria-controls='navbar-solid-bg'
          aria-expanded='false'
        >
 
         <span className='sr-only'>Open main menu</span>
          <svg
            className='w-6 h-6'
            aria-hidden='true'
            fill='currentColor'
            viewBox='0 0 20 20'
            xmlns='http://www.w3.org/2000/svg'
          >
            <path
              fillRule='evenodd'
              d='M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z'
              clipRule='evenodd'
            ></path>
          </svg>
        </button>
        <div className='hidden w-full md:block md:w-auto' id='navbar-solid-bg'>
          <ul className='flex flex-col mt-4 rounded-lg bg-gray-900  md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium md:border-0 md:bg-transparent'>
            <li>
              <a
                href='#'
                className='block text-base py-2 pl-3 pr-4 text-gray-100 bg-yellow-500 rounded md:bg-transparent md:text-yellow-300 md:p-0'
                aria-current='page'
              >
                Home
              </a>
            </li>
            <li>
              <a
                href='#'
                className='block text-base py-2 pl-3 pr-4 text-gray-50 rounded hover:bg-yellow-500 md:hover:bg-transparent md:border-0 md:hover:text-yellow-400 md:p-0 '
              >
                About
              </a>
 
           </li>
            <li>
              <a
                href='#'
                className='block text-base py-2 pl-3 pr-4 text-gray-50 rounded hover:bg-yellow-500 md:hover:bg-transparent md:border-0 md:hover:text-yellow-400 md:p-0 '
              >
                Team
              </a>
            </li>
            <li>
              <a
                href='#'
                className='block text-base py-2 pl-3 pr-4 text-gray-50 rounded hover:bg-yellow-500 md:hover:bg-transparent md:border-0 md:hover:text-yellow-400 md:p-0 '
              >
                Events
              </a>
            </li>
            <li>
              <a
                href='#'
                className='block text-base py-2 pl-3 pr-4 text-gray-50 rounded hover:bg-yellow-500 md:hover:bg-transparent md:border-0 md:hover:text-yellow-400 md:p-0 '
              >
                Contact
              </a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  );
}
meddhiaka
  • 1
  • 3

3 Answers3

0

Have you installed Flowbite?

Flowbite uses javascript to remove the hidden class from the menu when the button is clicked. If you just copy the HTML+CSS it won't work.

Eduardo Motta de Moraes
  • 1,172
  • 2
  • 4
  • 12
0

The reason it won't appear is because you passed hidden default and md:block in the menu. This is how to fix it.

import Logo from './../assets/aocLogo.png';

export default function Navbar() {
  return (
    <nav className='p-3 border-gray-200 bg-gray-800  '>
      <div className='container flex flex-wrap items-center justify-between mx-auto'>
        <a href='#' className='flex items-center'>
          <img src={Logo} className='h-6 mr-3 sm:h-14' alt='AOC Logo' />
        </a>
        <button
          data-collapse-toggle='navbar-solid-bg'
          type='button'
          className='inline-flex items-center p-2 ml-3 text-sm text-gray-100 rounded-lg md:hidden hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-200   '
          aria-controls='navbar-solid-bg'
          aria-expanded='false'
        >
 
         <span className='sr-only'>Open main menu</span>
          <svg
            className='w-6 h-6'
            aria-hidden='true'
            fill='currentColor'
            viewBox='0 0 20 20'
            xmlns='http://www.w3.org/2000/svg'
          >
            <path
              fillRule='evenodd'
              d='M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z'
              clipRule='evenodd'
            ></path>
          </svg>
        </button>
        <div className='w-full md:w-auto' id='navbar-solid-bg'>
          <ul className='flex flex-col mt-4 rounded-lg bg-gray-900  md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium md:border-0 md:bg-transparent'>
            <li>
              <a
                href='#'
                className='block text-base py-2 pl-3 pr-4 text-gray-100 bg-yellow-500 rounded md:bg-transparent md:text-yellow-300 md:p-0'
                aria-current='page'
              >
                Home
              </a>
            </li>
            <li>
              <a
                href='#'
                className='block text-base py-2 pl-3 pr-4 text-gray-50 rounded hover:bg-yellow-500 md:hover:bg-transparent md:border-0 md:hover:text-yellow-400 md:p-0 '
              >
                About
              </a>
 
           </li>
            <li>
              <a
                href='#'
                className='block text-base py-2 pl-3 pr-4 text-gray-50 rounded hover:bg-yellow-500 md:hover:bg-transparent md:border-0 md:hover:text-yellow-400 md:p-0 '
              >
                Team
              </a>
            </li>
            <li>
              <a
                href='#'
                className='block text-base py-2 pl-3 pr-4 text-gray-50 rounded hover:bg-yellow-500 md:hover:bg-transparent md:border-0 md:hover:text-yellow-400 md:p-0 '
              >
                Events
              </a>
            </li>
            <li>
              <a
                href='#'
                className='block text-base py-2 pl-3 pr-4 text-gray-50 rounded hover:bg-yellow-500 md:hover:bg-transparent md:border-0 md:hover:text-yellow-400 md:p-0 '
              >
                Contact
              </a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  );
}
Hemal Joshi
  • 83
  • 1
  • 4
  • I pasted the code but it appears just opened in my phone, the button does not work in smartphone, but in desktop it does – meddhiaka Feb 27 '23 at 19:57
  • have you added the js part of the code from Flowbite? or maybe there is some issue with or maybe you have not linked the library properly – Hemal Joshi Feb 27 '23 at 20:18
0

The code seems to work perfectly fine.

Try this link Tailwind-css play

krishnaacharyaa
  • 14,953
  • 4
  • 49
  • 88