プロジェクトタイトルと戻るボタンを上部に固定するUserCSS
https://gyazo.com/9538d3f0a03f0eccf8074474d2d802b4
常時トップページに戻れるようにする。
戻るボタンはウィンドウの幅によっては上部に固定されない仕様。
変更履歴
2023/07/25 ボタンの左マージンを52pxから75pxに変更。
PWAで開いた際に、左上のアイコンと被ることがあったため
ソースコード
常時有効化するバージョン
プロジェクトのトップページでも有効化される。
このプロジェクトに使われているのはこっち。
code:style.css
@media (min-width: 1200px) {
/* PC版（長い方） */
div.left-box {
display: flex;
align-items: center;
position: fixed;
top: 0;
margin-left: 75px;
z-index: 1000;
flex-wrap: nowrap;
width: 268px;
}
a.navbar-brand {
/* justify-content: flex-end;*/
}
}
@media (min-width: 768px) and (max-width: 1199.9px) {
/* PC版（狭いほう） */
@media (min-width: 992px) {
a.project-home {
width: calc((100% - 30px - 290px) / 3);
left: 90px;
}
}
@media (max-width: 991.9px) {
a.project-home {
width: calc((100% - 30px - 290px) / 3);
left: 74px;
}
}
}
@media (max-width: 768px) {
/* スマホ版 */
ul.global-menu-for-user {
margin: 0 0 0 auto;
right: 0;
}
a.project-home {
margin-left: 34px;
width: calc((100% - 30px - 110px));
}
div.expandable-menu {
/* .expandable-menuが被らないようにずらす */
top: 40px;
max-width: 100%;
}
}
@media (max-width: 1199.9px) {
/* PC版（狭いほう）とスマホ版 */
a.project-home {
position: fixed;
top: 0;
z-index: 1000;
text-align: left;
}
}
ページ内でのみ有効化するバージョン
/edで使われているもの。
code:only-page.css
@media (min-width: 1200px) {
/* PC版（長い方） */
.layout-page div.left-box {
display: flex;
align-items: center;
position: fixed;
top: 0;
margin-left: 75px;
z-index: 1000;
flex-wrap: nowrap;
width: 268px;
}
.layout-page a.navbar-brand {
/* justify-content: flex-end;*/
}
.layout-page ul.global-menu-for-user {
margin: 0 30px 0 auto;
}
}
@media (min-width: 768px) and (max-width: 1199.9px) {
/* PC版（狭いほう） */
@media (min-width: 992px) {
.layout-page a.project-home {
width: calc((100% - 30px - 290px) / 3);
left: 90px;
}
}
@media (max-width: 991.9px) {
.layout-page a.project-home {
width: calc((100% - 30px - 290px) / 3);
left: 74px;
}
}
}
@media (max-width: 768px) {
/* スマホ版 */
.layout-page ul.global-menu-for-user {
margin: 0 0 0 auto;
right: 0;
}
.layout-page a.project-home {
margin-left: 34px;
width: calc((100% - 30px - 110px));
}
div.expandable-menu {
/* .expandable-menuが被らないようにずらす */
top: 40px;
max-width: 100%;
}
}
@media (max-width: 1199.9px) {
/* PC版（狭いほう）とスマホ版 */
.layout-page a.project-home {
position: fixed;
top: 0;
z-index: 1000;
text-align: left;
}
}
更新履歴
2022/08/30
メニュー内のボタンが正常に押せなくなってしまう問題を解決した
.expandable-menuがプロジェクトタイトルボタンと被ってしまっていた
#UserCSS