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>
Popular Pragmatic Bookshelf topics
This test is broken right out of the box…
— FAIL: TestAgent (7.82s)
agent_test.go:77:
Error Trace: agent_test.go:77
agent_test.go:...
New
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
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
The generated iex result below should list products instead of product for the metadata. (page 67)
iex> product = %Product{}
%Pento....
New
Title: Web Development with Clojure, Third Edition, vB17.0 (p9)
The create table guestbook syntax suggested doesn’t seem to be accepted ...
New
A Common-Sense Guide to Data Structures and Algorithms, Second Edition by Jay Wengrow @jaywengrow
Hi,
I have the paperback version of t...
New
I’m new to Rust and am using this book to learn more as well as to feed my interest in game dev. I’ve just finished the flappy dragon exa...
New
In general, the book isn’t yet updated for Phoenix version 1.6. On page 18 of the book, the authors indicate that an auto generated of ro...
New
When running tox for the first time, I got the following error:
ERROR: InterpreterNotFound: python3.10
I realised that I was running ...
New
Is there any place where we can discuss the solutions to some of the exercises? I can figure most of them out, but am having trouble with...
New
Other popular topics
Instantly view the changes you make to an app with stateful hot reload, and define a declarative UI in the same language as the app logic...
New
I know that these benchmarks might not be the exact picture of real-world scenario, but still I expect a Rust web framework performing a ...
New
Design and develop sophisticated 2D games that are as much fun to make as they are to play. From particle effects and pathfinding to soci...
New
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
From finance to artificial intelligence, genetic algorithms are a powerful tool with a wide array of applications. But you don't need an ...
New
Learn different ways of writing concurrent code in Elixir and increase your application's performance, without sacrificing scalability or...
New
Use WebRTC to build web applications that stream media and data in real time directly from one user to another, all in the browser.
...
New
A few weeks ago I started using Warp a terminal written in rust. Though in it’s current state of development there are a few caveats (tab...
New
We’ve talked about his book briefly here but it is quickly becoming obsolete - so he’s decided to create a series of 7 podcasts, the firs...
New
Open-source implementation of the classic GTA engine now running directly in your browser. Experience the reVC technology demo on DOS.Zon...
New
Categories:
Sub Categories:
Popular Portals
- /elixir
- /rust
- /wasm
- /ruby
- /erlang
- /phoenix
- /keyboards
- /python
- /js
- /rails
- /security
- /go
- /swift
- /vim
- /java
- /clojure
- /emacs
- /haskell
- /typescript
- /svelte
- /onivim
- /kotlin
- /c-plus-plus
- /crystal
- /tailwind
- /react
- /gleam
- /ocaml
- /elm
- /vscode
- /flutter
- /html
- /ash
- /deepseek
- /zig
- /opensuse
- /centos
- /php
- /react-native
- /scala
- /lisp
- /textmate
- /sublime-text
- /debian
- /nixos
- /agda
- /deno
- /django
- /kubuntu
- /nodejs
- /arch-linux
- /spring
- /ubuntu
- /revery
- /manjaro
- /julia
- /diversity
- /lua
- /quarkus
- /markdown
Devtalk Sponsors
Practical resources that improve the lives of professional developers.
We build trusted fault-tolerant systems that scale to billions of users.
Real-time error tracking, performance insights, and observability for devs.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Develop your skills with books, videos, and courses.
Catch errors, track performance, monitor hosts and more.
Enabling companies to succeed by building software people love.
Courses that move you from confusion to "Aha, now I get it!"
Publishing Linux Magazine, ADMIN, and MakerSpace for 25+ years.