Membuat Announcement Bar Dengan Header Sticky
https://www.kompiajaib.com/2019/05/membuat-announcement-bar-dengan-header.html
色とかが良かったので
固定ヘッダーと違ってページの一部となります
関連:追加CSS
.head-wrap {
position: -webkit-sticky;
position: sticky;
top: -30px;
margin: 0;
}
.announcement {
width: 100%;
font-size: 16px;
font-weight: 300;
line-height: 30px;
background: #ffeb71;
text-align: center;
color: #333;
}
.announcement a {
font-size: 16px;
font-weight: 700;
color: #333;
text-decoration: none;
}
@media screen and (max-width:425px) {
.head-wrap {
top: -60px /* line-height .announcement dikali -2 */
}
}
<body> タグ のすぐ下に追加
<div class='head-wrap'>
<div class='announcement'>
➜ <a href='#' title=''>Your Text Here</a>
</div>
</div>
0 comments:
コメントを投稿
スパム対策の為コメントをオフにしています。
Disqusは利用出来ます。
注: コメントを投稿できるのは、このブログのメンバーだけです。