How to make mega menu centered at page width?

Question

I'm learning tailwindCSS and AlpineJS and struggling to get the mega menu to take the full width of the gray nav-bar. It currently only takes the width of the content inside of it.

I've attached a link to the code pen below.

https://codepen.io/themegamenuguy/pen/jOQJJmx

Here is the raw code:

<nav class="py-4" x-data="{ open: false }" @keydown.window.escape="open = false">
  <div class="bg-gray-200 max-w-screen-2xl mx-auto px-4">
    <div class="flex items-center justify-between">
      <div class="flex items-center">
        <a href="" class="mr-12">Brand</a>

        <div class="lg:flex hidden items-center">
          <div class="flex items-center space-x-6">
            <div class="relative" x-data="{ open: false}">
              <button class="" type="button" @click="open = !open">
                <span class="font-medium">Mega Dropdown</span>
              </button>
              <div class="absolute border border-gray-50 bg-white mt-2 rounded-lg shadow-md" x-show="open" @click.away="open = false">
                test
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</nav>

The menu only takes on the width of the text inside the mega menu.

I tried adjusting the width from auto to full and max.

Answer 1

The absolute positioned div is bound to the closest relative parent in the tree (see CSS docs). In your code this is the div containing the button and the mega menu, but you want this to be the document body.

To fix this, first remove the relative from this div. Then you need to set the absolute placement of the mega menu div by using left and right, see Tailwind docs.

Your code should now look like this:

<nav class="py-4" x-data="{ open: false }" @keydown.window.escape="open = false">
  <div class="bg-gray-200 max-w-screen-2xl mx-auto px-4">
    <div class="flex items-center justify-between">
      <div class="flex items-center">
        <a href="" class="mr-12">Brand</a>
        <div class="lg:flex hidden items-center">
          <div class="flex items-center space-x-6">
            <div class="" x-data="{ open: false}">
              <button class="" type="button" @click="open = !open">
                <span class="font-medium">Mega Dropdown</span>
              </button>
             <div class="absolute left-4 right-4 border border-gray-50 bg-white mt-2 rounded-lg shadow-md " x-show="open" @click.away="open = false">
                test
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</nav>