-2
トグルメニューをクリックすると、divをプッシュダウンします。私はposition: absoluteのようにいくつかの作品を試しましたが、それは私のメニューを駄目です。それをfixedにすると、私のメニューがプッシュダウンされるという問題は解決されますが、私のメニューはそのようにページに固定されたくありません。ブートストラップサンドイッチメニューがコンテンツを押し下げるのを止めるにはどうしたらいいですか？
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
.logo {
height: 74px;
padding-left: 10px;
}
section {
background-image: url("tumblr_mngppzG5MX1r9wqk4o3_1280.png");
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
a {
\t text-decoration: none;
color: red
}
.navbar {
min-height: 100px;
\t border: none;
}
.navbar-nav {
float: right;
margin: 0;
padding-top: 29px;
}
.navbar-default {
\t background-color: rgba(0, 0, 0, 0.3);
\t }
.navbar-default .navbar-nav>.active>a
\t {
\t background-color: transparent;
\t color: #CBCCCE;
\t }
.navbar-default .navbar-nav>.active>a:hover {
color: white;
background-color: transparent !important;
font-size: 1.7em !important;
}
.navbar-default .navbar-nav>.active>a.cool-link::after {
content: '';
display: block;
width: 0;
height: 3px;
background: #286090;
transition: width .3s;
}
.navbar-default .navbar-nav>.active>.cool-link:hover::after {
color: white;
width: 100%;
transition: width .3s;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus {
background-color: transparent;
color: white;
}
.navbar-default .navbar-nav>li>a {
color: #CBCCCE;
font-size: 1.6em;
}
.navbar-default .navbar-nav>li>a:hover {
color: white;
background-color: transparent !important;
font-size: 1.7em !important;
transition: width 1s;
}
.navbar-default .navbar-nav>li>a.cool-link::after {
\t content: '';
display: block;
width: 0;
height: 3px;
background: #286090;
transition: width .3s;
}
.navbar-default .navbar-nav>li>a.cool-link:hover::after {
color: white;
width: 100%;
transition: width .3s;
}
@media only screen and (max-width: 780px) {
.logo {
height: 50px;
}
.navbar {
min-height: 80px;
\t border: none;
\t }
\t
\t .navbar-default .navbar-nav>li>a {
font-size: 1em;
\t }
\t .navbar-default .navbar-nav>li>a:hover {
font-size: 1.1em !important;
\t } \t
\t .navbar-default .navbar-nav>.active>a:hover {
font-size: 1.1em !important;
\t }
}
.navbar-collapse {
box-shadow: none !important;
border:none !important;
}
.navbar-default .navbar-collapse {
border: none !important;
}
.jumbotron {
width: 50%;
margin: auto;
}<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="http://www.festsolutions.com/wp-content/uploads/2016/05/stylesheet.css">
<head>
\t <title></title>
</head>
<body>
<section>
\t <nav class="navbar navbar-default">
\t <div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" 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="#"><img class="logo" src="http://www.festsolutions.com/wp-content/uploads/2016/05/Untitled-2-300x97.png"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" navbar-right>
<li class="active"><a href="#" class="cool-link">Home<span class="sr-only">(current)</span></a></li>
<li><a href="#" class="cool-link">Portafolio</a></li>
<li><a href="#" class=cool-link>About</a></li>
<li><a href="#" class=cool-link>Contact</a></li>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</section>
</body>
</html>
何の答えを、あなたの問題を解決するべきではありません。また、Stack Overflowによってチェックをバイパスしないでください。そうすれば、あなたの質問は貧弱なものになります。あなたの批評家に感謝します。 –
私は指示に続いてもう一度質問をします –
それは今より良く見えますか？ –