Un gran saludo, ya he realizado el menú es un menú hamburguesa, con un header o un texto a un lado, en general el problema que tengo es que no me queda fijo o adhesivo ( a pesar de que se le haga scroll, se conserve el menú en la parte superior), ya probé con position:fixed, y no funcionana.
Nota: Estoy usando el frame de Bootstrap
No se cual sera el problema, he subrayado el menú, GRACIAS.
<script>
function openNav() {
document.getElementById("sideNavigation").style.width = "250px";
//*document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("sideNavigation").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}
</script>
.sidenav {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0;
left: 0;
background-color: #111; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
/* The navigation menu links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #fff;
display: block;
transition: 0.3s
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
color: #FF0D86;
}
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
transition: margin-left .5s;
padding: 0px;
overflow:hidden;
width:100%;
}
/* Add a black background color to the top navigation */
.topnav {
background-color: #fff;
overflow: hidden;
}
/*opacity: 0.0;*/
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: #00A2FF;
text-align: center;
padding: 20px 20px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #FF0D86;
opacity: 0.5;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="shortcut icon" href="imagenes/favicom.png" type="image/x-icon">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Custom styles -->
<link rel="stylesheet" href="css/estilos.css">
<!--Javascript-->
<script type="text/javascript" src="bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="js/javascript.js"></script>
<script type="text/javascript" src="js/jquery-3.2.1.min"></script>
</head>
<body>
<div id="sideNavigation" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="index.html">Inicio</a>
<a href="nosotros.html">Nosotros</a>
<a href="servicios.php">Servicios</a>
<a href="contacto.html">Contacto</a>
</div>
<nav class="topnav">
<a href="#" onclick="openNav()">
<svg width="30" height="30" id="icoOpen">
<path d="M0,5 30,5" stroke="#000" stroke-width="3"/>
<path d="M0,14 30,14" stroke="#000" stroke-width="3"/>
<path d="M0,23 30,23" stroke="#000" stroke-width="3"/>
</svg>
</a>
<h1><b>MOLDEAR</b> LAS IDEAS</h1>
</nav>
<div id="main">
...
</div>
</body>
</html>