HTML5 - ロゴを中心にしないでください。

Question

私はstackoverflowを使い慣れています。何かを正しく説明していない場合は、私と一緒に裸にしてください。

現在、私が働いている会社のHTML5ウェブサイトを作成しましたが、ナビゲーションバーのロゴに問題があります。私が抱えている問題は、ロゴがメニューリンクを持つナビゲーションバーの中央に表示されないということです。

私は、ナビバーの単語の中には、ロゴが左にドリフトする原因となる幅が異なることが分かりました。しかし、これが起こるのを止める方法がなければならないのでしょうか？

Photo - Nav Bar with Logo

誰かがこの問題を解決する方法についていくつかの光を当てる必要がある場合は

ははるかに高く評価されるだろう。私はオンラインで検索し、多くのフォーラムやトピックを調べましたが、回答が見つかりませんでした。サイトへ

ライブリンク：http://www.ebigpicture.digital

Answer 1

ブートストラップを使用しているので、3列のナビゲーションバーを分割すると考えましたか？ 左のオプション - ロゴ - 右のオプション。

多分col 5 - > col 2 - > col 5が機能するでしょう。

<div class="collapse navbar-collapse" id="main-menu"> 
 
<ul class="nav navbar-nav navbar-left"> 
 
<li><a href="#home">HOME</a></li> 
 
<li><a href="#about">SERVICES</a></li> 
 
<li><a href="#clients">CLIENTS</a></li> 
 
<li><a href="#services">THE PATH</a></li> 
 
</ul> 
 
<a class="site-logo" href="index.html"> 
 
<img class="logo-size" src="http://www.ebigpicture.digital/img/logo-blue.png" alt="logo"> 
 
</a> 
 
<ul class="nav navbar-nav navbar-right"> 
 
<li><a href="#story">CASE STUDIES</a></li> 
 
<li><a href="#facts">SOLUTION</a></li> 
 
<li><a href="#testimonial">TESTIMONIALS</a></li> 
 
<li><a href="#contact">CONTACT</a></li> 
 
</ul> 
 
</div>

のようなものに変わります：...私はあなただけのMDとLGサイズのフルナビゲーションバーを表示知っ

<div class="collapse navbar-collapse" id="main-menu"> 
 
<div class="col-xs-5 col-sm-5 col-md-5 col-lg-5"> 
 
    <ul class="nav navbar-nav navbar-left"> 
 
<li><a href="#home">HOME</a></li> 
 
<li><a href="#about">SERVICES</a></li> 
 
<li><a href="#clients">CLIENTS</a></li> 
 
<li><a href="#services">THE PATH</a></li> 
 
</ul> 
 
</div> 
 
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> 
 
    <a class="site-logo" href="index.html"> 
 
<img class="logo-size" src="http://www.ebigpicture.digital/img/logo-blue.png" alt="logo"> 
 
</a> 
 
</div> 
 
<div class="col-xs-5 col-sm-5 col-md-5 col-lg-5"> 
 
<ul class="nav navbar-nav navbar-right"> 
 
<li><a href="#story">CASE STUDIES</a></li> 
 
<li><a href="#facts">SOLUTION</a></li> 
 
<li><a href="#testimonial">TESTIMONIALS</a></li> 
 
<li><a href="#contact">CONTACT</a></li> 
 
</ul> 
 
</div> 
 
</div>

ますので、 div内のxs xm colsを削除できます。

Answer 2

次のCSS

.site-logo{ position: absolute; left: 50%; margin-left: -40px; }

を使用するロゴを中央に、これは役立ちます願っています。