Navigation menu items overlapping content

Question

Navigation menu items overlapping content

Navigation

#1 by (0 votes)

2

I'm working on building a website using php and html and for easy browsing, I've separated the menu from the index into another file and am calling it with the include_once inside the body's index. It turns out that when I add any other content in the index file, the menu overlaps the content, disrupting the view and sometimes hiding. How do I make the menu stay static above all content?
Code index:

<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><scriptsrc="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><!--Includeallcompiledplugins(below),orincludeindividualfilesasneeded--><scriptsrc="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

asked by anonymous 19.07.2018 / 02:32

1 answer

Android Studio - Error using BottomNavigationViewEx methods JWT + Spring Security without authentication

score 0 · Accepted Answer

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's important to note that the rest of your content has a margin-top so it does not overlap with this menu, it should be the same size as the height of your menu

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