Fixed menu has disabled links

Asked

Viewed 62 times

1

Access the site I’m doing: https://testando23.000webhostapp.com/. Click the green arrow, notice that in this fixed menu that emerged the two links (home and over) are disabled, but if you scroll further down the page the links turn on again, and if you click the "see more" button, in the other page they turn on too.

I realized that links are only disabled when there is content on the page.

Does anyone know what’s going on?

header.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/style.css"/>
    <link rel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"
    integrity="sha384-PmY9l28YgO4JwMKbTvgaS7XNZJ30MK9FAZjjzXtlqyZCqBY6X6bXIkM++IkyinN+" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js" 
    integrity="sha384-vhJnz1OVIdLktyixHY4Uk3OHEwdQqPppqYR8+5mjsauETgLOcEynD9oPHhhz18Nw" 
    crossorigin="anonymous"></script>
    <script type="text/javascript" src="js/mostramenu.js"></script>
    <script type="text/javascript" src="js/mudaseta.js"></script>
    <script type="text/javascript" src="js/desliza.js"></script>
    <?php
        if(isset($_GET['topicos']))
        {
            $temp = explode('/',$_GET['topicos']);
            $pgatual = strtolower(end($temp));
        }
        else
        {
            $pgatual = "";
        }
    ?>
    <title>DC David Cesar | <?php $pagatual; ?></title>
</head>
<body>
<header>
<div class="container-fluid">
    <div class="head row">
        <div class="col-md-6 col-lg-7">
            <a href="index?topicos=nav/home"><img height="66" src="imagens/logo2.png"></a>
            <h1>David Cesar</h1>
            <h2>Programador Web</h2>
        </div>
        <div class="col-md-6 col-lg-5">
            <nav class="menu">
                <ul>
                    <li><a href="index?topicos=nav/home">Home</a></li>
                    <li><a href="index?topicos=nav/sobre">Sobre</a></li>
                    <li>Trabalho</li>
                    <li>Contato</li>
                </ul>
            </nav>
        </div>
    </div>
</div>
</header>

home php.:

<div id="top" class="container-fluid">
    <div class="row">
        <div class="col-lg-3">
        </div>
        <div id="logo" class="col-lg-6">
            <img height="188.6" src="imagens/logo1.png"/>
        </div>
        <div class="col-lg-3">
        </div>
    </div>
    <div class="row">
        <div class="col-lg-5">
        </div>
        <div id="seta" class="col-lg-2">
            <img src="imagens/seta1.png" id="st"/>
        </div>
        <div class="col-lg-5">
        </div>
    </div>
</div>
<div class="box container-fluid">
    <div class="row">
        <div class="col-lg-2">
        </div>
        <div id="conhecimentos" class="col-lg-8">
            <p>Conhecimentos em HTML5, CSS3, PHP7, Mysql, Javascript, Jquery, Bootstrap, Wordpress, design responsivo, Gimp e Inkscape.</p></br>
            <form name="form" action="index.php?topicos=nav/sobre" method="post">
                <button type="submit" class="btn btn-danger">LER MAIS</button>
            </form>
        </div>
        <div class="col-lg-2">
        </div>
    </div>
    <div class="row">
    </div>
</div>

CSS:

header .head
{
    position:fixed;left:15px;width:100%;
}

jQuery:

$(document).ready(function()
{
    $("#top").mouseenter(function()
    {
        $(".head").animate({top:"-95"});
    });
    $("#top").mouseleave(function()
    {
        $(".head").animate({top:"0"});
    });
});
html jquery css

1 answer

1


The div with the content that comes after the menu is partially overwriting the head, covering the links:

inserir a descrição da imagem aqui

You can solve this by adding the property z-index with a value 1 or more in style header .head:

header .head {
    position: fixed;
    left: 15px;
    width: 100%;
    z-index: 1;
}

The z-index will cause the head stay above the rest of the content. It is necessary to learn how the organization of looting the elements works. You can give a check in this MDN documentation.

Browser other questions tagged html jquery css

You are not signed in. Login or sign up in order to post.