jQuery: 途中から現れるナビゲーションメニューのスタイル変更の方法

###前提・実現したいこと
こちらのサイト（https://www.nxworld.net/tips/stikcy-or-change-header-and-navigation-when-scrolling-using-jquery.html）の4番に出てくるタグを使って、自分のサイトのナビゲーションメニューも同様に途中から現れる形で表示できたのですが、その、途中から現れる方のメニューの文字色を変更したり、もともとあった（コピー元となっているメニューにあった）罫線をnoneにしたいのですが、どうしたら実現できるでしょうか。
途中から現れるメニューに背景色を追加することはできたのですが、もともとあったスタイルをナシにする書き方がわかりません。
（私はjQueryについては超初心者です、、。本来は基礎から学んだ上で使うべきですが、今ちょっと諸事情で完成までの時間がないため、ひとまず上記サイトのコピペで使わせていただいている状況です）

よろしくお願いいたします。

◆追記：
質問が分かりづらくて申し訳ありません！
コメントくださった方々、本当にありがとうございます。

罫線は、私が自分のサイト上でつけたくてcssに追記しております。（説明不足でした、すみません）
あまり見ないデザインかもですが、罫線が横に一本あるすぐ下に、文字だけのメニューがくる（サイドとボトムには線がない）というのを、デフォルトの状態にしてあり、
それが、途中から現れる方のメニューではその線を決して、ボーダーのない背景色のみ、その上に文字が載っている、という風にしたく、また、その文字色も変えたいと思っています。

css側で、.clone-navや.is-showのスタイルを変更しているのですが、元々のスタイルに追加をする形（例えば背景色を加える）はできるのですが、元のスタイルを削除したり変更する（罫線をnoneにする、文字色を変える、background-blend-modeをナシにする）ができなくて困っております。
コードを追記しますので、御指南いただけましたら幸いです。

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

エラーメッセージ

###該当のソースコード

