Menu nav bar doesn't show

Question

1.00/5 (1 vote)

See more:

made a simple responsive header/nav and i'm not sure why my menu dropdown doesn't appear when i hover over the menu tab.

i've hidden my nav under line 36 and make it reappear line 53.

Pls help.

What I have tried:

<pre></pre>

HTML

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Simple dropdown Nav Exercise</title>
</head>
  
  <!-- try making a mobile menu dropdown -->
<body>
   <div class="container-fluid">
     <div class="wrapper">
       <!-- logo and mobile menu -->
       <header>
         <div class="logo">
           <img src="https://upload.wikimedia.org/wikipedia/commons/4/41/SEGA_logo.png" />
         </div>
         <a href="#">Menu</a>
       </header> 
       
       <nav>
        <ul>
         <li><a href="#">Home</a></li>
         <li><a href="#">About</a></li>
         <li><a href="#">Contact</a></li>
        </ul>
       </nav>
     </div>
     
  </div>
</body>
</html>

CSS

body {
  margin: 0;
  padding: 0;
}

header {
  background-color: #333;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
}
header .logo img {
  max-width: 100%;
  width: 50px;
  height: auto;
}

header > a {
  padding: 10px;
  background-color: #555;
  text-decoration: none;
  color: #fff;
}

header > a:hover, header > a:focus {
  color: #1c1c1c;
  background: #ccc;
}

nav ul {
  margin: 0;
  padding: 0;
  background-color: #222;
  display: none;
}

nav li {
  padding: 10px;
  text-align: center;
}

nav a {
  text-decoration: none;
  color: #fff;
}

nav li:hover {
  background-color: #333;
}

header > a:focus nav ul {
  display: block;
}

@media screen and (min-width: 768px) {
  header > a {
    display: none;
  }

  nav ul {
    display: flex;
    justify-content: flex-end;
    background: none;
    position: relative;
    top: -40px;
  }

  nav li {
    display: inline-block;
  }

  nav a {
    padding: 10px;
  }
}

Posted 25-Aug-17 5:23am

Member 13378341

Updated 24-Jul-18 2:57am

Add a Solution

Comments

Kailash Polai 29-Aug-17 5:38am

i think this because of this line
@media screen and (min-width: 768px) {

menu does not appear, please correct the css syntax errors

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Answer 1 · 2017-11-22T07:39:00

Quote:

header > a:focus nav ul

That selector targets a <ul> tag inside a <nav> tag, which is inside a focussed <a> tag, which is a direct descendant of a <header> tag.

Now look at the structure of your markup:

div [class="wrapper"]
┊
┝ header
┊  ┊
┊  ┝ div [class="logo"]
┊  ┊
┊  └ a [menu]
┊
└ nav
  ┊
  └ ul

The <nav> you're trying to target isn't nested under the <a>; it isn't even nested under the <header>; it's a sibling of the <header>.

To make the menu work, you'd need to duplicate the <nav> under the menu trigger. However, you can't nest an <a> tag inside another <a> tag, so you'd need to change the menu trigger element. For example:

HTML

<div class="wrapper">
  <!-- logo and mobile menu -->
  <header>
    <div class="logo">
      <img src="https://upload.wikimedia.org/wikipedia/commons/4/41/SEGA_logo.png" />
    </div>
    <div class="menu" tabindex="0">
      Menu

      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
    </div>
  </header>

  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</div>

CSS

header > .menu:focus nav ul {
  display: block;
}

NB: You need the tabindex on the menu trigger, since a <div> can't be focussed without it.

Anil Bandela · Answer 2 · 2017-11-22T03:13:00

Solution 1

Add below media query in CSS and check

@media screen and (min-width: 130px) and (max-width: 767px) {

nav ul{display:block;}

}

Problem: On particular width "nav ul" is "display:none" ....

Posted 22-Nov-17 3:13am

Anil Bandela

Comments

Member 13378341 22-Nov-17 10:00am

hey there! thanks for commenting. (kinda rusty on CSS since haha)

your solutions enable nav ul to show all the time. but in this case, i want the ul to be visible only when i hover over the menu tab. after i changed my code. it no longer works.


// displaying none as default
nav ul {              
  display: none;
}


// media query

                      // displaying block when menu btn hover

@media screen and (min-width: 130px) and (max-width: 767px) {
  header a:focus nav ul {
    display: block;
  }
}

Anil Bandela · Answer 3 · 2018-07-24T02:58:00

Solution 3

Add (!important) tag end of display:block !important;

Posted 24-Jul-18 2:58am

Anil Bandela

Comments

Richard Deeming 25-Jul-18 10:27am

Eight months too late. And you've already posted an answer for this one.

Menu nav bar doesn't show

3 solutions

Solution 2

Solution 1

Solution 3

Add your solution here

Preview 0

Existing Members

...or Join us