Hey there! I'm relatively new to using Foundation and I've been trying out different solutions I found online for various issues, but I'm still struggling with this one. The section highlighted in red just won't change to the same pink color as the rest of the design.
I managed to get the code working for all the drop downs, except for the small rectangle on the left that remains unaffected.
I came across a snippet of code from another user's question on StackOverflow and made some modifications...
.top-bar {
background: #FF859C !important;
}
.top-bar-section li a:not(.button) {
background: #FF859C !important;
}
.top-bar-section li a:not(.button):hover {
background: #BCD955 !important;
}
.top-bar-section ul li.active > a {
background: #FF859C !important;
}
But it doesn't seem to be working for that particular rectangle. That was the only part I edited, but I can't seem to make it apply to that element.
Good news! I can now share images!
![enter image description here][1]
Just as I was getting ready to show you the code, I managed to fix it myself. Thank you for prompting me to delve deeper into the issue!!
Instead of copying the code from Foundation's website, I found it within my default Foundation CSS file.
@media only screen and (min-width: 40.063em) {
.top-bar {
background: #016B98;
overflow: visible; }
.top-bar:before, .top-bar:after {
content: " ";
display: table; }
.top-bar:after {
clear: both; }
.top-bar .toggle-topbar {
display: none; }
.top-bar .title-area {
float: left; }
.top-bar .name h1 a {
width: auto; }
.top-bar input,
.top-bar .button,
.top-bar button {
font-size: 0.875rem;
position: relative;
top: 7px; }
.top-bar.expanded {
background: #333333; }
So, thank you for your assistance!
The initial background portion was what needed adjusting! For anyone else facing a similar challenge, this is the area where I struggled to change the color (insert image that I can't post due to minimum requirement!).
Once again, thank you for all your help!