HTML
1<HTML>
2<nav>
3    <ul class="menu">
4      <li><a href="#">ABOUT</a></li>
5      <li><a href="#">PHOTOS</a></li>
6      <li><a href="#">WORK</a></li>
7      <li><a href="#">JOURNAL</a></li>
8      <li><a href="#">CONTACT</a></li>
9    </ul>
10  </nav>
11
12
13<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
14<script>
15  $(function() {
16  var $win = $(window),
17      $cloneNav = $('nav').clone().addClass('clone-nav').appendTo('body'),
18      showClass = 'is-show';
19
20  $win.on('load scroll', function() {
21    var value = $(this).scrollTop();
22    if ( value > 700 ) {
23      $cloneNav.addClass(showClass);
24    } else {
25      $cloneNav.removeClass(showClass);
26    }
27  });
28});
29
30
31```css
32コード

nav {
margin: 0 auto;
border-top: 2px solid #F2E633;
background-blend-mode: multiply;
z-index: 1;
}

.menu {
text-align: center;
width: 100%;
list-style: none;
padding-left: 0;
}

.menu li {
text-align: center;
margin: 0;
padding: 9px 15% 11px 0;
display: inline-block;
font-family: sans-serif;
color:#214B4E;
letter-spacing: 0.11em;
font-size:1.1vw;
font-weight: bold;
}

.clone-nav {
position: fixed;
top: 0;
left: 0;
z-index: 2;
width: 100%;
transition: .3s;
transform: translateY(-100%);
}

.is-show {
transform: translateY(0);
background: #F2E633;
}







###試したこと
.clone-navや.is-showにスタイルを追記してみましたが、背景色以外は変更できない状況です。
###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

kei344

2018/01/15 04:30

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

x_x

2018/01/15 04:35

4のメニューには罫線などないようですが、どの部分を指していますか？

usiko

2018/01/15 06:02

コメントありがとうございます！わかりづらくてすみません、質問を編集しました。

kei344

2018/01/15 07:16

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況を質問文に追記ください。

usiko

2018/01/15 07:29

質問に追記していました、「ブレンドモード（乗算）をなくしたい」、という部分について、解決したか確認をしたかったのですが、なぜか原因不明ですが、もともとのメニューの方から、乗算が効かなくなってしまいました。、、いろいろ調べているのですが、原因がわかりません。なので、教えていただいたコードで解決できるかの明確な結果をお伝えできず、、すみません。（でもきっと、教えていただいたコードで大丈夫なのだと思いますが！）しばらく触ってみてもブレンドモードの方がどうにもできなければ、ひとまずこちらは解決済みということで変更しますね！（ブレンドが効かない、はまた別の主題になってしまうかと思いますので、、）

行動規範の内容に同意します

回答3件

ベストアンサー

CSS
1.clone-nav {
2  border-top-width: 0px;
3  background-blend-mode: normal;
4}
5
6.clone-nav .menu li {
7  color: #000;
8}

投稿2018/01/15 06:38

x_x

総合スコア13749

usiko

2018/01/15 07:24

回答をありがとうございます！すみません、、メニューにaタグをつけていたのですが、そのスタイル部分をこちらでは省略して掲載してました。 aセレクタ指定したところ、文字色を変えることができました。（.clone-navに書いてもなぜか効かず、.is-showに追記で解決しました）それとブレンドモードの方は、これまた原因不明ですが、もともとのメニューの方からなぜか乗算が効かなくなってしまい、、いろいろ調べているのですが、原因がわかりません。なので、教えていただいたコードで解決できるかの明確な結果をお伝えできず、、すみません。（でもきっと、教えていただいたコードで大丈夫なのだと思います）ご回答本当にありがとうございました。m(_ _)m

行動規範の内容に同意します

そのサイトのスタイルにjQueryは関係ないですね。
CSSで指定してあります。

もともとあった罫線は、すみませんがどれのことかわかりません。

css
1/* 途中から現れる方のメニューの文字色 */
2.clone-nav {
3	color: hoge;
4}

投稿2018/01/15 05:12

ysnr

総合スコア35

usiko

2018/01/15 06:03

コメントありがとうございます！罫線は、自分で追加したものです。わかりづらくてすみません、質問を編集しました。

行動規範の内容に同意します

罫線って文字の下の線のことでしょうか？

CSS
1.clone-nav a {
2	color: green;
3	text-decoration: none;
4}/* ADD */
5```**動くサンプル：**[https://jsfiddle.net/w38xdaak/](https://jsfiddle.net/w38xdaak/)
6
7---
8
9**追記：**
10
11CSSを指定すれば良いだけのような。
12
13```CSS
14.clone-nav {
15    border-top: 0 none;
16}
17```**動くサンプル：**[https://jsfiddle.net/w38xdaak/1/](https://jsfiddle.net/w38xdaak/1/)

投稿2018/01/15 06:14

編集2018/01/15 06:26

kei344

総合スコア69407

usiko

2018/01/15 06:20

いえ、文字の上なんです。わかりづらいですね。今私がやってるデザインを無視して、やりたいことだけお伝えすると、最初に表示されてるメニューでは罫線（枠線、border）を入れているのですが、それを、途中から現れる方のメニューでは出ないようにしたいのです。 cssで.clone-navのborderをnoneに指定しても消えないので、jQueryのscriptの方をいじらないと変わらないのではないかと思ったのです。（ifのところを書き換える？追加する？）ただ私はjQueryの作法をまだよく理解できていないので、教えていただけたらと思いました。

usiko

2018/01/15 06:58

ご回答ありがとうございます！ noneじゃなくて、0でしたね…！（初歩的なことでした…(> <)）スタイルはなぜか.clone-navに書いても効かず、.is-showに追記したところ、罫線が消えました！ありがとうございました。m(_ _)m .

行動規範の内容に同意します

あなたの回答