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

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

QA

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

답변 2

본문

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

 

 $(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도 안 움직이고 꽉 고정이 될 수 있을까요?

 

1995129119_1716028571.5047.jpg

이 질문에 댓글 쓰기 :

답변 2

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

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

저 코드 그대로 쓰면 실제 공간이 푹 올라가는 듯한 액션있을텐데요.. 

 

그러니깐 네비영역 말고 컨텐츠 공간이 위로 올라가는듯한 액션

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 299
© SIRSOFT
현재 페이지 제일 처음으로