ChatGPT Makes a Hamburger

In an effort to improve navigation on the site, I decided that for smaller screens, the top navigation just wouldn’t cut it. I wanted to hide the navigation behind a hamburger menu when the screen width warranted it, but it has been some time since I’ve worked on layout and pure CSS. I started wondering what the best way to go about it would be. I have a navigation area already, and the markup is really simple:

<nav id="nav">
    <ul>
        <li><a href="#intro" class="active">Introduction</a></li>
        <li><a href="#portfolio">Projects</a></li>
        <li><a href="#blog">Blog</a></li>
    </ul>
</nav>

The site template I used came with CSS so it follows you as you scroll, but I noticed that it was actually hiding the whole menu once the screen width shrunk past 736px, which made me realize, I can use that same CSS media trick to present it differently instead. I could show a hamburger menu with CSS instead of just setting it to hide, but how can I show a hamburger menu? I had more questions than answers, but then I remembered about ChatGPT. All I had to do was ask, then integrate! So I asked:

Give me a simple hamburger menu that displays nav with a single ul, li elements as a hamburger menu

What I received (rather instantly) was, to my delight, enough html and css to do exactly what I wanted, except it wasn’t going to be responsive. I had code for a functioning hamburger menu based on a nav element’s underlying list, but it was just that. No hiding or showing based on the screen size was present, but again, all you have to do is ask (after a couple more prompts to tweak the html and actually get a hamburger icon in the css):

now update the css to only apply if the screen width is less than 736px

It just worked! I massaged it a little more to get things integrated properly, but the CSS was a copy & paste smashing success!

ChatGPT is quickly becoming my swiss army knife / sous coder. It preps everything for me so all I have to do is follow the recipes I already know!