질문과 답변

최근본상품
TOP
DOWN

질문과 답변

navbar 수정관련

0
0
총 채택 포인트 50 포인트
채택된 회원에게 주는 후원 포인트 40 포인트
채택 후 작성자(도깨비) 회수 포인트 10 포인트

본문

navbar를 좌측정렬된 부분에서

이윰처럼

꽉 채우고 싶은데 어떻게 해야하나요?

e3r_maga_0010 테마 사용 중 입니다.

메뉴 간격을 동일하게 나누고 싶습니다.

- 도깨비 - 회원등급 : 지상계 / Level 15
포인트 4,985
경험치 23,753
[레벨 15] - 진행률 92%
- 가입일 : 2015-02-10 11:00:20
- 서명 : 미입력
- 자기소개 : 미입력

댓글목록 8

이윰EGG님의 댓글

각메뉴 간격을 동일하게 한다면 width 값을 동일하게 적용해야 합니다.
.navbar-nav 의 width 값이 100% 일때 .navbar-nav > li 의 width  값을 동일하게 적용합니다.
메뉴가 5개라면 20%(100/5), 7개라면 14.285%(100/7)와 같이 설정하면 되겠습니다.
pc 화면일때를 구분지어 미디어쿼리를 이용해 다음과 같이 적용합니다.


@media (min-width:992px){
	.navbar-nav {width:100%}
	.navbar-nav > li {width:20%}
}


감사합니다.

축하합니다. 첫댓글 포인트 70포인트를 획득하였습니다.

도깨비님의 댓글

Header Nav 에서 적용하면 되나요?

도깨비님의 댓글

적용 시 카테고리가 2단으로 형성됩니다.
@media (min-width:992px){
.navbar-nav {width:100%}
.navbar-nav > li {width:20%}
}

이윰EGG님의 댓글

위의 답변에 보면 '7개라면 14.285%(100/7)와 같이 설정하면 되겠습니다.'라고 적혀 있듯 width 값을 width:14.285%로 적용하기 바랍니다.
메뉴 개수에 따라 100을 그 개수로 나우어 퍼센트로 값을 주기 바랍니다.

감사합니다.

도깨비님의 댓글

/*---------- Header Nav ----------*/
.header-nav {z-index:99;position:relative}
@media (min-width:992px){
.navbar-nav {width:100%}
.navbar-nav > li {width:14.285%}
}

사용시 로그인 박스가 우측하단으로 형성되면서 네비바가 2단으로 됩니다.

이윰EGG님의 댓글

메뉴 부분과 로그인 박스 부분은(.navbar-nav와 .nav-reg) 각각 다른 ul 태그라 보면 됩니다.
로그인 박스까지 맞춰야 한다면 아래와 같이 수정하기 바랍니다.


@media (min-width:992px){
	.navbar-nav {width:87.5%}
	.navbar-nav > li {width:14.285%}
	.nav-reg {width:12.5%}
}

.navbar-nav와 .nav-reg의 width 값은 용도에 맞게 수정하기 바랍니다.

감사합니다.

이윰EGG님의 댓글

혹시 직접 하기 어렵다면 1:1문의에 남겨주신 정보를 통해 직접 수정해 드리도록 하겠으니 답글 주기 바랍니다.

감사합니다.

도깨비님의 댓글

부탁드립니다. ^^

질문과 답변 (채택기능) 게시판이 신설되었습니다.
질문과 답변 (구) 게시판은 글쓰기가 제한되오니 착오 없으시길 바랍니다. (댓글 및 조회는 여전히 가능합니다.)
채택포인트 : 최소 10 포인트 ~ 최대 1,000 포인트 설정하실 수 있습니다.
빠른 답변을 원하신다면 채택포인트를 높게 설정해 보세요. ^^

전체 651 건 - 30 페이지
제목
해결
2
10p
곰이아부지 2017.12.18
미해결
2
10p
진해장애인보호작업장 2017.12.18
해결
2
10p
gang 2017.12.17
해결
2
10p
알라딘 2017.12.16
미해결
2
10p
알라딘 2017.12.16
미해결
8
50p
도깨비 2017.12.16
미해결
1
10p
드봉 2017.12.15
미해결
1
10p
좋은날에 2017.12.15
미해결
1
10p
hyekt 2017.12.14
해결
6
50p
ENO 2017.12.13
해결
3
10p
디지털홍 2017.12.13
미해결
1
10p
hyekt 2017.12.13
해결
2
50p
ENO 2017.12.13
해결
2
10p
myid1973 2017.12.12
미해결
4
80p
좋은날에 2017.12.12