在網頁設計中，導航欄的重要性不言而喻。但是，有時候頁面內容比較多，如果導航欄一直占據著大量的空間，就會影響頁面的美觀性和用戶體驗。因此，在這種情況下，我們可以通過CSS來將導航欄位置變小，實現頁面的簡潔、清新效果。

.nav{
position:fixed;
top:0;
left:0;
width:100%;
height:60px;
background-color:#fff;
border-bottom:2px solid #ccc;
}
.nav ul{
list-style:none;
margin:0;
padding:0;
}
.nav li{
float:left;
margin-right:20px;
}
.nav a{
display:block;
height:100%;
line-height:60px;
text-align:center;
font-size:16px;
color:#555;
text-decoration:none;
}
@media screen and (max-width: 768px){
.nav{
height:auto;
}
.nav ul{
display:none;
position:absolute;
top:60px;
width:100%;
background-color:#fff;
}
.nav li{
width:100%;
margin:0;
text-align:center;
}
.nav li a{
display:block;
border-bottom:1px solid #ccc;
margin-right: 0;
}
.menu-icon{
display:block;
height:40px;
width:40px;
text-align:center;
color:#555;
font-size:16px;
margin-top:10px;
}
}

如上所示，我們可以通過CSS中的媒體查詢@media來判斷窗口大小，從而控制導航欄位置大小和樣式。當窗口大小小于768px時，導航欄就被縮小了。此時，導航欄的高度變為auto自適應，菜單會隱藏在一個按鈕中，當用戶點擊按鈕時，菜單就會展開，從而達到導航欄位置大小的變化。

通過以上的CSS代碼，我們可以靈活控制導航欄的位置大小和樣式。在實際的網頁設計中，我們也可以根據具體的需求進行相應的調整，從而為用戶提供更加美觀、簡潔的頁面體驗。