0
私は一日中ソリューションを探していて、いろいろなことを試しましたが、これまでのところ、不運です。ウィンドウを縮小すると、navbar-toggle（ハンバーガーメニュー）が表示されますが、ボタンをクリックするとメニューは表示されません（ハンバーガーメニュー）。特に気になるもの：最初にページを読み込むときにメニューの背景が開いています。ブートストラップのドロップダウンメニューが表示されない/動作しない
私はstyle.cssファイルで直接コンポーネントをカスタマイズしたいので、私はヘッダ内にbootstrap.cssを呼び出さないことに注意してください。ブートストラップを使用して、私はbootstrap.cssを呼び出して、それを動作させるために直接カスタマイズする必要がありますか？それとも、bootstrap.cssから選択した要素を選択してstyle.cssでコピーして動作させることができますか？すべてのスクリプトが終了
<!-- JQUERY -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
とCSS
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary{
display: block;
}
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
background-color: #08293C;
}
.navbar-fixed-top{
top: 0;
position: fixed;
right: 0;
left: 0;
z-index: 1030;
}
.container {
margin-right: auto;
margin-left: auto;
width: 500px;
}
button{
display: none;
}
.logo {
float: left;
width: 209px;
padding-top: 2px;
height: 29px;
background: url(../images/logo.svg);
background-repeat: no-repeat;
margin-top: 6px;
}
.logo a{
width: 209px;
height: 29px;
}
.nav {
margin: 0px auto;
width: 500px;
cursor:pointer;
font-weight: 100;
font-size: 9pt;
letter-spacing: 4px;
}
nav ul {
padding:0px;
margin:0px;
cursor:pointer;
}
nav li {
display:inline;
margin-top: 23px;
margin-left:20px;
color: #FFFFFF;
float:right;
}
nav a {
color: #FFFFFF;
text-decoration: none;
display: block;
}
nav a:hover {
color: #B4C6D1;
}
ul.nav li.iconhb {display: none;}
.hidden{
display: none!important;
}
@media only screen and (max-width: 767px) {
.navbar-toggle {
display: none;
}
}
@media only screen and (max-width: 575px) {
.container{
margin-left: 5%;
margin-right: 5%;
width: auto;
}
.navbar-toggle{
position: relative;
float: right;
margin-top: 12px;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
}
.navbar-toggle:focus {
outline: 0;
}
.navbar-toggle .icon-bar{
display: block;
width: 18px;
height: 2px;
border-radius: 1px;
}
.navbar-toggle .icon-bar{
margin-top: 4px;
}
.navbar-toggle{
display: block;
}
button{
cursor: pointer;
}
.navbar-toggle .icon-bar{
display: block;
width: 18px;
height: 2px;
border-radius: 1px;
}
.navbar-toggle .icon-bar{
margin-top: 4px;
}
.icon-bar{
background-color: white;
}
.navbar-collapse {
padding-right: 15px;
padding-left: 15px;
height: 200px;
overflow-x: visible;
-webkit-overflow-scrolling: touch;
border-top: 1px solid transparent;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}
.navbar-collapse.in {
overflow-y: visible;
}
ul.nav.responsive li a {
display: block;
text-align: left;
}
ul.nav.responsive li {
float: none;
display: inline;
}
/* hide menu display iconhb */
ul.nav li:not(:first-child) {display: none;}
ul.nav li.iconhb {
float: right;
display: inline-block;
}
/* responsive nav */
ul.nav.responsive {position: relative;}
ul.nav.responsive li.iconhb {
position: absolute;
right: 0;
top: 0;
}
ul.nav.responsive li {
float: none;
display: inline;
}
ul.nav.responsive li a {
display: block;
text-align: left;
}
}