태블릿 화면에서는 가로형일때는 모바일 메뉴가 나오고 세로형일때는 pc형 메뉴가 노출이 되고 있는데요..

지금 보니 세로형부분이 제대로 보여지지 않는것 같습니다.

내일 오전에 이 부분 확인을 해서 답변 드리도록 하겠습니다.

 

pc 웹에서도 가로사이즈가 102* 보다 작으면 상단의 메뉴가 사라집니다.

이것도 함께 확인해주시면 감사하겠습니다.

일반적으로 반응형 사이트의 경우...
상단(header)의 로고/네비게이션 부분을 하나로 작업해서 css 를 이용하여 모바일/PC 가 구분되도록 작업을 합니다.
(기본 소스들이 전부 반응형 동작하도록 처리가 되어 있습니다.)

하지만 지금 작업된 사이트를 보니, 출력(PC/모바일/APP) 체크 기능을 통해서 2중으로 작업되어 있는데,
이렇게 될 경우 반응형소스 부분과 출력체크의 동작방식의 차이로 인해서, 질문과 같은 상황이 발생합니다.

 

@ 반응형 소스 동작방식

320 ~ 102* (모바일,태블릿)
102* 이상 (PC)


@ 출력기능 동작방식

- 웹에 접속한 기기를 체크하여 동작
스마트폰,태블릿 (모바일)
그외 (PC)
 

 

이미지와 같은 출력기능은 반응형 동작을 위한것이 아닌, PC/모바일/APP 의 차이에 따른 오류를 방지하시 위해서 있는 부분입니다.

출력기능 체크를 전부 출력으로 변경하신 후,
상단 로고부분과 네비게이션부분을 하나씩만 남겨서 작업하시길 권장합니다.

현재상태 그대로 출력기능을 이용해서 작업을 원하신다면...

소스상의 반응형 코드를 수정하셔야 합니다.

 

======================================

#PC 네비게이션 소스

- PC웹에서 크기가 줄어들어도 계속 노출 되도록 크기 값을 0으로 변경합니다.

// 102*px 이상에서 동작

@media (min-width:1024px){

...
}

-->

// 0px 이상에서 동작

@media (min-width:0px){
...
}

======================================

 

======================================

# 모바일 네비게이션 소스

- 화면크기가 커져도 mobile 형태로 동작하도록 다음 소스들을 삭제하거나 주석처리 합니다.

 

@media (min-width:1024px){
...
}

======================================




이와 같은 작업방식은 일반적인 코딩방식이 아니며,

모바일/PC 두가지의 소스를 한페이지에 전부 넣어두고 상황에 맞춰서 출력하는 편법에 가깝습니다.

네비게이션 이외의 다른항목의 추가적인 수정이 필요할 수 있습니다.