Creating a customizable navigation bar using only CSS

I'm currently working on creating a navigation bar using only HTML and CSS, without the need for JavaScript to open and close it.

However, I've encountered an issue where the navigation bar remains open even after setting display: none or visibility: hidden to achieve the desired functionality. This causes problems with the hyperlink not working as intended.

You can view my code sample at http://codepen.io/anon/pen/dOMYEj.

I'm wondering if there's a way to resolve this issue while still keeping the navigation bar functioning correctly. Any suggestions would be greatly appreciated! Thanks!

css

Answer №1

When utilizing display:flex, the behavior of position:absolute, relative, and fixed may not align with expectations. To understand this better, refer to this link

The markup and CSS have been modified slightly. Take a look at the snippet below:

* {
  font-family: sans-serif;
}
nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  background-color: white;
  align-items: center;
  box-sizing: border-box;
  box-shadow: 0 0 2px rgba(128, 128, 128, 0.5);
}
nav div {
  height: 5vh;
  width: 10vw;
  position: fixed;
  top: 0;
  padding: 3px;
  right: 0;
}
.icon {
  display: inline;
}
nav > h1 {
  font-family: cursive;
  font-size: 1.2rem;
  padding-left: 10px;
  color: blue;
}
nav li {
  list-style: none;
  display: inline;
  font-size: 1.2rem;
  padding: 10px;
  cursor: pointer;
}
nav a {
  color: darkgray;
  text-decoration: none;
}
nav a:hover {
  color: black;
}
nav a:active {
  color: blue;
}
nav li:first-child * {
  color: blue;
}
nav ul {
  width: 50vw;
}
nav h1,
nav ul {
  font-size: 2rem;
}
nav > input {
  display: none;
}
nav > label {
  display: none;
}
input {
  display: none;
}
section {
  font-size: 2rem;
  padding: 1vh 5vh 0 5vh;
}
section#top {
  margin-top: 5.5vh;
}
@media (max-width: 5000px) {
  /* changed to 5000 so it is always collapsed */
  nav {
    height: 6vh;
    text-align: center;
    justify-content: space-between;
  }
  nav li {
    display: block;
    border: solid 1px blue;
    margin: 0 auto;
  }
  #links {
    visibility: hidden;
  }
  section#top {
    margin-top: 10vh;
  }
  input:checked + nav ul#links {
    visibility: visible;
    position: absolute;
    right: 30px;
  }
  input:not:checked +nav ul#links {
    visibility: hidden;
  }
  nav {
    color: blue;
  }
}
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="taco.css">
  <title>Test Page</title>
</head>
<input type='checkbox' id='one'>

<nav class="toggleable" tabindex="1">
  <h1>Test Page</h1>
  <div>
    <label for="one">☰</label>
    <ul id="links">
      <li><a href="#top">Home</a>
      </li>
      <li><a href="#about">About</a>
      </li>
      <li><a href="#menu">Menu</a>
      </li>
      <li><a href="#hours">Hours</a>
      </li>
      <li><a href="#directions">Directions</a>
      </li>
      <li><a href="#contact">Contact</a>
      </li>
    </ul>
  </div>
</nav>

