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
Some minor things in the paper edition that says “3 2020” on the title page verso, not mentioned in the book’s errata online:
p. 186 But...
New
page 37
ANTLRInputStream input = new ANTLRInputStream(is);
as of ANTLR 4 .8 should be:
CharStream stream = CharStreams.fromStream(i...
New
Running the examples in chapter 5 c under pytest 5.4.1 causes an AttributeError: ‘module’ object has no attribute ‘config’.
In particula...
New
Title: Web Development with Clojure, Third Edition, pg 116
Hi - I just started chapter 5 and I am stuck on page 116 while trying to star...
New
The generated iex result below should list products instead of product for the metadata. (page 67)
iex> product = %Product{}
%Pento....
New
The book has the same “Problem space/Solution space” diagram on page 18 as is on page 17. The correct Problem/Solution space diagrams ar...
New
@noelrappin
Running the webpack dev server, I receive the following warning:
ERROR in tsconfig.json
TS18003: No inputs were found in c...
New
When I run the coverage example to report on missing lines, I get:
pytest --cov=cards --report=term-missing ch7
ERROR: usage: pytest [op...
New
On page 78 the following code appears:
<%= link_to ‘Destroy’, product,
class: ‘hover:underline’,
method: :delete,
data: { confirm...
New
Skimming ahead, much of the following is explained in Chapter 3, but new readers (like me!) will hit a roadblock in Chapter 2 with their ...
New
Other popular topics
Hello Devtalk World!
Please let us know a little about who you are and where you’re from :nerd_face:
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
New
There’s a whole world of custom keycaps out there that I didn’t know existed!
Check out all of our Keycaps threads here:
https://forum....
New
Crystal recently reached version 1. I had been following it for awhile but never got to really learn it. Most languages I picked up out o...
New
Hello everyone! This thread is to tell you about what authors from The Pragmatic Bookshelf are writing on Medium.
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
This is going to be a long an frequently posted thread.
While talking to a friend of mine who has taken data structure and algorithm cou...
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
Author Spotlight:
Bruce Tate
@redrapids
Programming languages always emerge out of need, and if that’s not always true, they’re defin...
New
Categories:
Sub Categories:
Popular Portals
- /elixir
- /rust
- /ruby
- /wasm
- /erlang
- /phoenix
- /keyboards
- /python
- /js
- /rails
- /security
- /go
- /swift
- /vim
- /clojure
- /emacs
- /haskell
- /java
- /svelte
- /onivim
- /typescript
- /kotlin
- /c-plus-plus
- /crystal
- /tailwind
- /react
- /gleam
- /ocaml
- /elm
- /flutter
- /vscode
- /ash
- /html
- /opensuse
- /centos
- /deepseek
- /php
- /zig
- /scala
- /sublime-text
- /lisp
- /textmate
- /react-native
- /debian
- /nixos
- /agda
- /kubuntu
- /django
- /arch-linux
- /deno
- /revery
- /ubuntu
- /nodejs
- /spring
- /manjaro
- /diversity
- /lua
- /julia
- /markdown
- /c
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!"