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

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
JohnS
I can’t setup the Rails source code. This happens in a working directory containing multiple (postgres) Rails apps. With: ruby-3.0.0 s...
New
joepstender
The generated iex result below should list products instead of product for the metadata. (page 67) iex&gt; product = %Product{} %Pento....
New
leonW
I ran this command after installing the sample application: $ cards add do something --owner Brian And got a file not found error: Fil...
New
jskubick
I’m under the impression that when the reader gets to page 136 (“View Data with the Database Inspector”), the code SHOULD be able to buil...
New
jskubick
I found an issue in Chapter 7 regarding android:backgroundTint vs app:backgroundTint. How to replicate: load chapter-7 from zipfile i...
New
kolossal
Hi, I need some help, I’m new to rust and was learning through your book. but I got stuck at the last stage of distribution. Whenever I t...
New
ggerico
I got this error when executing the plot files on macOS Ventura 13.0.1 with Python 3.10.8 and matplotlib 3.6.1: programming_ML/code/03_...
New
gorkaio
root_layout: {PentoWeb.LayoutView, :root}, This results in the following following error: no “root” html template defined for PentoWeb...
New
davetron5000
Hello faithful readers! If you have tried to follow along in the book, you are asked to start up the dev environment via dx/build and ar...
New

Other popular topics Top

siddhant3030
I’m thinking of buying a monitor that I can rotate to use as a vertical monitor? Also, I want to know if someone is using it for program...
New
AstonJ
Curious to know which languages and frameworks you’re all thinking about learning next :upside_down_face: Perhaps if there’s enough peop...
New
AstonJ
poll poll Be sure to check out @Dusty’s article posted here: An Introduction to Alternative Keyboard Layouts It’s one of the best write-...
New
AstonJ
I ended up cancelling my Moonlander order as I think it’s just going to be a bit too bulky for me. I think the Planck and the Preonic (o...
New
PragmaticBookshelf
Learn different ways of writing concurrent code in Elixir and increase your application's performance, without sacrificing scalability or...
New
New
PragmaticBookshelf
Rails 7 completely redefines what it means to produce fantastic user experiences and provides a way to achieve all the benefits of single...
New
AstonJ
Was just curious to see if any were around, found this one: I got 51/100: Not sure if it was meant to buy I am sure at times the b...
New
DevotionGeo
I have always used antique keyboards like Cherry MX 1800 or Cherry MX 8100 and almost always have modified the switches in some way, like...
New
CommunityNews
A Brief Review of the Minisforum V3 AMD Tablet. Update: I have created an awesome-minisforum-v3 GitHub repository to list information fo...
New

Sub Categories: