사용중인 상단메뉴, 좌측메뉴 고정, 로고 변경 방법
지푸라기

Lv.1 지푸라기 (172.♡.222.81)

2024년 4월 3일 AM 09:31 · 수정됨(17:06)

조회 765 공감 0

몇가지 적용해보고 괜찮다 싶어서 정착한 CSS 공유드려요


1. 상단메뉴 고정

스크롤 내려도 상단에 그대로 고정되어 보이게 됩니다.


2. 좌측 메뉴 고정

스크롤을 내리면 고정이 되긴 하는데 위쪽에 좀 겹치는게 보기 좋지 않아서 고정시켰습니다.


3. 로고 변경

갤러리에 다양한 로고를 회원님들이 만들어 주고 계신데 그 중에서 맘에 드는걸 적용해보시면 됩니다.

아래 적용 코드에서 url 경로를 원하는 이미지의 경로로 변경하시고 width, height 값만 해당 이미지 비율 고려해서 수정해주시면 됩니다.

엄밀히 보면 변경은 아니고 앞에 로고 추가하고 기존 DAMOANG 글씨는 안보이게 숨겼습니다 ㅡㅡ;


4. 상단 파랑 스크롤바 비활성

스크롤 내릴때마다 파랑 스크롤이 가로로 생기는데 파랑색이 시선을 너무 끌어서 감췄습니다.


적용된 예시 영상은 첨부파일 확인해주세요, 용량 제한 걸려서 본문엔 안들어가네요

(첨부가 2메가 제한이라고 안 올라가네요. 10메가라고 써있었는데...ㅜㅜ 외부에 올리고 본문에 추가했습니다.)


image

stylebot 옵션 여시고 아래 내용 넣어서 적용해보세요

/*상단메뉴 고정*/
#header-navbar.site-navbar {
    position: fixed !important;
    display: block !important;
    height: 64px !important;
}

/* 왼쪽 메뉴 고정*/
.sticky-top {
  position: sticky;
  top: 62px;
}

/* 로고 바꾸기 */
a[href="https://damoang.net"]::before {
  content: "";
  displayinline-block;
  width226px/* 로고 이미지의 너비 */
  height34px;
  background-imageurl("https://gi.esmplus.com/tdor001/damoang/LOGO_3.png");
  background-sizecover;
  margin-right4px/* 로고와 텍스트 사이의 간격 */
}

a[href="https://damoang.net"] {
    color#111111;
}

/*상단 파랑 스크롤바 비활성*/
#page-progress {
  width0px;
}

댓글 (4)

  • 블랙우유

    블랙우유 Lv.1

    24.04.03 · 172.♡.122.35

    [https://s3.damoang.net/data/editor/2404/comment_2890299939_QpSgCno7_e7bcc26f83d9692bb9abab302e340b7ff136bc9c.webp]

    이렇게 조정 했는데도 안되는데요.?
  • 지푸라기

    지푸라기 Lv.1 → 블랙우유 작성자

    24.04.03 · 172.♡.222.216

    [https://s3.damoang.net/data/editor/2404/comment_2890325720_cDVUnWR7_d013b409795c36f8cdc73815f2cc5eb782a2df1b.webp]
    생성하시고 활성화 하셨을까요? 앞에 체크가 안되어 있으면 동작을 하지 않아요.
    그리고 다모앙 페이지에서 새로고침 한번 해주세요.
  • 블랙우유

    블랙우유 Lv.1 → 지푸라기

    24.04.03 · 172.♡.223.26

    로고 이미지는 변경 된거 같은데 매뉴 좌측 고정이 안되네요
  • 지푸라기

    지푸라기 Lv.1 → 블랙우유 작성자

    24.04.03 · 172.♡.222.217

    저랑 다른건 없으신 듯 한데 Ctrl + Alt + R 누르셔서 새로고침 한번 해보세요.
    그래도 안되시면 브라우저를 껏다가 다시 켜보세요

댓글을 작성하려면 이 필요합니다.