kentbull

kentbull

Ch 7 Responsive Design missing "hidden" on close button

Title: Modern CSS with Tailwind Second Edition: Menu Close Not Hiding when Should (pages 65-66)

After fixing the SVG icons to be ones that show up for me, since the code in the book did not work on my computer by default, it turned out that the close icon would display on first render even when the hamburger menu was displaying. When I would open the hamburger menu and then close for the first time then the menu icons would work as expected so this is due to hidden class not being on the “navbar-close” element. When I added the “hidden” class to it then everything worked perfectly.

I also had to run ./tailwindcss -o css/output.css to get everything to work right. I added this example to the test.html example in the code directory.

Here’s the HTML code that worked for me:

<!DOCTYPE html>
<!--
 ! Excerpted from "Modern CSS with Tailwind, Second Edition",
 ! published by The Pragmatic Bookshelf.
 ! Copyrights apply to this code. It may not be used to create training material,
 ! courses, books, articles, and the like. Contact us if you are in doubt.
 ! We make no guarantees that this code is fit for any purpose.
 ! Visit https://pragprog.com/titles/tailwind2 for more book information.
-->
<html>
<head>
    <title>TailwindCode</title>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <link rel="stylesheet" type="text/css" href="../css/output.css"/>
</head>

<body>

<nav class="flex items-center font-bold text-grey=600 ">
    <div class="block lg:hidden self-start">
        <button id="navbar-burger"
                class="px-3 py-2
                       border rounded border-grey-400
                       hover:border-black">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
            </svg>

        </button>
        <button id="navbar-close"
                class="px-3 py-2 hidden
                       border rounded border-grey-400
                       hover:border-black">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
            </svg>

        </button>
    </div>
    <div class="w-full hidden
                lg:flex lg:flex-grow,
                lg:items-center lg:width-auto
                divide-black divide-y
                lg:divide-y-0"
         id="navbar-menu">
        <a class="block lg:mr-4 p-2 hover:bg-gray-200" id="blog">Blog</a>
        AND SO ON
    </div>
</nav>
<section class="py-12 px-6">
    <div class="container mx-auto">
        <div class="text-xl font-bold">CHEESE</div>
    </div>
</section>
<h1 class="text-4xl font-bold">First Floor</h1>
<h2 class="text-2xl font-semibold">Second Floor</h2>
<h3 class="text-lg font-medium italic">Third Floor</h3>
</body>
<script>
    document.addEventListener('DOMContentLoaded', () => {
        const $navbarBurger = document.querySelector('#navbar-burger')
        const $navbarClose = document.querySelector('#navbar-close')
        const $navbarMenu = document.querySelector('#navbar-menu')
        const $blog = document.querySelector('#blog')
        $navbarBurger.addEventListener('click', () => {
            $navbarMenu.classList.remove("hidden")
            $navbarBurger.classList.add("hidden")
            $navbarClose.classList.remove("hidden")
        });
        $navbarClose.addEventListener('click', () => {
            $navbarMenu.classList.add("hidden")
            $navbarBurger.classList.remove("hidden")
            $navbarClose.classList.add("hidden")
        });
        $blog.addEventListener('click', () => console.log("Go to blog"))
    })
</script>
</html>

Where Next?

Popular Pragmatic Bookshelf topics Top

abtin
page 20: … protoc command… I had to additionally run the following go get commands in order to be able to compile protobuf code using go...
New
GilWright
Working through the steps (checking that the Info,plist matches exactly), run the demo game and what appears is grey but does not fill th...
New
jamis
The following is cross-posted from the original Ray Tracer Challenge forum, from a post by garfieldnate. I’m cross-posting it so that the...
New
Alexandr
Hi everyone! There is an error on the page 71 in the book “Programming machine learning from coding to depp learning” P. Perrotta. You c...
New
simonpeter
When I try the command to create a pair of migration files I get an error. user=&gt; (create-migration "guestbook") Execution error (Ill...
New
raul
Hi Travis! Thank you for the cool book! :slight_smile: I made a list of issues and thought I could post them chapter by chapter. I’m rev...
New
adamwoolhether
I’m not quite sure what’s going on here, but I’m unable to have to containers successfully complete the Readiness/Liveness checks. I’m im...
New
EdBorn
Title: Agile Web Development with Rails 7: (page 70) I am running windows 11 pro with rails 7.0.3 and ruby 3.1.2p20 (2022-04-12 revision...
New
redconfetti
Docker-Machine became part of the Docker Toolbox, which was deprecated in 2020, long after Docker Desktop supported Docker Engine nativel...
New
gorkaio
root_layout: {PentoWeb.LayoutView, :root}, This results in the following following error: no “root” html template defined for PentoWeb...
New

Other popular topics Top

Devtalk
Reading something? Working on something? Planning something? Changing jobs even!? If you’re up for sharing, please let us know what you’...
1036 18833 384
New
ohm
Which, if any, games do you play? On what platform? I just bought (and completed) Minecraft Dungeons for my Nintendo Switch. Other than ...
New
Exadra37
Please tell us what is your preferred monitor setup for programming(not gaming) and why you have chosen it. Does your monitor have eye p...
New
AstonJ
We have a thread about the keyboards we have, but what about nice keyboards we come across that we want? If you have seen any that look n...
New
dimitarvp
Small essay with thoughts on macOS vs. Linux: I know @Exadra37 is just waiting around the corner to scream at me “I TOLD YOU SO!!!” but I...
New
AstonJ
Continuing the discussion from Thinking about learning Crystal, let’s discuss - I was wondering which languages don’t GC - maybe we can c...
New
PragmaticBookshelf
Build efficient applications that exploit the unique benefits of a pure functional language, learning from an engineer who uses Haskell t...
New
New
Help
I am trying to crate a game for the Nintendo switch, I wanted to use Java as I am comfortable with that programming language. Can you use...
New
AnfaengerAlex
Hello, I’m a beginner in Android development and I’m facing an issue with my project setup. In my build.gradle.kts file, I have the foll...
New

Sub Categories: