0
ナビゲーションバーの右側にリンクアイコン（id = "linkedin"）を追加します。私は、最も簡単な方法は新しいUL要素をnavに追加することだと考えましたが、それは画像を伸ばし、適用されたスタイルを取り除くことはできません。ヘッダーの画像からすべてのスタイルを削除しようとしています
私はすべてを試しました：初期とすべて：元に戻しますが、動作していないようです。
スニペットをフルページで開きたいとします。
.container {
position: relative;
margin: 0 auto;
width: 94%;
max-width: 1100px; /*Stops the nav from expanding too far*/
font-family: helvetica, sans-serif;
}
#nav {
position: absolute; /*Positions nav elements within black space*/
right: 0; /*Positions nav elements to right of screen*/
top: -15px; /*Positions nav elements to top of screen*/
height: 60px;
text-transform: uppercase;
font-weight: bold;
}
#header {
z-index: 2; /*Puts elements in front of other elemtns*/
position: fixed;
width: 100%; /*Makes nav stretch to screen*/
height: 60px; /*Specifies black background height*/
line-height: 60px; /*Vertically centers nav text*/
background: #222;
color: white; /*Text color*/
}
/*LOGO*/
#header img {
width: 180px;
height: 60px;
}
#header h1 {
top: 0px;
margin: 0px;
font-size: 1.75em;
}
#nav ul li {
float: left;
list-style: none;
}
#nav ul li a {
display: block;
color: white;
text-decoration: none;
padding: 0 10px;
}
/*Nav Dropdown*/
ul ul {
display: none;
position: absolute;
background: #222;
padding: 0;
white-space: nowrap; /*Prevents dropdown elements from wrapping*/
}
#nav ul ul li {
float: none;
}
> ul {
display: block;
}
#linkedin {
all: revert;
}
/**********RESPONSIVE**********/
/* unvisited link */
a:link {
color: blue;
}
/* mouse over link - Nav*/
#nav a:hover {
color: black;
\t background-color: gold;
}
/* mouse over link - regular*/
.back a:hover {
color: blue;
}
/* selected link */
a:active {
color: blue;
}
/*Inactive Link*/
.inactivelink {
cursor: default;
}<header id="header">
<div class="container">
<img src="#" alt="LOGO"/>
<nav id="nav">
<ul>
<li><a href="#">Portfolio</a>
</li>
<li>
<a href="#" class="inactivelink">Projects</a>
<ul>
<li><a href="#">BOOK REVIEW SITE</a></li>
<li><a href="#" style="";>DEMO CODE (under development)</a></li>
</ul>
</li>
<li>
<a href="#"class="inactivelink">Contact</a>
<ul>
<li><a href="#"><p style="color:#449ff4">LinkedIn</p></a></li>
<li><a href="">Email Me</a></li>
</ul>
</li>
<li>
<a href="#"><img id="linkedin" src="#" alt="LinkedIn icon" height="10" width="10"></a>
</li>
</ul>
</nav>
</div>
</header>
なぜ '＃ヘッダーimg'を変更しませんか？これは、あなたのロゴの1つの要素だけを対象としています。その要素に '.logo'のようなクラスを与え、そのCSSを' #header .logo'に変更します。または、単にそこに '#header img：not（#linkedin）'を使用してください –