<main>
  <section id="top">
    <h1>Welcome</h1> awefore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia
    reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam
    voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
  </section>
  <section id="about">
    <h1>About</h1> Lorem ipsum doloraweghawehectetur adipisicing elit. Accusamus at blanditiis commodi consequuntur delectus doloribus expedita fugit inventore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum dolor
    sit amet, consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur
    adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
  </section>
  <section id="menu">
    <h1>Menu</h1> Lorem ipsum dolor styktyktyktyking elit. Accusamus at blanditiis commodi consequuntur delectus doloribus expedita fugit inventore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur adipisicing
    elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
  </section>
  <section id="hours">
    <h1>Hours</h1> Lorem ipsum dolor sit rtyr657456ydfghfvgyjktyuicing elit. Accusamus at blanditiis commodi consequuntur delectus doloribus expedita fugit inventore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum
    dolor sit amet, consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur
    adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
  </section>
  <section id="directions">
    <h1>Directions</h1> Lorem ipsuaw4yae4yah34rtaw3789t. Accusamus at blanditiis commodi consequuntur delectus doloribus expedita fugit inventore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum dolor sit amet, consectetur
    adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
  </section>
  <section id="contact">
    <h1>Contact</h1> Lorem ipsum dolor 3456345789ru8ghiuretur adipisicing elit. Accusamus at blanditiis commodi consequuntur delectus doloribus expedita fugit inventore ipsa laudantium, magnam maxime perspiciatis quam quia rem repudiandae ut velit voluptas! Lorem ipsum
    dolor sit amet, consectetur adipisicing elit. Atque aut earum eligendi, error eum explicabo ipsum itaque laudantium modi, odit placeat quia reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem Lorem ipsum dolor sit amet, consectetur
    adipisicing elit. Accusamus ad dolorem incidunt iure laboriosam libero nihil nostrum nulla, numquam placeat quaerat repellendus totam voluptatem. Ad aliquid dolorum excepturi expedita nostrum.
  </section>
</main>

</html>

I trust this information proves useful.

Answer №2

After many attempts, I finally managed to create it. I truly wish this can be of help to someone.

HTML:

<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="taco.css">
    <title>Test Page</title>
</head>

<nav>
    <header><h1>Test Site</h1></header>
    <div id="navigation">
        <button>☰</button>
        <ul id="links">
            <li><a href="#top">Home</a>
            </li>
            <li><a href="#about">About</a>
            </li>
            <li><a href="#menu">Menu</a>
            </li>
            <li><a href="#hours">Hours</a>
            </li>
            <li><a href="#directions">Directions</a>
            </li>
            <li><a href="#contact">Contact</a>
            </li>
        </ul>
    </div>
</nav>

<main>
    <section id="top">
        <h1>Welcome</h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt consectetur suscipit in, vitae voluptas, dolorum consequatur sequi animi deserunt maxime quae sint dolorem dolores aliquid totam qui architecto ab beatae.
        reprehenderit tempora! Alias harum libero reiciendis repellendus rerum!lorem....
...the text continues with the complete HTML and CSS code as before.

Demo

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Strategies for managing grid overflow situations

Check out my codepen showcasing the current issue I'm dealing with: https://codepen.io/marcdaframe/pen/qeBWNd <div> 123 abc <div class="container"> <div class="wrapper"> <div>One</div> <div>Two</div> ...

htmlcsscss-grid

Guide on how to retrieve a clicked element

When I click on the <ul> inside this div, I want to retrieve the id="nm". <div id="suggestionTags"> <ul> <li class="nm">Commonwealth</li> <span class="cty"> x GB</span> <li class="hse">C ...

jquerycss

How well does position:fixed function in Internet Explorer versions 7, 8, and 9?

Before diving into using position:fixed, I'd like to confirm if it works well in Microsoft browsers. Thank you. ...

cssinternet-explorer

Inappropriate functionality of jQuery Code

Take a look at Demo Gallery I'm encountering some bugs that I can't seem to resolve. In Safari, there's a flickering issue when hovering over other elements In Safari and Chrome, the images are not displaying at the correct size (270x128) ...

jqueryhtmlcss

Creating dropdown options within a DataGrid in Form.IO: A step-by-step guide

I'm currently working with the Form.IO JS library to develop a new form. Within this form, I need to include a DataGrid containing 11 components. To ensure all components fit inline, I have applied the CSS rule overflow: auto (overflow-x: auto; overfl ...

javascriptjquerycssformio

Customizing checkboxes in React with JSS: A step-by-step guide

I'm currently working on customizing CSS using JSS as my styling solution, which is proving to be a bit complex while following the w3schools tutorial. https://www.w3schools.com/howto/howto_css_custom_checkbox.asp HTML: <label class="container"& ...

javascriptcssreactjsjss

Adjust the parent element to match the width of the child by utilizing the "display: grid" property

