Navigation menu items overwriting content

Asked

Viewed 955 times

2

I’m working on building a site using php and html and to make it easier to navigate, I’ve separated the menu from the index into another file and I’m calling it with include_once inside the body of the index. It turns out that when I add any other content in the index file, the menu is superimposed on the content, disturbing the view and sometimes even hiding. How do I make the menu static above all content?
Index code:

<head>
    <meta charset="utf-8">      
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--Título e Icon: -->
    <title>Ary Botas</title>
    <link rel="icon" href="img/logo.png">

    <!--Bootstrap: -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">      
    <!--Estilo CSS -->
    <link href="css/estilo.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->


</head>

<body>
    <?php
        include_once "menu.php";
    ?>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
</body>


Menu code:

<div class="container">
    <!--Cabeçalho-->
    <div class="navbar-header">

        <!--collapse da página-->
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#barra-navegacao">
            <span class="sr-only">Alternar Navegação</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>                      
        </button>

        <a href="index.php" class="navbar-brand">
            <span class="img-logo">Ary Botas</span>
        </a>

    </div><!--/Cabeçalho-->

    <!-- Navegação -->
    <div class="collapse navbar-collapse" id="barra-navegacao">
        <ul class="nav navbar-nav navbar-right"">
            <li><a href="#">Produtos</a></li>
            <li><a href="#">Empresa</a></li>
            <li><a href="#">Contato</a></li>
            <li>
                <a href="#" data-toggle="modal" data-target="#janela">Área do Cliente</a>
            </li> <!-- fazer modal -->                      
        </ul>

    </div> <!--/div Navegação-->

</div><!--/container da barra de navegação-->

php html

1 answer

0


You should apply a CSS style to your header container:

.container-menu {

    // Faz a o menu ficar sempre fixo na tela
    position: fixed;

    // Remove as margens do menu
    margin: 0;

    // Define a posição fixa da top como 0
    top: 0;

    // Definira com que o menu preencha 100% de largura da tela
    width: 100%;

    // Aqui você também pode definir uma altura para seu menu
    height: 45px;
}

It is important to note that all the rest of your content has a margin-top so that it is not overlaid by this menu, it should be the same size as the height of your menu

.container-tudo {
    margin-top:45px;
}

Browser other questions tagged php html

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