그누보드 QA - 햄버거 메뉴랑 돋보기 위치 바뀌는 문제

햄버거 메뉴랑 돋보기 위치 바뀌는 문제

2024.05.18 19:36:26 8076 (118.♡.♡.31)

본문

여기 그누보드 사이트에 있는

 $(window).scroll(function () {
        var height = $(document).scrollTop();
        if (parseInt(height) > 0) {
            $('#hd').css({
                "position": "fixed",
                "display": "block",
                "width":"100%",
                "z-index" : "10000"
            });
            $('#wrapper').css({
                "padding-top":"116px"
            });
        } else {
            $('.hd').css({
                "display": "block",
                "position":"relative",
                "z-index" : "10000"
            });
            $('#wrapper').css({
                "padding-top":"116px"
            });
        }
    });

를 사용하여 모바일 상단 메뉴를 고정했는데

홈화면일때와 게시판일 때 햄버거 메뉴와 돋보기 메뉴가 위치가 아주 살짝 달라집니다.

신경 안 쓰면 모를 정도로 아주 미세하게 위 아래로 왔다갔다 하네요.

padding-top 부분 값도 조절해보고 chatgpt 힘도 빌려보고 fixed도 해보고 !important도 해보고 이것저것 하루종일 붙잡아봤는데 해결이 안 되네요 ㅠ

저 코드 안 쓰면 햄버거 메뉴랑 돋보기 메뉴 위치가 안 바뀌고요.

안 쓰자니 상단 고정이 안 되고요. ㅠㅠ

저 코드를 어떻게 수정해야 상단 메뉴는 고정되면서 햄버거 메뉴랑 돋보기 아이콘이 1mm도 안 움직이고 꽉 고정이 될 수 있을까요?

#그누보드5 #php

답변 2

설국열차 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2024-05-18 20:08:43 182.♡.♡.8

햄버더 로고 돋보기를 감싸고 있는 div 의 style 을 display: flex; align-items: center; 이렇게 해 보세요...
그러면 세로로 중간에 위치해서 괜찮아 질 것입니다...
맞게 padding margin line-height 등은 조정해 줘야 할 수도 있을 것입니다.

돋보기의 float: right 이 먹히지 않을 것입니다...
그러면 margin-left: auto; 로 하면 먹힐 것입니다
참고하세요...