I have been experimenting with React and SCSS to create a portfolio page. Although I am familiar with these tools, I recently encountered issues where certain style changes were not reflecting in the browser.
One specific problem involved styling the header element with a nested nav element. Despite adjusting the 'color' property for the h4 and li elements in my code, nothing seemed to change. There are no errors in my SCSS file, and I've tried different browsers and cleared caches to no avail. This roadblock is hindering my progress on this project.
//Here is the react code
export default function Header() {
return (
<>
<header>
<nav>
<h4 className="color">
<NavLink to='/'>Chidera</NavLink>
</h4>
<ul class="nav-links">
<li><NavLink to='/'> Home</NavLink></li>
<li><NavLink to='portfolio'> Portfolio</NavLink></li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
</header>
<Outlet/>
</>
)
}//SCSS code
header {
width: 100%;
height: 10vh;
display: grid;
place-items: center;
nav {
width: 80%;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
h4 {
font-size: 1.2rem;
color: gold;
font-style: italic;
background-color: #48ff00;
}
ul {
display: flex;
justify-content: space-between;
align-items: center;
width: 40%;
color: white;
padding: 0 1rem;
li {
color: white;
background-color: #1906cc;
}
}
.burger {
cursor: pointer;
display: none;
div {
width: 25px;
height: 3px;
background-color: rgb(221, 168, 90);
margin: 5px;
transition: all 0.3s ease;
}
}
}
}I also noticed that some media queries weren't working as expected, such as displaying the burger element when the device width is below 800px. This issue persists even though there are no errors in my SCSS code. It seems strange that changing the background color of the main element worked, but toggling the visibility of the burger did not, despite following the same nesting structure as in the React component.
@media screen and (max-width: 768px) {
main {
background-color: pink; //works
}
.burger {
display: block; //does nothing
}
}https://i.stack.imgur.com/gogVV.png
https://i.stack.imgur.com/aOzAw.png
The developer's tools indicate that the color property has been recognized in the second image, yet the changes do not appear on the actual page. Additionally, while the main background color successfully changed, the burger element remains invisible.
I hope this issue isn't related to SCSS, as I prefer not to revert back to plain CSS. Your assistance is greatly appreciated.
Thank you.