如何制作具有彩色效果的粘页眉

Question

I want to make a sticky header as similar this site fcinq.com But I am little bit confused about The navbar and menu color style . I take I container in header and divide it into 2 parts but I cann't able to make the sticky header as like fcinq.com

So How can I make same header as like fcinq.com ?? Site link: https://www.fcinq.com/

 <nav class="navbar navbar-inverse" role="navigation" style=""> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="col-md-8" style="margin-bottom: 200px;"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#about">Jhon Budy</a> </div> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="col-md-4" style="background: blue;/*! margin-bottom: 68px; */"> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li class="current" style="margin-top: 102px;margin-bottom: 60px;"><a href="#about">About</a> <a href="#work">Work</a> <a href="#contact">Contact</a></li> </ul> </div> <!-- /.navbar-collapse --> </div> </div> <!-- /.container-fluid --> </nav> 

Answer 1

Since it seems like you are using bootstrap

https://getbootstrap.com/docs/3.3/components/#navbar-fixed-top

change your nav code to

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="">

Answer 2

Your question is not very clear but still as best i can understand you can include the below css directly and modify the content according to you need. Include <header></header> in your index.html .

header {
position: fixed;
z-index: 1111;
left: 0px;
right: 0px;
top: 28px;
height: 28px;
line-height: 28px;
text-align: center;
color: #fff;
background: #24397a;
box-sizing: border-box;
padding: 0 6px;
margin: 0px;
font-size: 20px;
text-transform: capitalize;
display: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

You can also include other elements within header tag like anchor tags, logo etc.

Hope this will help!

Answer 3

Here is my fiddle for sticky header https://jsfiddle.net/Nethravathi/y7x9vost/1/

 $(function(){ $('.navbar').affix({ offset: { /* Affix the navbar after scroll below header */ top: $("header").outerHeight(true)} }); }); 

 @import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css); /* To mantain the navbar at the bottom*/ header { width: 100%; min-height:calc(100vh - 52px); } /* To mantain the navbar at the top once it is affixed */ .affix { top: 0; width: 100%; } /* Padding for a smoth affix */ .affix + .container-fluid { padding-top: 72px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header class='container-fluid'> <h1>Title</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac neque et sem molestie scelerisque.<br/>In felis sem, pharetra ornare mi et, mattis rhoncus est.<br/>Fusce id nulla et enim molestie fermentum sed ullamcorper nibh. </p> </header> <nav class='navbar navbar-default'> <div class='container'> <div class='navbar-header'> <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'> <span class='sr-only'>Toggle Navigation</span> <span class='icon-bar'></span> <span class='icon-bar'></span> <span class='icon-bar'></span> </button> <a href='#' class='navbar-brand'> Title</a> </div> <div class='collapse navbar-collapse'> <ul class='nav navbar-nav navbar-right'> <li><a href=''>Link</a></li> <li><a href=''>Link</a></li> <li><a href=''>Link</a></li> <li><a href=''>Link</a></li> </ul> </div> </div> </nav> <div class='container-fluid'> <h1>Title</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac neque et sem molestie scelerisque.<br/>In felis sem, pharetra ornare mi et, mattis rhoncus est.<br/>Fusce id nulla et enim molestie fermentum sed ullamcorper nibh. </p> <h1>Title</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac neque et sem molestie scelerisque.<br/>In felis sem, pharetra ornare mi et, mattis rhoncus est.<br/>Fusce id nulla et enim molestie fermentum sed ullamcorper nibh. </p> <h1>Title</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac neque et sem molestie scelerisque.<br/>In felis sem, pharetra ornare mi et, mattis rhoncus est.<br/>Fusce id nulla et enim molestie fermentum sed ullamcorper nibh. </p> <h1>Title</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac neque et sem molestie scelerisque.<br/>In felis sem, pharetra ornare mi et, mattis rhoncus est.<br/>Fusce id nulla et enim molestie fermentum sed ullamcorper nibh. </p> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>