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
Following the steps described in Chapter 6 of the book, I’m stuck with running the migration as described on page 84:
bundle exec sequel...
New
Title: Design and Build Great Web APIs - typo “https://company-atk.herokuapp.com/2258ie4t68jv” (page 19, third bullet in URL list)
Typo:...
New
Hello Brian,
I have some problems with running the code in your book. I like the style of the book very much and I have learnt a lot as...
New
Title: Hands-on Rust: question about get_component (page 295)
(feel free to respond. “You dug you’re own hole… good luck”)
I have somet...
New
Hi,
build fails on:
bracket-lib = “~0.8.1”
when running on Mac Mini M1 Rust version 1.5.0:
Compiling winit v0.22.2
error[E0308]: mi...
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
Running mix deps.get in the sensor_hub directory fails with the following error:
** (Mix) No SSH public keys found in ~/.ssh. An ssh aut...
New
I’m a newbie to Rails 7 and have hit an issue with the bin/Dev script mentioned on pages 112-113.
Iteration A1 - Seeing the list of prod...
New
Getting an error when installing the dependencies at the start of this chapter:
could not compile dependency :exla, "mix compile" failed...
New
I’ve got to the end of Ch. 11, and the app runs, with all tabs displaying what they should – at first. After switching around between St...
New
Other popular topics
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
Do the test and post your score :nerd_face:
:keyboard:
If possible, please add info such as the keyboard you’re using, the layout (Qw...
New
Hello content creators! Happy new year. What tech topics do you think will be the focus of 2021? My vote for one topic is ethics in tech...
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
The V Programming Language
Simple language for building maintainable programs
V is already mentioned couple of times in the forum, but I...
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
Author Spotlight
James Stanier
@jstanier
James Stanier, author of Effective Remote Work , discusses how to rethink the office as we e...
New
Build efficient applications that exploit the unique benefits of a pure functional language, learning from an engineer who uses Haskell t...
New
The overengineered Solution to my Pigeon Problem.
TL;DR: I built a wifi-equipped water gun to shoot the pigeons on my balcony, controlle...
New
Will Swifties’ war on AI fakes spark a deepfake porn reckoning?
New
Categories:
Sub Categories:
Popular Portals
- /elixir
- /rust
- /ruby
- /wasm
- /erlang
- /phoenix
- /keyboards
- /rails
- /js
- /python
- /security
- /go
- /swift
- /vim
- /clojure
- /emacs
- /haskell
- /java
- /onivim
- /svelte
- /typescript
- /crystal
- /kotlin
- /c-plus-plus
- /tailwind
- /gleam
- /ocaml
- /react
- /elm
- /flutter
- /vscode
- /ash
- /opensuse
- /centos
- /php
- /deepseek
- /html
- /zig
- /scala
- /textmate
- /sublime-text
- /lisp
- /nixos
- /debian
- /react-native
- /agda
- /kubuntu
- /arch-linux
- /revery
- /django
- /ubuntu
- /spring
- /manjaro
- /nodejs
- /diversity
- /lua
- /c
- /julia
- /slackware
- /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.
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'll move you from confusion to "Aha, now I get it!"