Multiple issues with building a responsive sticky navbar using Tailwind and alpinejs

I'm using tailwind css v3 latest version. I've been struggling with learning tailwind. I've tried using ready-made blocks and examples. Some work together, others don't. It seems like there are X-million ways to sunday on creating responsive navbars which makes it difficult to nail down a standard pattern that can he duplicated without having to reinvent the proverbial wheel. Any thoughts on this. I'm looking for ways to speed up my development process.

Lastly, I've been able to get a sticky responsive navbar that shrinks on scroll however content shows through navbar after scrolling. How can I fix this particular issue? Here's my code:

resources\views\layouts\app.blade.php

<!DOCTYPE html>
<html lang="en">
<head>

<title>Chinese Imperial Restaurant | Family Style Dining | Chinese Food</title>

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta content="no-cache, no-store, must-revalidate" http-equiv="Cache-Control"/>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Open+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">

    <!-- CSS only -->
    <link rel="stylesheet" href="{{ mix('css/app.css') }}">

    <script src="{{ mix('js/app.js') }}" defer></script>

    <!-- Livewire Styles -->
    @livewireStyles
</head>
<body class="font-sans antialiased">

    <!-- navbar outer -->
    <header class="sticky w-[100%] h-[100px] flex items-center top-[-40px] opacity-100">
        <!-- navbar-inner -->
        <div x-data="{showMenu : false}" class="sticky top-0 w-[100%] h-[60px] flex justify-between items-center px-5">
            <!-- Logo -->
            <div class="text-gray-600 font-semibold uppercase cursor-pointer">LOGO</div>

            <!-- Navbar Toggle Button -->
            <button @click="showMenu = !showMenu"
                    class="block md:hidden text-gray-700 p-2 rounded hover:border focus:border focus:bg-gray-100
                my-2 mr-5" type="button" aria-controls="navbar-main" aria-expanded="false" aria-label="Toggle navigation">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                </svg>
            </button>

        <!-- Nav Links-->
            <ul class="md:flex text-white text-base mr-3 origin-top"
                :class="{ 'block absolute top-14 bg-white w-full p-2': showMenu, 'hidden': !showMenu}"
                id="navbar-main" x-cloak>
                <li class="px-3 cursor-pointer hover:bg-purple-50 flex items-center hover:text-gray-800" :class="showMenu && 'py-1'"><a href="#">Laravel</a></li>
                <li class="px-3 cursor-pointer hover:bg-purple-50 flex items-center hover:text-gray-800" :class="showMenu && 'py-1'"><a href="#">Livewire</a></li>
                <li class="px-3 cursor-pointer hover:bg-purple-50 flex items-center hover:text-gray-800" :class="showMenu && 'py-1'"><a href="#">TailwindCSS</a></li>
                <li class="px-3 cursor-pointer hover:bg-purple-50 flex items-center hover:text-gray-800" :class="showMenu && 'py-1'"><a href="#">Alpine JS</a></li>
                <li class="px-3 cursor-pointer hover:bg-purple-50 flex items-center hover:text-gray-800" :class="showMenu && 'py-1'"><a href="#">About</a></li>
            </ul>

        </div>
    </header>

    <!-- Content -->
    <main>
        {{ $slot }}
    </main>

</body>
</html>

resource\views\home.blade.php

<x-app-layout>
    <section class="w-full p-36">
        <div class="items-center w-full px-5 py-12 mx-auto md:px-12 lg:px-16 max-w-7xl lg:py-24">
            <div class="flex w-full mx-auto text-left">
                <div class="relative inline-flex items-center mx-auto align-middle">
                    <div class="pb-12 text-center">
                        <h1 class="max-w-5xl text-2xl text-gray-900 font-bold leading-none tracking-tighter md:text-5xl lg:text-6xl lg:max-w-7xl">
                            Long headline to turn <br class="hidden lg:block">
                            your visitors into users
                        </h1>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="bg-neutral-50">
        <div class=" px-5 py-12 mx-auto lg:px-16">
            <div class="flex flex-col w-full mb-8 text-center">
            <span class="mb-4 text-sm font-medium tracking-wide text-gray-500 uppercase">
        The best front end teams use Wickedtemplates to state their presence.
        <a href="https://www.wickedtemplates.com/expo.html" class="font-semibold text-blue-600 lg:mb-0 hover:text-blue-500">Our customers »</a>
            </span>
            </div>
            <div class="mx-auto text-center">
                <div class="grid grid-cols-5 gap-4 mx-auto lg:grid-cols-5">
                    <div>
                        <img class="h-4 mx-auto lg:h-12" src="https://d33wubrfki0l68.cloudfront.net/5a364f2e7cfeadd0f603cdfeda83f5cd0509770d/3f0ae/images/logos/logoone.svg" alt="Figma">
                    </div>
                    <div>
                        <img class="h-4 mx-auto lg:h-12" src="https://d33wubrfki0l68.cloudfront.net/ab0d1eeefb9cddb55f05f1601b2ae3fbae9317a9/5bfbe/images/logos/logotwo.svg" alt="Framer">
                    </div>
                    <div>
                        <img class="h-4 mx-auto lg:h-12" src="https://d33wubrfki0l68.cloudfront.net/2fea2d550675d7cf3bb77a515487bce6c086051b/951f5/images/logos/logothree.svg" alt="Sketch ">
                    </div>
                    <div>
                        <img class="h-4 mx-auto lg:h-12" src="https://d33wubrfki0l68.cloudfront.net/f9b8da8b1442382848d30275dc2d0337d14a04c9/dc8f4/images/logos/logofour.svg" alt="Sketch ">
                    </div>
                    <div>
                        <img class="h-4 mx-auto lg:h-12" src="https://d33wubrfki0l68.cloudfront.net/07ddf740e29509004147c6a83c09f299366546c9/03a26/images/logos/logofive.svg" alt="Invision">
                    </div>
                </div>
            </div>
        </div>
    </section>
</x-app-layout>

webrobert

3 years ago

Level 51

@jmacdiarmid ,

Yeah I am not a fan of most of the ready made components. They are mostly just examples. It’s sounds like you have a z-index issue with your sticky.

Edit: a couple things. I don't see a background color set. So it could be as simple as adding a bg-white or whatever to the header here. And maybe also the z-50 or z-10 (I can never remember which way the stack goes).

<!-- navbar outer -->
<header class="sticky w-[100%] h-[100px] flex items-center top-[-40px] opacity-100 bg-white z-50">
...

jmacdiarmid

3 years ago

Level 2

@webrobert Thank you for your reply and suggestion. I've tried just about everything between z-10 to z-2000 on the header element and still not working. I tried wading through this site: https://coder-coder.com/z-index-isnt-working/ but it sounded like VCR instructions. lol It also didn't have a TLDR; section. Additionally, viewed several YT videos such as one covering fixed navbars, one covering responsive navbars. One thing I learned is that the code between these doesn't merge well. Normally I have more patience with coding, but I've spent a few days on this one thing.

Lumethys

3 years ago

Level 5

this is neither tailwind or alpinejs issue. This is just a pure css issue.

Tailwind is just a wrapper for pure css anyway, so instead of looking for "tailwind solution", perhaps just look for pure css solution and convert it to tailwind

or, you could go into any website/ use any framework that had the navbar yoou want built-in, and use devtool to check for its CSS

additionally, here are a few component sites that lets you copy-paste tailwind class:

i also found this youtube video: Responsive Sticky Navbar that Shrinks on Scroll with Tailwind CSS & Alpine JS

Please or to participate in this conversation.