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
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
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
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
I’m running Android Studio “Arctic Fox” 2020.3.1 Patch 2, and I’m embarrassed to admit that I only made it to page 8 before running into ...
New
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
Title: Build a Weather Station with Elixir and Nerves: Problem connecting to Postgres with Grafana on (page 64)
If you follow the defau...
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
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
Hi, I’ve got a question about the implementation of PubSub when using a Phoenix.Socket.Transport behaviour rather than channels.
Before ...
New
I am using Android Studio Chipmunk | 2021.2.1 Patch 2
Build #AI-212.5712.43.2112.8815526, built on July 10, 2022
Runtime version: 11.0....
New
Other popular topics
Curious to know which languages and frameworks you’re all thinking about learning next :upside_down_face:
Perhaps if there’s enough peop...
New
New
I have seen the keycaps I want - they are due for a group-buy this week but won’t be delivered until October next year!!! :rofl:
The Ser...
New
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
Rails 7 completely redefines what it means to produce fantastic user experiences and provides a way to achieve all the benefits of single...
New
The File System Access API with Origin Private File System.
WebKit supports new API that makes it possible for web apps to create, open,...
New
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
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
Programming Ruby is the most complete book on Ruby, covering both the language itself and the standard library as well as commonly used t...
New
A concise guide to MySQL 9 database administration, covering fundamental concepts, techniques, and best practices.
Neil Smyth
MySQL...
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
- /flutter
- /elm
- /vscode
- /ash
- /html
- /opensuse
- /centos
- /php
- /deepseek
- /zig
- /scala
- /sublime-text
- /textmate
- /lisp
- /react-native
- /debian
- /nixos
- /agda
- /kubuntu
- /django
- /arch-linux
- /deno
- /nodejs
- /revery
- /ubuntu
- /manjaro
- /spring
- /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!"