2
내 웹 사이트에 고정 된 탐색 막대를 만들었지 만 아래로 스크롤하면 콘텐츠가 탐색 막대 위에 스크롤됩니다. 나는 이것이 패딩으로 고쳐질 수 있다는 것을 알고 있지만, 웹 사이트를 디자인 한 방식 인 
은 패딩이 navbar 주위의 공간을 공백으로 만들 것입니다. 어떻게 콘텐츠를 Navbar 밑으로 스크롤 할 수 있도록하여 Navbar의 가장자리에서 볼 수 있지만 Navbar 꼭대기에는 가지 않습니다. 
패딩을 사용하지 않고 고정 된 탐색 모음으로 콘텐츠가 겹치지 않게하는 방법
위치를 추가 할 때 navbar에 문제가있는 것으로 보입니다. fixed; CSS에. 메뉴 옵션이 열리지 않지만이 게시물의 데모에서는 옵션이 열려 있지만 부분적으로 숨겨져 있음을 알 수 있습니다. 아무도 이것의 우연을 알 수 있습니까? 미리 감사드립니다.
/*!
* Start Bootstrap - Full Slider (http://startbootstrap.com/template-overviews/full-slider)
* Copyright 2013-2017 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-full-slider/blob/master/LICENSE)
*/
#logo{
margin-left: 3px;
float: left;
}
body {
background:url('https://facsen.wsu.edu/WSUPullman080902990.jpg') ;
background-size: 100% auto;
background-repeat: no-repeat;
}
#transparent{
opacity: 0;
}
html{
background-repeat: no-repeat;
}
p {
position: relative;
text-align: justify;
left: 15%;
width: 70%;
}
p span {
display: inline-block;
margin-top: 5%;
color: black;
font: bold 100%/45px Helvetica, Sans-Serif;
}
.container {
position: relative;
text-align: center;
width: 100%;
left: 0;
color: white;
}
.bottom-left {
position: absolute;
bottom: 8px;
left: 16px;
color: white;
font: bold 2.5vw/45px Helvetica, Sans-Serif;
text-shadow: 2px 2px 2px #36454f;
left: 40px;
bottom: 50px;
}
.bottom-left-author {
position: absolute;
bottom: 8px;
left: 16px;
color: white;
font: bold 2vw/45px Helvetica, Sans-Serif;
text-shadow: 2px 2px 2px #36454f;
left: 40px;
}
.bottom-right {
position: absolute;
bottom: 8px;
right: 16px;
color: white;
font: bold 1vw/45px Helvetica, Sans-Serif;
text-shadow: 2px 2px 2px #36454f;
right: 40px;
}
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: inline-block;
vertical-align: middle;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu {
font-family: Montserrat, sans-serif;
background: #36454f;
border-radius: 12px;
width: 99%;
padding: 12px;
margin: 0.5%;
overflow: hidden;
position: fixed;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu.align-center > ul {
font-size: 0;
text-align: center;
}
#cssmenu.align-center > ul > li {
display: inline-block;
float: none;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu > ul > li > a {
padding: 17px;
font-size: 12px;
letter-spacing: 1px;
text-decoration: none;
color: #dddddd;
font-weight: 700;
text-transform: uppercase;
}
#cssmenu > ul > li:hover > a {
color: #ffffff;
}
#cssmenu > ul > li.has-sub > a {
padding-right: 30px;
}
#cssmenu > ul > li.has-sub > a:after {
position: absolute;
top: 22px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu > ul > li.has-sub > a:before {
position: absolute;
top: 19px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu > ul > li.has-sub:hover > a:before {
top: 23px;
height: 0;
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
}
#cssmenu.align-right ul ul {
text-align: right;
}
#cssmenu ul ul li {
height: 0;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu li:hover > ul {
left: auto;
}
#cssmenu.align-right li:hover > ul {
left: auto;
right: 0;
}
#cssmenu li:hover > ul > li {
height: 35px;
}
#cssmenu ul ul ul {
margin-left: 100%;
top: 0h
}
#cssmenu.align-right ul ul ul {
margin-left: 0;
margin-right: 100%;
}
#cssmenu ul ul li a {
border-bottom: 1px solid rgba(150, 150, 150, 0.15);
padding: 11px 15px;
width: 170px;
font-size: 12px;
text-decoration: none;
color: #dddddd;
font-weight: 400;
background: #333333;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last-item > a {
border-bottom: 0;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
color: #ffffff;
}
#cssmenu ul ul li.has-sub > a:after {
position: absolute;
top: 16px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu.align-right ul ul li.has-sub > a:after {
right: auto;
left: 11px;
}
#cssmenu ul ul li.has-sub > a:before {
position: absolute;
top: 13px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu.align-right ul ul li.has-sub > a:before {
right: auto;
left: 14px;
}
#cssmenu ul ul > li.has-sub:hover > a:before {
top: 17px;
height: 0;
}
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
#cssmenu {
width: 100%;
}
#cssmenu ul {
width: 100%;
display: none;
}
#cssmenu.align-center > ul {
text-align: left;
}
#cssmenu ul li {
width: 100%;
border-top: 1px solid rgba(120, 120, 120, 0.2);
}
#cssmenu ul ul li,
#cssmenu li:hover > ul > li {
height: auto;
}
#cssmenu ul li a,
#cssmenu ul ul li a {
width: 100%;
border-bottom: 0;
}
#cssmenu > ul > li {
float: none;
}
#cssmenu ul ul li a {
padding-left: 25px;
}
#cssmenu ul ul ul li a {
padding-left: 35px;
}
#cssmenu ul ul li a {
color: #dddddd;
background: none;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.active > a {
color: #ffffff;
}
#cssmenu ul ul,
#cssmenu ul ul ul,
#cssmenu.align-right ul ul {
position: relative;
left: 0;
width: 100%;
margin: 0;
text-align: left;
}
#cssmenu > ul > li.has-sub > a:after,
#cssmenu > ul > li.has-sub > a:before,
#cssmenu ul ul > li.has-sub > a:after,
#cssmenu ul ul > li.has-sub > a:before {
display: none;
}
#cssmenu #menu-button {
display: block;
padding: 17px;
color: #dddddd;
cursor: pointer;
font-size: 12px;
text-transform: uppercase;
font-weight: 700;
}
#cssmenu #menu-button:after {
position: absolute;
top: 22px;
right: 17px;
display: block;
height: 4px;
width: 20px;
border-top: 2px solid #dddddd;
border-bottom: 2px solid #dddddd;
content: '';
}
#cssmenu #menu-button:before {
position: absolute;
top: 16px;
right: 17px;
display: block;
height: 2px;
width: 20px;
background: #dddddd;
content: '';
}
#cssmenu #menu-button.menu-opened:after {
top: 23px;
border: 0;
height: 2px;
width: 15px;
background: #ffffff;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#cssmenu #menu-button.menu-opened:before {
top: 23px;
background: #ffffff;
width: 15px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#cssmenu .submenu-button {
position: absolute;
z-index: 99;
right: 0;
top: 0;
display: block;
border-left: 1px solid rgba(120, 120, 120, 0.2);
height: 46px;
width: 46px;
cursor: pointer;
}
#cssmenu .submenu-button.submenu-opened {
background: #262626;
}
#cssmenu ul ul .submenu-button {
height: 34px;
width: 34px;
}
#cssmenu .submenu-button:after {
position: absolute;
top: 22px;
right: 19px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu ul ul .submenu-button:after {
top: 15px;
right: 13px;
}
#cssmenu .submenu-button.submenu-opened:after {
background: #ffffff;
}
#cssmenu .submenu-button:before {
position: absolute;
top: 19px;
right: 22px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
}
#cssmenu ul ul .submenu-button:before {
top: 12px;
right: 16px;
}
#cssmenu .submenu-button.submenu-opened:before {
display: none;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<!-- jQuery -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- MenuMaker Plugin -->
<script src="https://s3.amazonaws.com/menumaker/menumaker.min.js"></script>
<!-- Icon Library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>WSU Visitor's Magazine</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/full-slider.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id='cssmenu'>
<ul>
<img class="img-circle" id="logo" src="images/logo.png" width="55" height="55">
<li class='active'><a>Features</a>
<ul>
<li><a href='#article1'>Article 1</a></li>
<li><a href='#article2'>Article 2</a></li>
</ul>
</li>
<li class='active'><a href='#'>Spring</a>
<ul>
<li><a href='#article3'>Article 1</a></li>
<li><a href='#article4'>Article 2</a></li>
</ul>
</li>
<li class='active'><a href='#'>Summer</a>
<ul>
<li><a href='#'>Article 1</a></li>
<li><a href='#'>Article 2</a></li>
</ul>
</li>
<li class='active'><a href='#'>Fall</a>
<ul>
<li><a href='#'>Article 1</a></li>
<li><a href='#'>Article 2</a></li>
</ul>
</li>
<li class='active'><a href='#'>Winter</a>
<ul>
<li><a href='#'>Article 1</a></li>
<li><a href='#'>Article 2</a></li>
</ul>
</li>
</ul>
</div>
<script>
(function($) {
$.fn.menumaker = function(options) {
var cssmenu = $(this), settings = $.extend({
title: "WSU Visitor's Magazine",
format: "dropdown",
sticky: false
}, options);
return this.each(function() {
cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
$(this).find("#menu-button").on('click', function(){
$(this).toggleClass('menu-opened');
var mainmenu = $(this).next('ul');
if (mainmenu.hasClass('open')) {
mainmenu.hide().removeClass('open');
}
else {
mainmenu.show().addClass('open');
if (settings.format === "dropdown") {
mainmenu.find('ul').show();
}
}
});
cssmenu.find('li ul').parent().addClass('has-sub');
multiTg = function() {
cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
cssmenu.find('.submenu-button').on('click', function() {
$(this).toggleClass('submenu-opened');
if ($(this).siblings('ul').hasClass('open')) {
$(this).siblings('ul').removeClass('open').hide();
}
else {
$(this).siblings('ul').addClass('open').show();
}
});
};
if (settings.format === 'multitoggle') multiTg();
else cssmenu.addClass('dropdown');
if (settings.sticky === true) cssmenu.css('position', 'fixed');
resizeFix = function() {
if ($(window).width() > 768) {
cssmenu.find('ul').show();
}
if ($(window).width() <= 768) {
cssmenu.find('ul').hide().removeClass('open');
}
};
resizeFix();
return $(window).on('resize', resizeFix);
});
};
})(jQuery);
(function($){
$(document).ready(function(){
$("#cssmenu").menumaker({
title: "WSU Visitor's Magazine",
format: "multitoggle"
});
});
})(jQuery);
</script>
<section id="features">
<div>
<img class="img-responsive" id="transparent" src="images/football.jpg" width= fill>
</div>
</section>
<section id="features">
<div id="article1">
<div class="container">
<img class="img-responsive" id="articlephoto" src="images/football.jpg" align="right" width= contain alt=""/>
<div class="bottom-left">Golden Bears spoil Cougars’ undefeated season</div>
<div class="bottom-left-author"><span class="glyphicon glyphicon-user"></span> Jackson Gardner</div>
<div class="bottom-right">Photo Credit</div>
</div>
<article>
<p><span>No. 15 WSU (6-1, 3-1) lost for the first time this year, as the team fell to University of California, Berkeley (4-3, 1-3) by a final score of 37-3 Friday night.<br>
From the opening kickoff, a combination of penalties and a lack of offensive rhythm ailed the Cougars. Despite a reasonable effort from the defense in the first half, seven turnovers proved to be enough to break the Cougars’ will.<br>
Immediately after the game, Head Coach Mike Leach took the podium and voiced his displeasure in his team’s performance.
“We didn’t play good in any aspect of the game. Cal outcoached us, Cal outplayed us in every position that I saw,” he said. “Our guys just sauntered around on the field, like weirdly, like we have accomplished something.”
Redshirt freshman wide receiver Renard Bell returned the opening kickoff 99 yards to the house, only to be called back by a holding penalty. In total, the Cougars missed out on 14 points in the first half from their penalties.
Then, the ensuing drive was cut short when California redshirt freshman cornerback Camryn Bynum jumped an out route, and picked off redshirt senior quarterback Luke Falk’s pass. The freshman finished the first half with two interceptions.
In Falk’s 262 passing attempts leading up to Friday night, he had only thrown two interceptions. But, in his 43 attempts against the Golden Bears, he threw five interceptions.
“When your [quarterback] turns it over six times, you’re not gonna have a real opportunity to win the game,” Falk said. “We didn’t help the defense tonight at all, we had seven turnovers — that’s unacceptable — and it starts with the quarterback.”
The Golden Bears defense feasted on Falk in the pocket, sacking him nine times — the most in a single game this season. Leach did not miss this opportunity to be critical of his offensive line.
“I think they think they’re too good, and they’re not very tough,” he said.
California redshirt sophomore quarterback Ross Bowers started the game only completing one of his first seven passes. From there, he led his offense to make the plays necessary to pull off an upset victory.
While Bowers threw for 258 yards and just one touchdown, he did display a 7-yard touchdown scramble, where he dove into the end zone and partially landed the acrobatic spin.
Surprisingly, this was not the first time Bowers has pulled a stunt like that. In the WIAA State Finals, Bowers dove into the end zone and was flipped around, similar to Friday night’s game.
“You never think you’re gonna do that twice in a lifetime,” Bowers said. “I was just fired up we could end that drive the way we did with a touchdown. All the extra stuff is great, but I’m just happy we executed in crunch time.”
The seven turnovers by the Cougars kept the defense on the field often. California senior running back Vic Enwere took advantage of the physically taxed defense. The 102 rushing yards by Enwere supplemented Bowers’ production, leading to 365 total yards of offense.
Uncharacteristically, the Cougars went home without a touchdown. A 52-yard field goal from senior kicker Erik Powell were the only points for WSU.
“You’re searching for a bright spot, but there was no bright spot. We were pathetic,” Leach said. “We were a bunch of pathetic front-runners.”
The Cougars return home for a 7:45 p.m. kickoff Saturday against University of Colorado, Boulder (4-3, 3-2). ESPN will be broadcasting the Pac-12 matchup.</span></p>
</article>
</div>
</section>
<section id="features">
<div id="article2">
<div class="container">
<img class="img-responsive" id="articlephoto" src="images/football.jpg" align="right" width= contain alt=""/>
<div class="bottom-left">Golden Bears spoil Cougars’ undefeated season</div>
<div class="bottom-left-author"><span class="glyphicon glyphicon-user"></span> Jackson Gardner</div>
<div class="bottom-right">Photo Credit</div>
</div>
<article>
<p><span>No. 15 WSU (6-1, 3-1) lost for the first time this year, as the team fell to University of California, Berkeley (4-3, 1-3) by a final score of 37-3 Friday night.<br>
From the opening kickoff, a combination of penalties and a lack of offensive rhythm ailed the Cougars. Despite a reasonable effort from the defense in the first half, seven turnovers proved to be enough to break the Cougars’ will.<br>
Immediately after the game, Head Coach Mike Leach took the podium and voiced his displeasure in his team’s performance.
“We didn’t play good in any aspect of the game. Cal outcoached us, Cal outplayed us in every position that I saw,” he said. “Our guys just sauntered around on the field, like weirdly, like we have accomplished something.”
Redshirt freshman wide receiver Renard Bell returned the opening kickoff 99 yards to the house, only to be called back by a holding penalty. In total, the Cougars missed out on 14 points in the first half from their penalties.
Then, the ensuing drive was cut short when California redshirt freshman cornerback Camryn Bynum jumped an out route, and picked off redshirt senior quarterback Luke Falk’s pass. The freshman finished the first half with two interceptions.
In Falk’s 262 passing attempts leading up to Friday night, he had only thrown two interceptions. But, in his 43 attempts against the Golden Bears, he threw five interceptions.
“When your [quarterback] turns it over six times, you’re not gonna have a real opportunity to win the game,” Falk said. “We didn’t help the defense tonight at all, we had seven turnovers — that’s unacceptable — and it starts with the quarterback.”
The Golden Bears defense feasted on Falk in the pocket, sacking him nine times — the most in a single game this season. Leach did not miss this opportunity to be critical of his offensive line.
“I think they think they’re too good, and they’re not very tough,” he said.
California redshirt sophomore quarterback Ross Bowers started the game only completing one of his first seven passes. From there, he led his offense to make the plays necessary to pull off an upset victory.
While Bowers threw for 258 yards and just one touchdown, he did display a 7-yard touchdown scramble, where he dove into the end zone and partially landed the acrobatic spin.
Surprisingly, this was not the first time Bowers has pulled a stunt like that. In the WIAA State Finals, Bowers dove into the end zone and was flipped around, similar to Friday night’s game.
“You never think you’re gonna do that twice in a lifetime,” Bowers said. “I was just fired up we could end that drive the way we did with a touchdown. All the extra stuff is great, but I’m just happy we executed in crunch time.”
The seven turnovers by the Cougars kept the defense on the field often. California senior running back Vic Enwere took advantage of the physically taxed defense. The 102 rushing yards by Enwere supplemented Bowers’ production, leading to 365 total yards of offense.
Uncharacteristically, the Cougars went home without a touchdown. A 52-yard field goal from senior kicker Erik Powell were the only points for WSU.
“You’re searching for a bright spot, but there was no bright spot. We were pathetic,” Leach said. “We were a bunch of pathetic front-runners.”
The Cougars return home for a 7:45 p.m. kickoff Saturday against University of Colorado, Boulder (4-3, 3-2). ESPN will be broadcasting the Pac-12 matchup.</span></p>
</article>
</div>
</section>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/popper/popper.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
그게 효과가있다. 고맙습니다. – NWRobotics