커스텀 메뉴바

홈페이지 상단에 나만의 메뉴바를 만들어 보세요!

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: 1000000; box-shadow: 0 0 4px 4px rgba(0,0,0,0.05); } .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