My latest project involves creating a replica of the Google homepage using HTML and CSS. It's my first time delving into coding, and I've hit a roadblock while trying to set the background color for the lower navigation bar at the bottom of the screen. The upper navigation bar with the country name displayed was successfully styled, but the lower one - housing links like Advertising and Business - remains stubbornly white.
Here's the snippet from my HTML pertaining to the lower navigation bars
<footer class="bottom_nav">
<div class="country_nav">
<ul>
<li>Canada</li>
</ul>
</div>
<div class="bottom_nav_l">
<ul>
<li><a href="#advertising">Advertising</a></li>
<li><a href="#business">Business</a></li>
<li><a href="#howsearchworks">How Search Works</a></li>
<ul>
</div>
<div class="bottom_nav_r">
<ul>
<li><a href="#settings">Settings</a></li>
<li><a href="#terms">Terms</a></li>
<li><a href="#privacy">Privacy</a></li>
</ul>
</div>
</footer>
This is the section from my CSS file
.country_nav {
background-color: #f2f2f2;
color: rgba(0,0,0,0.54);
border-top: 1px solid #e4e4e4;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 25px;
}
.country_nav li {
font-size: 14px;
font-family: arial, sans-serif;
}
.bottom_nav_l li {
float: left;
margin: 10px;
font-size: 14px;
}
... (CSS styles for bottom_nav_r and other elements goes here)
I'm aiming for a consistent grey color scheme across all navigation bars. To get an idea of what I mean, feel free to check out a preview of the current state of my project here.
If you have any tips or guidance on how to achieve this, your help would be greatly appreciated!