1
Я хочу, чтобы мой навигационный бар выглядел как этот сайт.Navbar становится прозрачным и фиксируется сверху при прокрутке вниз
http://bootstraplovers.com/templates/assan-v2.3/main-template/index.html
Когда я прокрутки, то нав бар этого шаблона становится прозрачным и фиксируется в верхней части. Я хочу, чтобы моя панель навигации делала то же самое. Я новичок в HTML и CSS, а также для загрузки. Может ли кто-нибудь дать мне идеи, как это сделать или какие-то подсказки?
Это мой нав бар:
.navbar-header{
\t height: 74px;
\t }
\t
\t .navbar-toggle{
\t position: relative;
\t top: 15px;
\t }
\t .navbar-default .navbar-nav > li > a {
\t font-weight: 590;
\t color: #949494;
\t display: block;
\t padding: 5px 35px 2px 45px;
\t border-bottom: 3px solid transparent;
\t line-height: 70px;
\t text-decoration: none;
\t transition: border-bottom-color 0.5s ease-in-out;
\t -webkit-transition: border-bottom-color 0.5s ease-in-out;
\t }
\t .nav.navbar-nav > li > a:hover, .nav.navbar-nav > li.active a{
\t \t color:#a92419;
\t \t border-bottom-color: #a92419;
\t }
\t .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
\t \t color: #a92419;
\t \t background-color: white;
\t }
\t .navbar-default{
\t background-color:#fff;
\t margin: 0;
\t
\t }
\t .nav>li>a {
\t position: relative;
\t }
\t .navbar-default .navbar-right > li > a {
\t padding: 0 30px;
\t margin-right:6px;
\t }
\t .nav.navbar-nav > li{
\t display: :inline-block;
\t }
\t .nav.navbar-nav{
\t list-style-type:none;
\t }
\t .nav.navbar-nav > li > a:hover{
\t \t color:#a92419;
\t border-bottom-color: #a92419;
\t }
\t .navbar-default .navbar-toggle .icon-bar {
\t background-color:#a92419;
\t margin:0 0 4px;
\t width: 25px;
\t height: 5px;
\t margin-right: 13px;
\t }
\t .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{
\t background: none;
\t }
\t button.navbar-toggle{
\t background:none;
\t border:none;
\t color:#000;
\t margin: 0px;
\t }
\t .dropdown:hover .dropdown-menu {
\t display: block;
\t }
\t
\t .dropdown-menu>li>a:hover {
\t \t color:#a92419;
\t }
\t .dropdown-menu>li>a {
\t \t display: block;
\t \t padding: 3px 20px;
\t \t clear: both;
\t \t font-weight: 400;
\t \t line-height: 3em;
\t \t color: #333;
\t \t white-space: nowrap;
\t }
\t .dropdown:hover a.dropdown-toggle {
\t border-bottom-color: #a92419;
\t color:#a92419;
\t }
\t .top-bar-dark {
\t background-color: #a92419;
\t }
\t
\t .top-bar-light {
\t background-color: #f3f3f3;
\t }
\t .top-bar-light .top-dark-right li {
\t border-color: #ddd;
\t }
\t
\t .top-bar-light .top-dark-right li a:hover {
\t color: #32c5d2;
\t }
\t .top-bar-socials {
\t line-height: 30px;
\t padding-top: 5px;
\t }
\t .top-bar-socials:after {
\t display: table;
\t clear: both;
\t content: "";
\t }
\t .top-bar-socials a {
\t margin: 0px 8px;
\t text-decoration: none;
\t font-size:18px;
\t color: #fff;
\t }
\t
\t .top-dark-right {
\t margin: 0px;
\t padding: 0px;
\t }
\t
\t .top-dark-right li {
\t line-height: 40px;
\t border-left: 1px solid #932015;
\t padding: 0px 10px;
\t
\t }
\t
\t .top-dark-right li, .top-dark-right li a {
\t color: #d7d7d7;
\t font-size: 12px;
\t }
\t
\t .top-dark-right li i {
\t margin-right: 5px;
\t }
\t
\t .top-dark-right li a:hover {
\t color: #fff;
\t }
\t a.login{
\t text-decoration: none;
\t }
\t .fa-facebook:hover{
\t color:#3b5998;
\t }
\t .fa-twitter:hover{
\t color:#1dcaff;
\t }
\t .fa-linkedin:hover{
\t color:#007bb5;
\t }<link href="https://opensource.keycdn.com/fontawesome/4.6.3/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="top-bar-dark">
<div class="container">
\t <div class="row">
\t <div class="col-sm-4 col-xs-7">
\t \t <div class="top-bar-socials">
\t \t <a href="https://www.facebook.com/pages/Governor-Andres-Pascual-CollegeNavotas-City/344134628983014?fref=ts">
\t \t \t <i class="fa fa-facebook"></i>
\t \t </a>
\t \t <a href="https://twitter.com/official_gapc">
\t \t \t <i class="fa fa-twitter"></i>
\t \t </a>
\t \t <a href="https://www.linkedin.com/company/governor-andres-pascual-college-in-navotas-city">
\t \t \t <i class="fa fa-linkedin"></i>
\t \t </a>
\t \t </div>
\t </div>
\t <div class="col-sm-8 col-xs-5 text-right">
\t \t <ul class="list-inline top-dark-right">
\t \t <li class="hidden-sm hidden-xs"><i class="fa fa-envelope"></i> [email protected]</li>
\t \t <li class="hidden-sm hidden-xs"><i class="fa fa-phone"></i> (02) 282-9036</li>
\t \t <li><a href="#" class="login"><i class="fa fa-lock"></i> Login</a>
\t \t </li>
\t \t </ul>
\t </div>
\t </div>
</div>
</div>
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
\t <div class="navbar-header">
\t <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse">
\t \t <span class="icon-bar"></span>
\t \t <span class="icon-bar"></span>
\t \t <span class="icon-bar"></span>
\t </button>
\t <img class="img-responsive" src="images/brandz.png">
\t </div>
\t <div class="collapse navbar-collapse" id="nav-collapse">
\t <ul class="nav navbar-nav navbar-right">
\t \t <li class="active"><a href="#">Home</a>
\t \t </li>
\t \t <li class="dropdown">
\t \t <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About us</a>
\t \t <ul class="dropdown-menu">
\t \t \t <li><a href="#">History</a>
\t \t \t </li>
\t \t \t <li><a href="#">Mission and Vision</a>
\t \t \t </li>
\t \t </ul>
\t \t <li><a href="#">Admissions</a>
\t \t </li>
\t \t <li><a href="#">Contact us</a>
\t \t </li>
\t \t <li><a href="#">Faculty Portal</a>
\t \t </li>
\t </ul>
\t </div>
</div>
</nav>
ширина навигационной панели при прокрутке не 100% сэр. только около 80% ширины. – nethken
О, я забыл добавить 'width: 100%;' to '.navbar.affix'. Извини за это. Ответ обновлен. –
привет, сэр, он уже работал :) но могу ли я сделать его прозрачным? – nethken