Пишем что-то сверху, перед исправлением навбара

Question

Пишем что-то сверху, перед исправлением навбара

-3

Я пытаюсь написать название сайта и слоган наверху, чтобы зафиксировать navbar. У меня есть фиксированный навигатор, но если я напишу название сайта и слоган, навигатор останется наверху.

<nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span> 
          </button>
          <a class="navbar-brand" href="#">My top 5 music</a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="nirvana.php">Nirvana</a></li>
            <li><a href="gnr.php">Guns N'Roses</a></li> 
            <li><a href="beatles.php">The beatles</a></li> 
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="register.php"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
            <li><a href="login.php"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
          </ul>
        </div>
      </div>
    </nav>

Я пытаюсь так же, как это

Steve 12 апр. 2016, в 16:18

Источник

0

У вас есть CSS? Что вы пробовали?
Zim 12 апр. 2016, в 13:53

Теги:

twitter-bootstrap

html

css

3 ответа

1

Просто добавьте, конечно, раздел в верхней части вашего навигатора. Поэтому вы можете в принципе сделать что-то подобное.

HTML:

<div id="slogan">Slogan here</div>
<nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span> 
          </button>
          <a class="navbar-brand" href="#">My top 5 music</a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="nirvana.php">Nirvana</a></li>
            <li><a href="gnr.php">Guns N'Roses</a></li> 
            <li><a href="beatles.php">The beatles</a></li> 
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="register.php"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
            <li><a href="login.php"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
          </ul>
        </div>
      </div>
    </nav>

CSS:

.navbar-fixed-top {
  top: 20px;
  }

  #slogan {
  top: 0;
  position: fixed;
  }

Скрипка

claudios 12 апр. 2016, в 14:26

0

Как насчет чего-то вроде этого: JSFiddle

Я только что добавил еще один navbar над оригиналом и navbar оригинал

HTML

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <h3>Logo</h3>
    </div>
</nav>

<nav class="navbar navbar-inverse navbar-fixed-top navbar-nav">
  ...
</nav>

CSS

.navbar-nav {
    top: 50px;
}

Alfie B 12 апр. 2016, в 14:23

Ещё вопросы

Rob Howells · Accepted Answer · 2016-04-12T15-17-00.000Z

Чтобы добиться эффекта в вашей ссылке на ссылку, вы могли бы сначала задать заголовок для позиции: relative в css, а затем добавить затем изменить его на позицию: фиксированный, как только пользователь прокрутил простую точку на экране, например

HTML:

<div class="site-name">Site name</div>
<div class="nav-bar">Nav bar</div>

CSS:

.nav-bar {
    position: relative;
}
.nav-bar.open {
    position: fixed;
}

JS:

var scrollingNav = function() {
    if ($(window).scrollTop() >= 50) { 
        $('.nav-bar').addClass('open');
    }
    else {
        $('.nav-bar').removeClass('open');
    }
};

$(window).scroll(function () {
    scrollingNav();
});

Пример: https://jsfiddle.net/s5pwu3cj/1/