I'm trying to make a website from this template . Remove the top part leaving the header, the image carousel, and what comes next is the navigation bar. I wanted it to stay fixed at the top when scrolling. I have some previous example that helped me with bootstrap, but in this case I don't know how to do it. I don't know if there will be a way to do it without bootstrap, or if I have to add bootstrap to get it. Thanks. This is the beginning of the body code:
<body class="page1" id="top">
<header>
<!--<div class="container_12">
<div class="grid_12">
<h1>
<a href="index.html">
<img src="images/milogo.jpg" alt="Your Happy Family">
</a>
</h1>
</div>
</div>
<div class="clear"></div>-->
<ul id="slippry">
<li>
<a href="#slide1"><img src="images/jardines/jardin1.jpg" alt="Le dejamos un jardin de ensueño."></a>
</li>
<li>
<a href="#slide1"><img src="images/desbroces/desbroce-2.jpg" alt="Desbrozamos y limpiamos su finca."></a>
</li>
<li>
<a href="#slide1"><img src="images/vallas/vallas.jpg" alt="Cercamos su finca con postes de madera."></a>
</li>
</ul>
And the navigation bar line:
<nav class="horizontal-nav full-width horizontalNav-notprocessed">
I already got what I was looking for a fairly simple code that I leave here and I hope it will serve others and that I found on this page . Thanks for your support.
To make something fixed simply use fixed position and then use top (or bottom) and left (or right) to indicate the position where you want to put the element:
If you want to do it using bootstrap, then simply add the class
fixed-top
, as the documentation indicates , to your element, something like the followingYou have in css the property
position:fixed
that keeps the element fixed. To set it to a position, you have to indicate it with the properties top, bottom, left and right. There is a tutorial that teaches it quite well: HereIf you notice, use the rule:
Where the position is fixed on the
Top: 0
The solution is simple, you just have to add this to your container: