햄버거 메뉴랑 돋보기 위치 바뀌는 문제
본문
여기 그누보드 사이트에 있는
$(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도 안 움직이고 꽉 고정이 될 수 있을까요?
답변 2
햄버더 로고 돋보기를 감싸고 있는 div 의 style 을 display: flex; align-items: center; 이렇게 해 보세요...
그러면 세로로 중간에 위치해서 괜찮아 질 것입니다...
맞게 padding margin line-height 등은 조정해 줘야 할 수도 있을 것입니다.
돋보기의 float: right 이 먹히지 않을 것입니다...
그러면 margin-left: auto; 로 하면 먹힐 것입니다
참고하세요...
정말 감사합니다. 말씀해주신대로 하니 바로 해결 됐습니다. 설국열차님 분명 좋은 일 생기실 거예요. 감사합니다.
감사합니다
행복한 하루 되세요
저 코드 그대로 쓰면 실제 공간이 푹 올라가는 듯한 액션있을텐데요..
그러니깐 네비영역 말고 컨텐츠 공간이 위로 올라가는듯한 액션
넵!