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

`To position an element within a div without affecting its layout, use absolute positioning``

Is it possible to add an element to a div that is aligned to the right but still sits on top of the other element within the div? Here are some images to illustrate the issue: https://i.sstatic.net/dW7ev.png The problem arises when you try to center the ...

htmlcssbootstrap-5

Tips on Incorporating CSS in import.io Connect Extract

By utilizing the import.io connector, I successfully extracted a portion of HTML from the source website. The output was returned as "html" type, consisting of a single table of data with styles defined in the body HTML but not fully extracted. Consequentl ...

htmlcssconnectorimport.io

What is the best way to ensure that an element remains active even after a page refresh?

I have been using this code to activate the current element, which I came across on a website called "w3schools.com". However, whenever I refresh the page, the currently active element disappears. Is there a way to ensure that the active element remains hi ...

javascripthtmlcss

Step by step guide on how to connect a stylesheet in CSS

Hey there, I recently attempted to link a style sheet in my HTML for the first time. Unfortunately, I encountered an issue where it didn't work. Here's the code I used: <link href="css/StyleSheet.css" rel="stylesheet" type="text/css" /> W ...

htmlcssbackground

Issue with the functionality of max-height in a CSS grid container

Update: After receiving clarification from @onkar-ruikar, I realized that my original problem was quite misunderstood. While I still haven't figured out how to properly handle the cyclic dependencies issue, I decided to address it separately. As a res ...

csscss-grid

What happens in the React tutorial when the clear fix is commented out and the appearance does not change?

Currently, I am working through the React tutorial and have encountered a question regarding their starter code: class Square extends React.Component { render() { return ( <button className="square"> {/* TODO */} </butto ...

javascripthtmlcssreactjs

Exploring the concept of overflow and minmax behavior in CSS grid

Summary: Example of overflow in nested grid layout on Codepen, and attempts to fix it using CSS grid-template-columns: repeat(16, minmax(0,1fr)); Within the element called container, there are two main elements - summary-wrapper and stats-wrapper The gri ...

htmlcsscss-grid

What is the best way to switch the background color of a dropdown div when hovering over it?

I've been working on getting the color to fill the entire dropdown area based on the text you're hovering over, but it's only filling the space around the word. I've set up a Fiddle to demonstrate the issue I'm facing. I'm ne ...

htmlcsshover

The issue of exceeding margins

I am facing an issue with some CSS. Below is my HTML code: <body> <div id="cn"> <div id="hd"> <ul> <some li's> </ul> </div><!-- /#hd --> <div id="bd"> ...

htmlcss

Volkswagen elements spilling over

Why are two divs overlapping each other? I have divided the two divs equally with viewport width. When I set the width to 49% instead of 50%, the code works fine. Why is that? <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

htmlcss

Looking for a feature similar to mix-blend-mode that can change the text color to its inverse when overlapping with a background color that matches

Seeking assistance on a Mondrian-style CSS Grid layout with a rotated sticky heading. Looking to achieve a visual effect where intersecting text turns white when a black horizontal line passes over or under it. https://i.sstatic.net/YQaxV.png Considering ...

cssmix-blend-mode

Styling buttons with CSS in the Bootstrap framework

I am facing an issue with customizing buttons in Bootstrap. <div class="btn-group"> <button class="btn btn-midd">Link</button> <button class="btn btn-midd dropdown-toggle"> <span class="icon-download-alt icon-gray ...

cssbuttontwitter-bootstraphover

What could be causing the failure of the update for this computed property in my Vue 3 application?

Currently, I am in the process of creating an audio player using Vue 3 and the Napster API. About the Project I have managed to make the vinyl rotate by utilizing a CSS keyframes-based animation paired with the computed property isSpinning. I intend for ...

javascriptcssvue.jsvuejs3

Creating circular borders in CSS: A step-by-step guide

Is it possible to create a circular border in CSS? Currently, the shape is square but I would like it to be circular. color: white; left: 52px; position: absolute; top: 65px; padding: 3px; background-color: rgb(0, 195, 255); ...

htmlcss

Learn how to trigger an animation when hovering over an element, and how to pause it once the hover is

I am facing an issue with a button that I want to rotate upon mouse hover. The problem is, the rotation works perfectly when the mouse enters, but it continues spinning even after the mouse leaves. Here's the code snippet for better understanding: ...

csscss-animations

React and Material UI: troubleshooting problems with layout columns

I'm working on a project with three columns and I want to include a column for removing each row. Is it possible to add a "removing" column on the right? If so, how can I go about doing it? VIEW CODESANDBOX: HERE const CustomTableRow = ({ row, index ...

javascripthtmlcssreactjsmaterial-ui

HTML: The art of aligning elements within a header

I've been working on creating my personal HTML record, but I'm facing one last challenge that I can't seem to overcome. I want to design my header like this: https://i.stack.imgur.com/FU8EJ.png With the following elements: TEXT SUMMARY wi ...

htmlcssweb

Bootstrap Navigation Bar Animation causing Input Fields to be cut off

I am working with a collapsible bootstrap NavBar that contains two elements within the collapsible <div>, <form class="form-inline> and <select class="custom-select" id="menu"> (Refer to my code below) The problem I'm encountering ...

htmlcssbootstrap-4

The website is unresponsive to the media query

Currently, I am working on a project using Windows 10, Codeigniter, jQuery, and Firefox 43.0.4. However, I am facing an issue that is quite baffling to me. My goal is to apply styles specifically for an iPad-sized window, so I have implemented the followin ...

htmlcssmedia-queries

Expand the accordion to reveal all the content

I'm facing an issue with my accordion where a scrollbar appears in every content section. To fix this, I tried setting overflow: hidden in the CSS: .ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; overflow: hidd ...

javascriptjqueryhtmlcssaccordion