I have a problem with the menu and content, because when I put the menu fixed and click on "us" I eat part of the content, my menu is scroll. I leave attached the link of the files.
It's the first time I publish, so I apologize if I publish something out of place, I hope your help, thank you very much KacosPro for the data.
Greetings.
/* Reseteo */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
-webkit-text-size-adjust: none;
}
/* Navbar */
.container-navbar{
width: 100%;
height: 70px;
margin: auto;
background-color: aqua;
position: fixed;
}
.logo{
width: 30%;
height: 70px;
float: left;
padding-top: 10px;
box-sizing: border-box;
background-color: firebrick;
}
.logo p a{
color: black;
font-size: 40px;
text-decoration: none;
}
.menu{
width: 70%;
height: 70px;
float: left;
text-align: right;
padding-top: 24px;
box-sizing: border-box;
}
.menu ul li{
display: inline;
}
.menu ul li a{
color: black;
font-size: 13px;
text-decoration: none;
padding: 15px;
}
.menu ul li a:hover{
color: white;
}
/* Secciones */
.slider-1{
height: 100vh;
text-align: center;
}
.slider-2{
height: 100vh;
text-align: center;
background-color: blue;
}
.slider-3{
height: 100vh;
text-align: center;
}
.slider-4{
height: 100vh;
text-align: center;
background-color: blue;
}
/* Footer */
.container-footer{
width: 100%;
height: 50px;
text-align: center;
padding: 24px;
box-sizing: border-box;
}<!DOCTYPE html>
<html lang="es">
<head>
<title>Crenein</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="files/css/main.css">
<!-- Scroll -->
<script src="files/js/smooth-scroll.min.js"></script>
<script>
smoothScroll.init({
selector: '[data-scroll]',
selectorHeader: null,
speed: 1000,
easing: 'easeInOutCubic',
offset: 0,
callback: function ( anchor, toggle ) {}
});
</script>
</head>
<body>
<!-- logo -->
<nav class="container-navbar">
<div class="logo">
<p><a href="www.crenein.com">Crenein</a></p>
</div>
<!-- menu -->
<div class="menu">
<ul>
<li><a data-scroll href="#sec-1">Inicio</a></li>
<li><a data-scroll href="#sec-2">Nosotros</a></li>
<li><a data-scroll href="#sec-3">Servicios</a></li>
<li><a data-scroll href="#sec-4">Contacto</a></li>
</ul>
</div>
</nav>
<!-- Secciones -->
<div class="container-sec">
<div class="slider-1" id="sec-1">
<p>Soporte ISP <br>
Creciemiento - Negocio - Internet</p>
</div>
<div class="slider-2" id="sec-2">
<h1>NOSOTROS</h1>
<p>Crenein es una empresa creada con el fin de ofrecer soluciones de networking escalables y rentables para ISPs.
Construimos redes de datos, pero también construimos redes de personas, fomentando el trabajo colaborativo. Creemos que el cooperativismo es la clave del éxito en un mundo donde la forma de hacer negocios se está transformando.
Creemos en la retroalimentación del negocio, es decir; si nuestros clientes crecen nosotros crecemos.
Trabajamos incansablemente en el desarrollo innovador de tecnologías y procesos que mejoran la operatividad del ISP.</p>
</div>
<div class="slider-3" id="sec-3">
<h1>SECCION 3</h1>
</div>
<div class="slider-4" id="sec-4">
<h1>SECCION 4</h1>
</div>
</div>
<!-- Footer -->
<div class="container-footer">
<p>Desarrollado por <a href="#">Manuel Alejandro Parcellier</a></p>
</div>
<!-- Script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
</body>
</html>