私のNAVは応答インラインロゴ

Question

下中央に配置したいロゴを手に入れました。私は自分のロゴを中心にしていますが、ロゴの下にナビをどのように配置するのか分かりません。ここで

は、CSSです：

.bar { 
    position: relative; 
    float: right; 
    right: 9%; 
    top: -60px; 
    display: inline-block; 
    font-size: 1.5em; 
    font-family: 'Coming Soon', sans-serif; 
} 

.bar li { 
display: inline-block; 
margin-left: 60px; 
} 

Answer 1

は携帯電話用のルールを定義してください：

@media (max-width: 480px) { 
 
.bar { 
 
    //paste any mobile code here 
 
} 
 
       
 
.bar li { 
 
    //paste any mobile code here 
 
} 
 
} 
 
.bar { 
 
    position: relative; 
 
    float: right; 
 
    right: 9%; 
 
    top: -60px; 
 
    display: inline-block; 
 
    font-size: 1.5em; 
 
    font-family: 'Coming Soon', sans-serif; 
 
} 
 

 
.bar li { 
 
    display: inline-block; 
 
    margin-left: 60px; 
 
}

<div class="logo"></div> 
 
<ul class="bar"> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">About</a></li> 
 
    <li><a href="#">Skills</a></li> 
 
    <li><a href="#">Contacts</a></li> 
 
</ul>

Answer 2

あなたはCSSメディアクエリを使用することができます。私の場合はあなたのプロパティを適用し、私はscreen width <= 767pxを使用しています。

同様：

.logo { 
 
    float: left; 
 
    background: #eee; 
 
    width: 100px; 
 
    height: 50px; 
 
    text-align: center; 
 
    font-size: 1.5em; 
 
    padding-top: 20px; 
 
    margin: 0 auto; 
 
} 
 

 
.bar { 
 
    position: relative; 
 
    padding: 0; 
 
    float: right; 
 
    right: 9%; 
 
    display: inline-block; 
 
    font-size: 1.5em; 
 
    font-family: 'Coming Soon', sans-serif; 
 
} 
 

 
.bar li { 
 
display: inline-block; 
 
margin-left: 60px; 
 
} 
 

 
/* On Mobiles */ 
 
@media screen and (max-width: 767px) { 
 
    .logo { 
 
    float: none; 
 
    } 
 
    
 
    .bar { 
 
    display: block; 
 
    float: none; 
 
    text-align: center; 
 
    right: auto; 
 
    } 
 
    
 
    .bar li { 
 
    display: block; 
 
    margin: 0; 
 
    } 
 
}

<div class="logo">Logo</div> 
 
<ul class="bar"> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">About</a></li> 
 
    <li><a href="#">Skills</a></li> 
 
    <li><a href="#">Contacts</a></li> 
 
</ul>

・ホープ、このことができます：

/* On Mobiles */ 
@media screen and (max-width: 767px) { 
    .bar { 
    display: block; 
    float: none; 
    text-align: center; 
    right: auto; 
    } 

    .bar li { 
    display: block; 
    margin: 0; 
    } 
} 

は、以下のスニペットを見てください！