햄버거 메뉴랑 돋보기 위치 바뀌는 문제 채택완료
여기 그누보드 사이트에 있는
$(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도 안 움직이고 꽉 고정이 될 수 있을까요?
http://sir.kr/data/editor/2405/1995129119_1716028571.5047.jpg" width="100%" />
답변 2개
햄버더 로고 돋보기를 감싸고 있는 div 의 style 을 display: flex; align-items: center; 이렇게 해 보세요... 그러면 세로로 중간에 위치해서 괜찮아 질 것입니다... 맞게 padding margin line-height 등은 조정해 줘야 할 수도 있을 것입니다. 돋보기의 float: right 이 먹히지 않을 것입니다... 그러면 margin-left: auto; 로 하면 먹힐 것입니다 참고하세요...
답변에 대한 댓글 2개
행복한 하루 되세요
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인