0
3 가지 질문 중 하나만 있으면 좋겠습니다.상단에 고정 된 탐색 표시 줄, 헤더를 없애고 집으로 로고를 교체하십시오
먼저, 탐색 표시 줄을 맨 위에 고정하기 위해 코드를 조정해야하는 위치와 위치를 알고 싶습니다. (맨 아래로 스크롤 할 때 위쪽에 위치합니다.)
두 번째로 홈 탭을 탐색 모음 왼쪽에 있고 탐색 막대에 맞게 유지하는 로고로 대체하려면 어떻게해야합니까?
마지막으로 웹 사이트의 응답 성을 손상시키지 않고 헤더를 제거하고 싶습니다. 간단한 해결책은에 '숨겨진'을 추가하는 것으로 보이므로 그렇게 될 것입니다. 것은, 그 때 nav-bar의 원본 정렬은 남겨진다이다. 다른 솔루션? 주요 개체는 탐색 모음을 맨 위에 고정하는 것입니다. 미리 감사드립니다 :).
HTML
<body>
<div id="page-wrapper">
<!-- Header -->
<div id="header">
<!-- Logo -->
<h1><a href="index.html" id="logo">Company Name</a></h1>
<!-- Nav -->
<nav id="nav">
<ul>
<li class="current"><a href="index.html">Home</a></li>
<li>
<a href="#">Dropdown</a>
<ul>
<li><a href="#">Lorem dolor</a></li>
<li><a href="#">Magna phasellus</a></li>
<li><a href="#">Etiam sed tempus</a></li>
<li>
<a href="#">Submenu</a>
<ul>
<li><a href="#">Lorem dolor</a></li>
<li><a href="#">Phasellus magna</a></li>
<li><a href="#">Magna phasellus</a></li>
<li><a href="#">Etiam nisl</a></li>
<li><a href="#">Veroeros feugiat</a></li>
</ul>
</li>
<li><a href="#">Veroeros feugiat</a></li>
</ul>
</li>
<li><a href="left-sidebar.html">Left Sidebar</a></li>
<li><a href="right-sidebar.html">Right Sidebar</a></li>
<li><a href="two-sidebar.html">Two Sidebar</a></li>
<li><a href="no-sidebar.html">No Sidebar</a></li>
</ul>
</nav>
</div>
CSS
/* Header */
#header {
text-align: center;
padding: 0 0 0 0;
background-color: #fff;
background-repeat: no-repeat, no-repeat, repeat;
}
#header h1 {
padding: 0 0 0 0;
margin: 0;
}
#header h1 a {
font-size: 1.5em;
letter-spacing: -0.025em;
border: 0;
}
#nav {
text-align: center;
cursor: default;
background-color: #FFFFFF;
padding: 0;
}
#nav:after {
content: '';
display: block;
width: 100%;
height: 0.75em;
background-color: #37c0fb;
background-image: url("images/bg01.png");
}
#nav > ul {
margin: 0;
}
#nav > ul > li {
position: relative;
display: inline-block;
margin-left: 1em;
}
#nav > ul > li a {
color: #c0c0c0;
text-decoration: none;
border: 0;
display: block;
padding: 1.5em 0.5em 1.35em 0.5em;
}
#nav > ul > li:first-child {
margin-left: 0;
}
#nav > ul > li:hover a {
color: #fff;
}
#nav > ul > li.current {
font-weight: 600;
}
#nav > ul > li.current:before {
-moz-transform: rotateZ(45deg);
-webkit-transform: rotateZ(45deg);
-ms-transform: rotateZ(45deg);
transform: rotateZ(45deg);
width: 0.75em;
height: 0.75em;
content: '';
display: block;
position: absolute;
bottom: -0.5em;
left: 50%;
margin-left: -0.375em;
background-color: #37c0fb;
}
#nav > ul > li.current a {
color: #c0c0c0;
}
#nav > ul > li.active a {
color: #fff;
}
#nav > ul > li.active.current:before {
opacity: 0;
}
#nav > ul > li > ul {
display: none;
}
#page-wrapper {
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-moz-transition: -moz-transform 0.5s ease;
-webkit-transition: -webkit-transform 0.5s ease;
-ms-transition: -ms-transform 0.5s ease;
transition: transform 0.5s ease;
padding-bottom: 1px;
padding-top: 44px;
}
body.navPanel-visible #page-wrapper {
-moz-transform: translateX(275px);
-webkit-transform: translateX(275px);
-ms-transform: translateX(275px);
transform: translateX(275px);
}
현재 사이트의 라이브 버전에 볼 수 있습니다 : http://heliossol.000webhostapp.com