I'm facing a minor issue or glitch. Can anyone explain why the "Log Out" button in imgA is changing to imgB? This problem arises when I add new lines that are marked as "// New!!" in the provided HTML code. The issue seems to be affecting the "right" div section. Below, you'll find the complete header code along with CSS for the left and mid div elements.
CSS styles for left and mid div:
.header {
background: #FFF;
display: flex;
flex: 0 1 50px;
flex-flow: row;
line-height: 50px;
}
.header > #left {
background: transparent;
color: #535659;
cursor: pointer;
flex: 0 1 auto;
font-size: 30px;
padding: 0 10px 0 70px;
}
.header > #left:after,
.header > #left:before {
background: rgba(0, 173, 181, 0.6);
border-bottom-right-radius: 50%;
border-top-right-radius: 50%;
content: "";
left: 10px;
height: 30px;
position: absolute;
top: 10px;
width: 30px;
}
.header > #left:before {
background: rgba(250, 85, 85, 0.8);
border-bottom-left-radius: 50%;
border-bottom-right-radius: 0%;
border-top-left-radius: 50%;
border-top-right-radius: 0%;
left: 30px;
}
.header > #mid {
background-color: teal;
flex: 1 1 auto;
}
CSS styles for right div:
.header > #right {
background: transparent;
flex: 0 1 auto;
font-size: 20px;
padding: 0 10px;
text-decoration: none;
}
.header > #right > .logout {
background: #FA5555;
border: 2px solid #FA5555;
border-radius: 30px;
color: #FFF;
cursor: pointer;
padding: 3px 10px 3px 10px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
}
.header > #right > .option {
background: #FFF;
color: #000;
cursor: pointer;
}
HTML code (imgA without any "// New!!", imgB after adding ""// New!!". Note: "// New!!" is used for highlighting purposes only and doesn't exist in the actual HTML files.)
<div class="header">
<div id="left"><b>SPAP</b>r</div>
<div id="mid"></div>
<div id="right">
<a class="option" onclick=""><span>Register</span></a> // New!!
<a class="option" onclick=""><span>Settings</span></a> // New!!
<a class="logout" onclick=""><span>Log Out</span></a>
</div>
</div>
Thank you for your assistance.