After downloading a theme, I attempted to edit the background of the "navbar_fixed" in the
<header class="main_menu_area navbar_fixed">The HTML code snippet is as follows:
<header class="main_menu_area navbar_fixed">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"><img src="img/logo.png" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
<span></span>
<span></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item active"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="about-us.html">About Us</a></li>
<li class="nav-item dropdown submenu">
<a class="nav-link dropdown-toggle" href="service.html" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Services </a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li class="nav-item"><a class="nav-link" href="bigdata-hadoop.html">BigData Hadoop</a></li>
<li class="nav-item"><a class="nav-link" href="artifical-inteligance.html">Artificial Intelligence</a></li>
<li class="nav-item"><a class="nav-link" href="machine-learning.html">Machine Learning</a></li>
<li class="nav-item"><a class="nav-link" href="embedded-system.html">Embedded System</a></li>
<li class="nav-item"><a class="nav-link" href="internet-of-things.html">Internet of Things (IOT)</a></li>
<li class="nav-item"><a class="nav-link" href="soft-skills.html">Soft Skills</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="service.html">Tutorials</a></li>
<li class="nav-item"><a class="nav-link" href="portfolio.html">Gallery</a></li>
<li class="nav-item"><a class="nav-link" href="portfolio.html">Career</a></li>
<li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</header>
The .scss code snippet for the Main Menu Area is as follows:
/* Main Menu Area CSS */
.main_menu_area{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
z-index: 30;
padding: 0px 45px;
/* Additional CSS rules go here */
}
.main_menu_area .navbar{
/* CSS rules for navbar */
}
/* End Main Menu Area CSS */
/* Global Variables */
$rob: 'Roboto', sans-serif;
$open: 'Open Sans', sans-serif;
$baseColor: #97ccfe;
$dip: #0b1033;
$pfont: #7c8d93;
$gradient: linear-gradient(to right, #b1abdb 0%, #a6d6ff 100%);
$mrgn:-10px;
The expected outcome is to change the background of the fixed navbar upon scrolling down.