work with the bars icon so that the list works in responsive mode?

Question

work with the bars icon so that the list works in responsive mode?

Navigation

#1 by (0 votes)

0

A consultation! let's see if you can help me.

I am working on a simple website project (I am still a junior: D). In the Index to view in pc each of the menu items leads to a specific section of the page (that works perfectly).

However when it comes to wanting to work with media query to try to make the web responsive with smaller screens -tables / cell-add a Bars icon to host the elements of the menu and show them when clicking.

However, I do not know how to do it so that when I display the list in responsive I redirect to the same sections (because it just does not redirect me by magic) as when it is on the normal screen -PCs-.

I share the code that I have advanced from the media query.

I hope you have explained me well. Greetings!

@media screen and (max-width: 768px) {
  p {
    font-size: 130%;
  }
  h3 {
    font-size: 150%;
  }
  header {
    height: 80px;
    position: relative;
  }
  header #logo {
    margin: 15px 0 20px -25px;
  }

  #menu-icon {
    display: inline-block;
  }

  nav:hover ul {
    display: block;
  }

  nav ul, nav:active ul {
    display: none;
    z-index: 1000;
    position: absolute;
    padding: 20px;
    background: #f5f5f5;
    border: 1px solid #a5bdcd;
    right: 20px;
    width: 25%;
    opacity: .90;
  }
   nav li {
     text-align: center;
     width: 100%;

   <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Bahá'ís de Nicaragua</title>
        <!--Iconos FontAwesome-->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

        <!--Slider Jquery BxSlider-->
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
      <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <div id="wrapper">

   <div id="banner-wrapper">
        <header>
          <div href="#" id="header-inner">
            <a href="index.html" id="logo">
              <img src="img/pics/estrella3.jpg" alt="Logo Bahá'í">
            </a>
            <nav>
              <a href="#" id="menu-icon">
                <i class="fa fa-bars "></i>
              </a>
              <ul href="#" id="menu-lista">
                <li>
                  <a href="index.html" class="current">INICIO</a>
                </li>
                <li>
                  <a href="#skills">HABILIDADES</a>
                </li>
                <li>
                  <a href="#portfolio">PORTAFOLIO</a>
                </li>
                <li>
                  <a href="#services">SERVICIOS</a>
                </li>
                <li>
                  <a href="#contact">CONTACTO</a>
                </li>
              </ul>
            </nav>
          </div>
        </header>
        </div>

html css3 responsive

asked by Jonathan Gomez 09.07.2018 в 02:18

source

1 answer

Amazon certified problem with Chrome Jsf filter what appears in the outputtext

score 0 · Answer 1

The problem is caused by this rule:

nav ul, nav:active ul {
    display: none;
    z-index: 1000;
    position: absolute;
    padding: 20px;
    background: #f5f5f5;
    border: 1px solid #a5bdcd;
    right: 20px;
    width: 25%;
    opacity: .90;
  }

I left it like this:

 nav ul {
        display: none;
        z-index: 1000;
        position: absolute;
        padding: 20px;
        background: #f5f5f5;
        border: 1px solid #a5bdcd;
        right: 20px;
        width: 25%;
        opacity: .90;
 }

I think it's because the pseudo class : active makes when you click on the nav tag the list disappears and that prevents you from clicking on the links, think that the links are within the nav

tag