I want to adjust the DaisyUI responsive navbar below so that the button to navitems toggle happens at the medium breakpoint instead of at the large one.
Hamburger button works fine but if I change the navbar-center to hidden md:flex instead of hidden lg:flex navbar-center disappears at all sizes. Tried changing the sizes of navbar-start and navbar-end but nothing seems to make it show.
<code><!doctype html>
<html class="bg-stone-100">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/css/style.css" rel="stylesheet">
</head>
<body >
<!-- Start Navbar -->
<div class="navbar bg-stone-100">
<div class="navbar-start">
<div class="dropdown">
<div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" /></svg>
</div>
<ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
</div>
<a class="btn btn-ghost text-xl">daisyUI</a>
</div>
<div class="navbar-center hidden lg:flex ">
<ul class="menu menu-horizontal px-1">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
</div>
<div class="navbar-end">
<a class="btn">Button</a>
</div>
</div>
<!-- End Navbar -->
<button class="btn-main">Primary</button>
</body>
</html>
</code>
<code><!doctype html>
<html class="bg-stone-100">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/css/style.css" rel="stylesheet">
</head>
<body >
<!-- Start Navbar -->
<div class="navbar bg-stone-100">
<div class="navbar-start">
<div class="dropdown">
<div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" /></svg>
</div>
<ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
</div>
<a class="btn btn-ghost text-xl">daisyUI</a>
</div>
<div class="navbar-center hidden lg:flex ">
<ul class="menu menu-horizontal px-1">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
</div>
<div class="navbar-end">
<a class="btn">Button</a>
</div>
</div>
<!-- End Navbar -->
<button class="btn-main">Primary</button>
</body>
</html>
</code>
<!doctype html>
<html class="bg-stone-100">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/css/style.css" rel="stylesheet">
</head>
<body >
<!-- Start Navbar -->
<div class="navbar bg-stone-100">
<div class="navbar-start">
<div class="dropdown">
<div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16" /></svg>
</div>
<ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
</div>
<a class="btn btn-ghost text-xl">daisyUI</a>
</div>
<div class="navbar-center hidden lg:flex ">
<ul class="menu menu-horizontal px-1">
<li><a>Item 1</a></li>
<li><a>Item 2</a></li>
</ul>
</div>
<div class="navbar-end">
<a class="btn">Button</a>
</div>
</div>
<!-- End Navbar -->
<button class="btn-main">Primary</button>
</body>
</html>
I’d expect changing to <div class="navbar-center hidden md:flex "> would toggle the navbar-center on an off at the medium beakpoint.