css - pure css responsive menu

Question

busy testing out creating a responsive menu using just css. I used this tutorial as a base, and i've managed to get the menu to "collapse", but now I'm having trouble actually getting the menu to display when the button is clicked.

My code:

index.html

<html>
    <head>
        <title>Flex Test</title>
        <link rel="stylesheet" type="text/css" href="css/flex_test.css">
    </head>
    <body id="main-content">
        <header>
            <div id="top-nav">
                <div class="center-section">
                    <section id="logo">
                        <a href="">Home Logo</a>
                    </section>
                    <div class="collapse-menu">
                        <label for="show-menu" class="show-menu">Menu</label>
                        <input type="checkbox" id="show-menu" role="button">
                    </div>
                    <div class="navbar">
                        <ul>
                            <li><a href="">About</a></li>
                            <li><a href="">Store</a></li>
                            <li><a href="">Contact</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </header>
        <section class="landing">
        </section>
        <p class="article">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
        <footer>
            <div id="bot-nav">
                <div class="center-section">
                    <div class="bot-list">
                        <ul>
                            <li><a href="">About</a></li>
                            <li><a href="">Store</a></li>
                            <li><a href="">Contact</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div id="copyright">
                <div class="copyright-container">
                    <p>&copy Flex Test</p>
                    <p>Designed by <a href="">Incredible Flex Inc.</a></p>
                </div>
            </div>
        </footer>
    </body>
</html>

flex_test.css

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  height: 100%;
  width: 100%;
  background: #1F2121
}

#top-nav {
  background: #1F2121;
  border-bottom: 4px solid #FFD700;
}

#bot-nav {
  background: #1F2121;
  border-top: 4px solid #FFD700;
}

#copyright {
  background: #FFD700;
}

#bot-nav ul {
  list-style: none;
  padding: 0;
}

header section {
  display: flex;
  height: 90px;
  width: 500px;
  border-left: 1px solid #FFD700;
  border-right: 1px solid #FFD700;
}

#top-nav section a {
  text-decoration: none;
  color: #FFD700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

#top-nav section a:hover {
  color: #1F2121;
  background-color: #FFD700;
}

.center-section {
  display: flex;
  max-width: 1000px;
  margin: auto;
}

.center-section > * {
  flex: 1 1 0;
}

.navbar {
  display: flex;
}

.navbar ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  align-self: center;
}

.navbar ul li {
  display: flex;
  flex: 1 1 100%;
}

.navbar ul li a {
  text-decoration: none;
  color: #FFD700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  border-right: 1px solid #FFD700;
}

.navbar ul li a:hover {
  color: #1F2121;
  background-color: #FFD700;
}

.bot-list {
  padding: 20px 0px;
}

.bot-list ul li a {
  text-decoration: none;
  color: #FFD700;
}

.landing {
  height: calc(100% - 94px);
  width: 100%;
  background: url('../images/gold-grid.png') no-repeat 50% 50%;
  background-size: cover;
}

.article {
  padding: 30px 0px;
  color: #FFD700;
}

.copyright-container {
  max-width: 1000px;
  margin: auto;
  padding: 10px 0px;
}

.copyright-container p {
  text-align: center;
}

.copyright-container a {
  text-decoration: none;
  color: #1F2121;
}

.collapse-menu {
  display: none;
}

.show-menu {
  text-decoration: none;
  color: #FFD700;
}

.show-menu:hover {
  color: #1F2121;
  background-color: #FFD700;
}

input[type=checkbox]:checked ~ .navbar {
  display: block;
  width: 500px;
  height: 50px;
}

@media screen and (max-width: 1000px) {
  .navbar {
    display: none;
  }

  .collapse-menu {
    display: inline;
  }

  .show-menu {
    display: inline-flex;
    align-self: center;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
  }
}

A little help figuring out how to get the menu to display would be much appreciated. Thanks.

Edited: corrected the class selector in css.

Joint · Accepted Answer · 2018-03-01 17:34:43Z

2

You have wrong structure of your code. Your checkbox should be inside the same container as ul with menu links, then you must use correct id/class for this menu, because now your css is trying to show ".menu-main-navigation-container" and he is looking for it just after checked checkbox - but there is no element with this class in your code and definitely not after this checkbox in his container. Selector '~' means get next element with sth. Example, if you have 'p ~ ul' - it means: there are styles for 'ul' which is after 'p' in code, but inside the same container.

answered Mar 1, 2018 at 17:34

Joint

1,2261 gold badge12 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

anark10n Over a year ago

ah, .menu-main-navigation-container is because i copied it from an old version of the code. Even after changing it to .navbar doesn't resolve it. I'll move the checkbox into the ul container and see if it works.

Collectives™ on Stack Overflow

css - pure css responsive menu

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related