ナビゲーションバー
ページ上のナビゲーションバーのデザイン
#UserCSS #design #spin-off
メニュー固定
ソース: /scrasobox/ヘッダーメニューを固定する
若干改変
code:style.css
@media screen and (min-height: 600px) and (min-width: 768px) {
body:not(.presentation) {
padding-top: 90px;
padding-right: 0 !important;
}
body:not(.presentation) .page-menu {
position: sticky;
top: 80px;
}
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 990;
overflow: unset;
}
.dropdown.open .dropdown-menu {
position: absolute;
left: auto;
top: auto;
max-height: calc(100vh - 100px);
overflow-y: auto;
}
.dropdown.open .dropdown-menu.global-menu {
left: 0;
top: 54px;
}
.page-menu .dropdown.open .dropdown-menu {
position: absolute;
top: 0;
}
}
/* スマホ向け */
@media screen and (min-height: 600px) and (max-width: 768px) {
body:not(.presentation) {
padding-top: 90px
}
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 990;
overflow: unset
}
.dropdown.open .dropdown-menu {
max-height: calc(100vh - 130px);
overflow-y: auto
}
}