Ответ 1
Я не знаю. Кажется, это работает... (вроде хак, хотя).
.navbar-fixed-top {
top: -70px; /* you'll have to figure out the exact number here */
}
.navbar-fixed-top, .navbar-fixed-bottom {
position: relative; /* this can also be static */
}
Меню Bootstrap collapsed не выталкивает контент вниз при расширении
Я использую Twitter Bootstrap, чтобы играть с отзывчивой стороной веб-сайта. У меня проблема, но с меньшей шириной, где свернутое меню перетекает через содержимое страницы, а не толкает ее.
Я использовал этот пример для создания моей навигации:
http://getbootstrap.com/examples/navbar-fixed-top/
Если посмотреть на этот пример, он не подталкивает содержимое вниз.
Я видел некоторые ответы на это, чтобы использовать прописку на теле, но это не сработало для меня. Я также попытался переполнить некоторые элементы, но это не имело никакого значения.
Мой код для навигации:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<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>
<h1 class="logo-title">
<a href="index.html"><span>Logo</span></a>
</h1>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">item1</a></li>
<li><a href="#">item2</a></li>
<li><a href="#">item3</a></li>
<li><a href="#">item4</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
Я новичок в "Ревизионном дизайне" и видел множество веб-сайтов с сложенным меню, отталкивающим контент. Хорошая практика - иметь рушившиеся меню, подобные этому, или это чистая преференция?
Мой главный вопрос: как я могу заставить контент быть нажатым, когда активное меню свернуто?
Заранее спасибо за помощь.
Ответы
Ответ 2
Если вы используете расширение fixed nav, меню не будет толкать содержимое. Для этого вам нужно использовать заголовок static. Проверьте ссылку примера загрузки, которую вы указали в качестве ссылки.
Ответ 3
Есть много способов сделать это.
Можно было бы переключить класс на .container или любой элемент, который обертывает ваш контент под навигацией.
Например:
.container {
transition: padding 500;
}
.container-is-open {
padding-top:200px;
}
Ответ 4
Кроме того, чтобы избежать пробела, созданного под навигационной панелью, добавьте следующую строку в первый "div" после навигационной панели, например: jumborton
.jumbotron {
margin-top: -20px;
}
Ответ 5
часть 1: Что я сделал, это обернуть все элементы, которые вы хотите переместить.
var icon = document.getElementsByClassName("icon-bars");
var pushDown = document.getElementById("push");
$(document).ready(function(){
$(icon[0]).click(function(){
if($(pushDown).hasClass("push")){
pushDown.className = "pushUp";
}
else{
pushDown.className = "push";
}
})
});form {
max-width: 500px;
margin: 0px auto;
text-align: center;
}
input, textarea {
border: 3px solid #f47909;
padding-bottom: 10px;
}
input:focus, textarea:focus {
outline: none;
border: 3px solid #f2a25a;
}
label {
display: block;
margin-bottom: 20px;
}
span {
display: block;
}
textarea {
max-height: 200px;
height: 200px;
width: 300px;
max-width: 300px;
}
/*rest same as index.css*/
*{
font-family: 'futura';
}
.navvy {
border-radius: 0px;
margin: 0px;
height: 70px;
padding-top: 5px;
}
@media screen and (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
}
li{
padding-right: 30px;
font-size: 19px;
}
}
@media screen and (max-width: 767px) {
.navbar-collapse {
margin-top: 15px;
background-color: #FAFAFA;
}
li {
font-size: 17px;
}
}
.icon-bar {
background-color: #337ab7;
}
.icon-bar-light {
background-color: #23527C;
}
#li-back:hover {
background-color: #FAFAFA;
font-size: 20px;
font-weight: bolder;
}
.navbar-brand {
font-size: 25px;
color: #1d78c6;
}
#footer {
margin-top: 50px;
padding-top: 30px;
border-top: 2px dotted #8bc771;
text-align: center;
}
#description {
margin-top: 20px;
text-align: center;
font-size: 30px;
}
.push{
transition: transform 0.5s;
transform: translate(0px, 160px);
}
.pushUp{
transition: transform 0.5s;
transform: translate(0px, 0px);
}<!doctype html>
<html lang="en">
<head>
<title>VirusFun</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Great+Vibes" rel="stylesheet">
<link rel="stylesheet" href="/css/contacts.css" type="text/css">
</head>
<body>
<div class="introPic">
</div>
<nav class="navbar navbar-default navbar-static-top navvy">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed icon-bars" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="index.html">Virus Fun</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse text-center" id="bs-example-navbar-collapse-1" role="navigation">
<ul class="nav navbar-nav">
<li><a id="li-back" href="index.html">Home</a></li>
<li><a id="li-back" href="gallery.html">Gallery</a></li>
<li><a id="li-back" href="#">About</a></li>
<li><a id="li-back" href="contacts.html">Contacts</a></li>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div id="push" class="">
<!--The blurb -->
<p id="description">Ask whatever you want!</p>
<!-- The body -->
<div class="container-fluid">
<form action="https://formspree.io/[email protected]"
method="POST">
<div class="row">
<div class="col-sm-6 col-xs-6">
<label id="name">
<span>Your Name</span>
<input tabindex="1" placeholder="John Smith" type="text" name="name">
</label>
</div>
<div class="col-sm-6 col-xs-6">
<label id="email">
<span>Your Email</span>
<input tabindex="2" placeholder="[email protected]" type="email" name="Sender">
</label>
</div>
</div>
<label>
<span>Your Message</span>
<textarea tabindex="3" name="message"></textarea>
</label>
<div class="send">
<input tabindex="4" type="submit" value="Send">
</div>
</form>
</div>
<footer id="footer">
<p>© 2017 VIRUS FUN ALL RIGHTS RESERVED</p>
</footer>
</div>
<!--need this code to be declared before javascript-->
<!-- jQuery (necessary for Bootstrap JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="/javascript/javascript.js"></script>
<script src="jquery/jquery-3.1.1.min.js"></script>
</body>
</html>Ответ 6
В моем случае это сработало, изменив этот
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
для этого
<!-- Update using navbar-static-top -->
<nav class="navbar navbar-default navbar-static-top" role="navigation">
и редактирование моего css из этого:
.wrapper {
min-height: 100%;
height: auto !important;
margin: 0 auto -30px;
padding: 70px 0 30px 0px;
}
:
.wrapper {
min-height: 100%;
height: auto !important;
margin: 0 auto -30px;
padding: 0 0 30px 0px; /* new padding */
}
Ответ 7
ЭТО РАБОТЫ!!
Если бы одна и та же проблема, и все ответы здесь вернулись к статической навигационной панели, которая не является тем, что вы ищете.
Бросьте пустой тег div (с высотой) после строки навигации, но до начала вашего содержимого. Этот пустой div подталкивает содержимое вниз и остается скрытым за навигационной панелью. Используйте javascript/jquery для переключения на div для двух мобильных ширины.
HTML
</nav>
<div class="container main">
<div id="pushContent"></div>
CSS
@media (max-width: 767px) {
#pushContent {
height: 222.5px;
width:100%;
display: none;
}
}
@media (max-width: 480px) {
#pushContent {
height: 222.5px;
width:100%;
display: none;
}
}
Javascript/JQuery
$('.navbar-toggle').on("click", function(){
$('#pushContent').slideToggle();
});
Ответ 8
navbar-fixed-top.
Наличие этого препятствует встроенному атрибуту pushdown для аккордеона. Вы должны провести массаж с помощью своего собственного javascript или css.
Ответ 9
Упомяните один "id" в data-target и добавьте этот "id" в "div", который сменит код навигатора. Как показано ниже:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h1 class="logo-title">
<a href="index.html"><span>Logo</span></a>
</h1>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">item1</a></li>
<li><a href="#">item2</a></li>
<li><a href="#">item3</a></li>
<li><a href="#">item4</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
Этот data-target вызывает конкретный "id" и на основе того, что ваш навигатор переключится.