iprzybysz
commented
8 months ago Hi @hutong9, please provide a snippet of your code, then I'll try to help you.
Open hutong9 opened 8 months ago
iprzybysz
commented
8 months ago Hi @hutong9, please provide a snippet of your code, then I'll try to help you.
hutong9
commented
8 months ago ` <nav class=" relative flex w-full flex-nowrap items-center justify-between bg-[#FBFBFB] py-2 text-neutral-200 shadow-lg hover:text-blue-300 focus:text-yellow-500 dark:bg-neutral-600 lg:flex-wrap lg:justify-start lg:py-4" data-te-navbar-ref>
<div style="position: relative;width:100%;"
class="sm:container sm:mx-auto flex flex-wrap items-center justify-between px-4">
<!-- Logo -->
<div>
<a class="mx-2 my-1 flex items-center text-neutral-900 hover:text-neutral-900 focus:text-neutral-900 lg:mb-0 lg:mt-0"
href="/">
<img src="/images/logo.png" style="height: 30px left: 10px;" alt="CCF" loading="lazy" />
</a>
</div>
<!-- Hamburger button for mobile view -->
<button
class="block border-0 bg-transparent px-2 text-neutral-200 hover:no-underline hover:shadow-none focus:no-underline focus:shadow-none focus:outline-none focus:ring-0 dark:text-neutral-200 lg:hidden"
type="button" data-te-collapse-init data-te-target="#navbarSupportedContent8"
aria-controls="navbarSupportedContent8" aria-expanded="false" aria-label="Toggle navigation"
style="position:absolute;top:10px; right:15px;">
<!-- Hamburger icon -->
<span class="[&>svg]:w-7 ">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-7 w-7 ">
<path fill-rule="evenodd"
d="M3 6.75A.75.75 0 013.75 6h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 6.75zM3 12a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75A.75.75 0 013 12zm0 5.25a.75.75 0 01.75-.75h16.5a.75.75 0 010 1.5H3.75a.75.75 0 01-.75-.75z"
clip-rule="evenodd" />
</svg>
</span>
</button>
<!-- Collapsible navbar container -->
<div
class="!visible mt-2 hidden flex-grow basis-[100%] items-center justify-center lg:mt-0 lg:!flex lg:basis-auto "
id="navbarSupportedContent8" data-te-collapse-item>
<!-- Left links -->
<ul class="list-style-none flex flex-col pl-0 lg:mt-1 lg:flex-row " data-te-navbar-nav-ref>
<!-- Home link -->
<li class="my-4 pl-2 lg:my-0 lg:pl-2 lg:pr-4" data-te-nav-item-ref>
<NuxtLink to="/"
class="p-0 text-neutral-200 transition duration-200 hover:text-blue-300 hover:ease-in-out focus:text-yellow-500 disabled:text-black/30 motion-reduce:transition-none dark:text-neutral-200 dark:hover:text-neutral-400 dark:focus:text-neutral-400 lg:px-2 [&.active]:text-black/90 dark:[&.active]:text-neutral-400">
ι¦ι‘΅</NuxtLink>
</li>
<li class="my-4 pl-2 lg:my-0 lg:pl-2 lg:pr-4" data-te-nav-item-ref>
<NuxtLink to="/introduction"
class="p-0 text-neutral-200 transition duration-200 hover:text-blue-300 hover:ease-in-out focus:text-yellow-500 disabled:text-black/30 motion-reduce:transition-none dark:text-neutral-200 dark:hover:text-neutral-400 dark:focus:text-neutral-400 lg:px-2 [&.active]:text-black/90 dark:[&.active]:text-neutral-400">
倧δΌδ»η»</NuxtLink>
</li>
<!-- Link -->
<li class="mb-4 pl-2 lg:mb-0 lg:pl-0 lg:pr-4" data-te-nav-item-ref>
<NuxtLink to="#"
class="p-0 text-neutral-200 transition duration-200 hover:text-blue-300 hover:ease-in-out focus:text-yellow-500 disabled:text-black/30 motion-reduce:transition-none dark:text-neutral-200 dark:hover:text-neutral-400 dark:focus:text-neutral-400 lg:px-2 [&.active]:text-black/90 dark:[&.active]:text-neutral-400">
εΎη¨Ώιη₯</NuxtLink>
</li>
</ul>
</div>
</div>`
iprzybysz
commented
8 months ago You don't have a nav wrapper element in your code and data-te-nav-link-ref on NuxtLink elements. I recommend you check out our Basic example in the Navbar documentation and compare correctness with yours. It should help you with debugging any issues.
When the navigation bar is on the mobile phone, the default hamburger and logo are centered. Usually, both ends should be aligned. In addition, the navigation link on the mobile phone will not automatically collapse after clicking. The experience is very bad.