昨夜、メディア クエリの使用に関する質問を投稿しましたヘッダーとレスポンシブ ウェブサイトの問題を修正しました
だから私はついにそれをクラックしたと思ったが、何が起こるかは、画面のサイズを小さくすると、テキストが左にジャンプして消える. 私がしなければならないことは#nav-wrapper、同じサイズとそれが表示される画面を作成することだけだと思いました。
ここにコードがあります
HTML
<body>
<div class="container">
<nav id="main-nav">
<div class="inner-nav" id="nav-wrapper">
<div class="ten columns">
<ul>
<li><a href="/">Test</a></li>
<li><a href="/">Test</a></li>
<li><a href="/">Test</a></li>
</div>
</div>
</nav>
</body>
</html>
CSS - CSS が圧縮されているため、Scss 形式
//Navigation
#main-nav {
-webkit-box-shadow: 0 2px 15px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 2px 15px rgba(0,0,0,0.25);
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.25);
-webkit-transition: box-shadow 0.2s linear;
-moz-transition: box-shadow 0.2s linear;
-ms-transition: box-shadow 0.2s linear;
-o-transition: box-shadow 0.2s linear;
transition: box-shadow 0.2s linear;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
display: block;
position: fixed;
top: 0;
left: 0;
float: left;
width: 100%;
z-index: 12;
height: 60px;
background-color: white;
#wrapper {
position: relative;
}
.inner-nav {
margin-left: auto;
margin-right: auto;
width: 800px;
}
ul {
float: right;
margin: 0;
width: 600px;
li {
vertical-align: middle;
display: inline;
margin: 0 2px;
color: black;
list-style-type: none;
a {
text-decoration: none;
}
}
}
}
そして、私が呼んでいるメディアクエリ
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
#nav-wrapper{
width:767px;
}
}
画面がモバイルの場合、ナビのサイズが画面に合わせて変更されたとしましょう。position:fixedまた、ユーザーがスクロールしたときにナビゲーションバーが一番上にとどまるようにしたいことも知っています。ナビゲーションをサイト全体の上部に表示する方法があれば、私が使用position:fixedしているフレームワーク ( http://www.getskeleton.com/ ) を使用する必要はないようです。これ。
私はhttps://simple.com/のようなデザインをしようとしていますが、jQuery のものではなく、上部にナビゲーションがあり、ページ全体のヘッダーとその下にコンテンツがあります。ソースを調べてみましたが、カスタム スタイル シートを使用しており、圧縮もされています。
編集
私が求めているものは明確ではないかもしれません.モバイルデバイスでも画面に収まるように、応答性の高い固定ヘッダーを持つWebサイトが必要です. シンプルなサイトは、誰かがサイトでどのように耳を傾けたかを知っていれば、私が取り組んでいるものです。