レスポンシブサイトでのナビゲーション表示位置について

Question

前提・実現したいこと

レスポンシブサイトの製作を行っています。（勉強のため）
モバイルファースト で作っていまして、
スマホ版ではナビゲーションを画面下に固定して表示しているのですが
PC版ではナビゲーションを上部に固定表示したいと思っていますが、
うまく実装できません。

発生している問題・エラーメッセージ

#nav{
width:98%;
left:0;
bottom:0;
background-color:fff;
position:fixed;
z-index:10;
}

上記の方法でスマホ版では下部に固定表示させています（一部省略してます）
PC版の方は画面上部に固定したいので、position:fixed;でtop:0;にすれば
いいかと思いましたが、スマホの方でbottom:0;(下部固定)しているため(？)
表示が崩れてしまいます。(background-colorが画面いっぱいに広がってしまう)

初心者ゆえ掲示してある情報にも不足があるかもしれませんが、ぜひお力をお借りしたく思っております。
何卒よろしくお願いします。

該当のソースコード

ソースコード

試したこと

ネットで調べて
position:static;でリセットしたりしましたが
改めて上部固定でポジションがかけられず困っています。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[kei344]

（質問文は編集できます）質問文のCSSはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[m.ts10806]

状況再現可能なコードをご提示ください。
省略されると状況が正しく再現できませんし、CSSを質問議題とする以上はHTMLは必要不可欠です。

Answer 1

top:0を追加しても自動的にbottom:0が無効になるわけではないので、
メディアクエリの中で明示的にbottomの値をリセットしないとダメかと思います。

nav {
width:98%;
left:0;
bottom: auto; /*追加*/
top: 0; /*追加*/
background-color:fff;
position:fixed;
z-index:10;
}

このように指定すればPC時は上につきませんかね？

Comments

[takan]

ご教示いただいた情報を追加したところ、希望通りとなりました。
本当にありがとうございました！

他の方のご指摘もありがとうございます。今回は問題解決のため割愛いたしますが
次回以降質問の際はコードの記載等漏れがないよう気をつけますのでご容赦ください。
みなさま、貴重なお時間をいただきましてありがとうございました！