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
Many tasks_proj/tests directories exist in chapters 2, 3, 5 that have tests that use the custom markers smoke and get, which are not decl...
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
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
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
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
When installing Cards as an editable package, I get the following error:
ERROR: File “setup.py” not found. Directory cannot be installe...
New
It seems the second code snippet is missing the code to set the current_user:
current_user: Accounts.get_user_by_session_token(session["...
New
Hi,
I am getting an error I cannot figure out on my test.
I have what I think is the exact code from the book, other than I changed “us...
New
I just bought this book to learn about Android development, and I’m already running into a major issue in Ch. 1, p. 20: “Update activity...
New
Other popular topics
Please tell us what is your preferred monitor setup for programming(not gaming) and why you have chosen it.
Does your monitor have eye p...
New
Curious to know which languages and frameworks you’re all thinking about learning next :upside_down_face:
Perhaps if there’s enough peop...
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
This looks like a stunning keycap set :orange_heart:
A LEGENDARY KEYBOARD LIVES ON
When you bought an Apple Macintosh computer in the e...
New
The V Programming Language
Simple language for building maintainable programs
V is already mentioned couple of times in the forum, but I...
New
Continuing the discussion from Thinking about learning Crystal, let’s discuss - I was wondering which languages don’t GC - maybe we can c...
New
Think Again 50% Off Sale »
The theme of this sale is new perspectives on familiar topics.
Enter coupon code ThinkAgain2021 at checkout t...
New
New
Explore the power of Ash Framework by modeling and building the domain for a real-world web application.
Rebecca Le @sevenseacat and ...
New
Curious what kind of results others are getting, I think actually prefer the 7B model to the 32B model, not only is it faster but the qua...
New
Categories:
Sub Categories:
Popular Portals
- /elixir
- /rust
- /wasm
- /ruby
- /erlang
- /phoenix
- /keyboards
- /python
- /js
- /rails
- /security
- /go
- /swift
- /vim
- /clojure
- /emacs
- /java
- /haskell
- /svelte
- /onivim
- /typescript
- /kotlin
- /c-plus-plus
- /crystal
- /tailwind
- /react
- /gleam
- /ocaml
- /flutter
- /elm
- /vscode
- /ash
- /html
- /opensuse
- /zig
- /centos
- /deepseek
- /php
- /scala
- /react-native
- /lisp
- /sublime-text
- /textmate
- /nixos
- /debian
- /agda
- /django
- /deno
- /kubuntu
- /arch-linux
- /nodejs
- /revery
- /ubuntu
- /manjaro
- /spring
- /diversity
- /lua
- /julia
- /markdown
- /slackware
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!"