NavHamburger is not showing

[xmlking]

with the following Navbar code, NavHamburger is not visible

I guess md:hidden CSS might be causing this.

can you also remove container class so that NavBar can fit full space ?

 <Navbar let:hidden let:toggle>
	<NavHamburger on:click={toggle} />
	<NavBrand href="/">
		<img
			src="https://flowbite.com/docs/images/logo.svg"
			class="mr-3 h-6 sm:h-9"
			alt="Flowbite Logo"
		/>
		<span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
			ThreatZero
		</span>
	</NavBrand>

	<NavUl {hidden}>
		<NavLi href="/" >Home</NavLi>
		<NavLi href="/dashboard" active={true}>Dashboard</NavLi>
		<NavLi href="/dashboard/policies">Policies</NavLi>
		<NavLi href="/dashboard/agents">Agents</NavLi>
		<NavLi href="/dashboard/users">Users</NavLi>
	</NavUl>
</Navbar>

[shinokada]

Hi,

md:hidden means it is hidden above md breakpoint. This means it will be hidden more than 768px. It should show less than 768px width. Let me know.

Regarding container CSS, you can change it by using navDivClass prop.

<Navbar navDivClass='flex flex-wrap justify-between items-center'>
...
</Navbar>

[xmlking]

looks like behavier for fluid prop reversed

<Navbar let:hidden let:toggle > or default

<Navbar let:hidden let:toggle fluid={false}>

Why is the search box showing at the end in my environment, instead of showing in the middle?

your example in at https://flowbite-svelte.com/navbar rendered diffrently then mine for same code:

<Navbar let:hidden let:toggle >
	<NavBrand href="/">
		<img
			src="https://flowbite.com/docs/images/logo.svg"
			class="mr-3 h-6 sm:h-9"
			alt="Flowbite Logo"
		/>
		<span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
			Flowbite
		</span>
	</NavBrand>
	<div class="flex md:order-2">
		<Button color="none" data-collapse-toggle="mobile-menu-3" aria-controls="mobile-menu-3" aria-expanded="false" class="md:hidden text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 mr-1" >
			<Search variation='solid' />
		</Button>
		<div class="hidden relative md:block">
			<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
				<Search />
			</div>
			<Input id="search-navbar" class="pl-10" placeholder="Search..." />
		</div>
		<NavHamburger on:click={toggle} />
	</div>
	<NavUl {hidden}>
		<NavLi href="/" active={true}>Home</NavLi>
		<NavLi href="/about">About</NavLi>
		<NavLi href="/services">Services</NavLi>
	</NavUl>
</Navbar>

[xmlking]

I am using sveltejs/kit 1.0.0-next.352 and flowbite-svelte 0.19.4

[xmlking]

when reduced to minimal screen size, NavHamburger shows two times. also, search don't show the text area rendering it useless

Sorry ignore dobule NavHamburger issue . I had dcouble <NavHamburger on:click={toggle} /> by mistake

[xmlking]

Navbar menu items are vertically aligned to the top. I think they look good when aligned center by default. This misalignment only happened when combined with Dropdown Avatar

To reproduce

<Navbar let:hidden let:toggle fluid={false}  rounded={true}>
	<NavBrand href="/">
		<img
			src="https://flowbite.com/docs/images/logo.svg"
			class="mr-3 h-6 sm:h-9"
			alt="Flowbite Logo"
		/>
		<span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
			Flowbite
		</span>
	</NavBrand>
	<div>
		<Button color="none" data-collapse-toggle="mobile-menu-3" aria-controls="mobile-menu-3" aria-expanded="false" class="md:hidden text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 mr-1" >
			<Search variation='solid' />
		</Button>
		<div class="hidden relative md:block">
			<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
				<Search />
			</div>
			<Input id="search-navbar" class="pl-10" placeholder="Search..." />
		</div>
		<NavHamburger on:click={toggle} />
	</div>
	<NavUl {hidden}>
		<NavLi href="/" active={true}>Home</NavLi>
		<NavLi href="/about">About</NavLi>
		<NavLi href="/services">Services</NavLi>
		<div>
			<Dropdown arrowIcon={false} inline={true}>
				<Avatar {avatar} slot="label" />
				<DropdownHeader>
					<span class="block text-sm"> Bonnie Green </span>
					<span class="block truncate text-sm font-medium"> [email protected] </span>
				</DropdownHeader>
				<DropdownItem>Dashboard</DropdownItem>
				<DropdownItem>Settings</DropdownItem>
				<DropdownItem>Earnings</DropdownItem>
				<DropdownDivider />
				<DropdownItem>Sign out</DropdownItem>
			</Dropdown>
			<NavHamburger on:click={toggle} />
		</div>
	</NavUl>
</Navbar>

Edit1: this vertical alignment is fixed when I move Dropdown outside NavUl, but now I cannot hide and show Avatar Dropdown responsively based on screen size.
Might be helpful if Dropdown accepts the hidden prop. usually Dropdown is used in Navbar which should respect responsive design Media Queries.

[shinokada]

The recent update should have solved this issue. I close this for now. Thank you for the contribution.