공유
met_bruegel_1565.jpg

커스텀 네비게이션 바

Created
1/5/2021, 3:32:32 AM
Tags
Empty
홈페이지 상단에 나만의 네비게이터 바를 만들어 보세요!
Head
<style> .notion-app { padding-top: 56px; } .custom-navbar { position: fixed; top: 0; display: flex; align-items: center; width: 100%; height: 56px; background-color: #ffffff; z-index: 100000; } .custom-navbar-logo { height: 24px; margin-left: 16px; margin-right: 16px; } .custom-navbar > a { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 16px; color: #000000; font-weight: 600; flex: 1; text-decoration: none; transition: 300ms; } @media (max-width: 414px) { .custom-navbar-logo { display: none; } .custom-navbar > a { font-size: 14px; } } </style>
HTML
Body
<div class="custom-navbar"> <div class="custom-navbar-logo"> <a href="https://www.oopy.io"> <img src='https://app.oopy.io/static/media/oopy_logo_horizontal.54e14e68.png' alt='logo' style='height: 24px;'/> </a> </div> <a href='/'>Home</a> <a href='/guide'>Guide</a> <a href='/qna'>Q&A</a> </div>
HTML
Made with 💕 and Oopy
TOP