edit: I'm uncertain if this is a duplicate issue. My concern is not about the background color extending beyond the container width, but rather about expanding the container to match the size of its child with display: grid. I have updated the example ...

htmlcsscss-grid

The menu isn't displaying properly and the onclick function seems to be malfunctioning

My onclick event is acting strange. Whenever I click the mobile menu in the menubar, it just appears briefly like a flash and then disappears. It's not staying stable on the screen. The classes are being added and removed abruptly when I try to click ...

javascriptcss

Updating user credits through the Model::factory() method is a common practice in my workflow

I need to update the UserCredits after a purchase. For example, if a user currently has 10 credits and purchases 10 more, I want to add the purchased credits to their existing total. The goal is to increment the current credit score with the new credits ...

phphtmlcsslaravel

Curating personalized designs within a content management system

Currently, I am developing a SaaS platform that will feature customized styles for user accounts. The current method involves using YAML to create unique stylesheets for each account. However, as the number of accounts increases, I am starting to question ...

csscontent-management-systemsaas

Striving to implement a dynamic expand and collapse animation feature for a card in ReactJS

I'm attempting to create an expand and collapse animation effect on a card without relying on bootstrap or any external libraries. I have tried adding a transition property but it doesn't seem to work when the button is clicked. Here is the comp ...

cssreactjs

Anticipated a JavaScript module script, but the server returned a MIME type of text/html as well as text/css. No frameworks used, just pure JavaScript

I have been attempting to implement the color-calendar plugin by following their tutorial closely. I have replicated the code from both the DEMO and documentation, shown below: // js/calendar.js import Calendar from '../node_modules/color-calendar&ap ...

javascripthtmlcss

Swap out the HTML button element for text once the form is submitted

On the main page, I have a button that opens a modal when clicked. Inside the modal, there is a form with a submit button that closes the modal and returns to the main page. After closing the modal, I want to change the HTML button on the main page to plai ...

javascripthtmlcssbuttonmodal-dialog

What causes my CSS styles to vanish upon refreshing the page in Next.js?

After setting up a CSS folder within my app directory and importing the files into components for use, I noticed that the styles are applied initially. However, upon refreshing the page, they all disappear. I attempted to resolve this issue by going back ...

cssnext.jsjsxrefresh

Utilizing Javascript to Extract Data from Twitter Json Files

Can someone provide assistance with parsing JSON feed text retrieved from Twitter? I am looking to access and apply style tags to elements like the link, created date, and other information. Any tips on how I can achieve this task successfully would be g ...

jquerycssjsontwitter

Modifying alignment of buttons in React components

Transforming the typical Tic Tac Toe game from the React tutorial, with an added one-player feature. Oddly, button alignment shifts out of place once a value is inserted; causing the button to drop by about 50px until the row is filled with values, after ...

javascriptcssreactjs

disappearance of background image at bootstrap breakpoint

Hey there, I'm diving into a new journey in web design and I've encountered my first newbie issue. I'm attempting to place an image and text side by side on my web layout, but as soon as the breakpoint hits below 560px, the image disappears ...

htmlcssimagebootstrap-5

Getting the text value from a table in JavaScript is a straightforward process. By using

I am working with a table displaying available hotel rooms and want to change the text color to green if the room is marked as "available." Is there a way to check the innerHTML of a td element to see if it contains the word "available"? var status = do ...

javascripthtmlcss

Troubleshooting a text alignment problem with form-group in the Bootstrap framework

Currently, I am in the process of building a form that consists of several form-group elements. My main issue arises when dealing with long text as it causes alignment problems. Could you kindly take a look at the problem through this link: http://jsfidd ...

csstwitter-bootstrap

Issue with pop-up functionality on web page using HTML, CSS, and JavaScript

Recently, I created a unique popup using HTML. You can see the complete code (excluding CSS) here: https://codepen.io/nope99675/pen/BawrdBX. Below is the snippet of the HTML: <!DOCTYPE html> <html> <head> <meta charset=&quo ...

javascripthtmlcsswebencoding