[ComponenMobile terminal navigation style problemt name] [description of the issue]

[hutong9]

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.

[iprzybysz]

Hi @hutong9, please provide a snippet of your code, then I'll try to help you.

[hutong9]

`

<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>

<script setup> import { onMounted } from "vue"; const route = useRoute() onMounted(async () => { const { Dropdown, initTE, Ripple, Collapse } = await import("tw-elements"); initTE({ Dropdown, Ripple, Collapse }); }); </script> <style scoped> nav[data-te-navbar-ref] { background-color: rgb(10, 10, 128); color: white; } ul[data-te-navbar-nav-ref] li[data-te-nav-item-ref]:active { color: red; } ul[data-te-dropdown-menu-ref] { background-color: rgb(10, 10, 128); padding: 10px; } ul[data-te-dropdown-menu-ref] li { line-height: 2; } </style>`

[iprzybysz]

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.