Menu icon Foundation
Help with small change for "white" drop down menu

Because I set the background of drop down menu (of the top nav bar) to "white" the small arrow of the menu become invisible. Any other background color will make the arrow visible.
How i can make it visible again and keep the background white

Also i need to add some space between the drop down elements.

Look at the image

Space

<!-------------------------
    	ID topNAV
------------------------->
<div id="topNAV">
	<div class="row">
		<div class="large-12 columns"> 
			
			<!-- Navigation -->
			<nav class="top-bar" data-topbar>
				<ul class="title-area">
					<li class="name">
						<h1><a href="#"><img src="images/Logo.png" alt=""/></a></h1>
					</li>
					<li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
				</ul>
				<section class="top-bar-section"> 
					<!-- Left Nav Section -->
					<ul class="left">
						<li class="has-form">
							<input type="text" placeholder="Where are you going?">
						</li>
						<li class="has-dropdown active"> <a href="#" class="">BROWSE</a>
							<ul class="dropdown">
								<li><a href="#">First link in dropdown</a></li>
							</ul>
						</li>
						<li><a href="#">Sign Up</a></li>
						<li><a href="#">Sign In</a></li>
						<li><a href="#">Help</a></li>
						<li class="has-dropdown lang"> <a href="#">English (US)</a>
							<ul class="dropdown">
								<li><a href="#">Arabic (EG)</a></li>
							</ul>
						</li>
						<li class="has-dropdown lang"> <a href="#" class="">$ US</a>
							<ul class="dropdown">
								<li><a href="#">$ US</a></li>
							</ul>
						</li>
						<li class="endOf"><a href="#" class="">LIST YOUR SPACE</a></li>
					</ul>
				</section>
			</nav>
			
			<!-- End Navigation --> 
			
		</div>
	</div>
</div>
<!------------------------
		ID topNAV
------------------------>
            

         

/*-------------CSS-------------*/
/*-------------Nav-------------*/
body #topNAV {
    background: #fbfafa;
	margin: 0 auto;
	padding-top: 20px;
	padding-bottom: 20px;
	max-width:1600px;
}
body #topNAV .row .large-12.columns .top-bar {
	background: #fbfafa;
}
.top-bar-section li:not(.has-form) a:not(.button) {
	background: none repeat scroll 0 0 #fbfafa;
}
.top-bar-section ul li > a {
	color: #5b7495;
}
.top-bar-section .has-form {
	background: none repeat scroll 0 0 #fbfafa;
}
.top-bar-section li:not(.has-form) a:not(.button):hover {
	background: none repeat scroll 0 0 #fbfafa;
	color: #5b7495;
	border: rgba(0,0,0,1.00) solid 0px;
	border-radius: 10px;
}
.top-bar-section li.active:not(.has-form) a:not(.button):hover {
	background: none repeat scroll 0 0 #5b7495;
	color: #FFFFFF;
	border: rgba(0,0,0,1.00) solid 0px;
	border-radius: 10px;
}
.top-bar-section li.active:not(.has-form) a:not(.button) {
	background: none repeat scroll 0 0 #5b7495;
	color: #FFFFFF;
	border: rgba(0,0,0,1.00) solid 0px;
	border-radius: 10px;
}
.top-bar-section li.lang:not(.has-form) a:not(.button) {
	background: none repeat scroll 0 0 #fff;
	color: #757575;
	border: #e1e1e1 solid 1px;
	border-radius: 10px;
}
.top-bar-section li.lang:not(.has-form) a:not(.button):hover {
	background: none repeat scroll 0 0 #fff;
	color: #757575;
	border: #e1e1e1 solid 1px;
	border-radius: 10px;
	;
}
.top-bar-section li.endOf:not(.has-form) a:not(.button) {
	background: none repeat scroll 0 0 #ae6bb0;
	color: #FFFFFF;
	border: rgba(0,0,0,1.00) solid 0px;
	border-radius: 10px;
}
.top-bar-section li.endOf:not(.has-form) a:not(.button):hover {
	background: none repeat scroll 0 0 #ae6bb0;
	color: #FFFFFF;
	border: rgba(0,0,0,1.00) solid 0px;
	border-radius: 10px;
}
.top-bar-section ul {
	background: none;
}
.top-bar .toggle-topbar.menu-icon a {
	color: black;
	height: 34px;
	line-height: 33px;
	padding: 0 25px 0 0;
	position: relative;
}
.top-bar .toggle-topbar.menu-icon a::after {
	content: "";
	position: absolute;
	right: 0;
	display: block;
	width: 16px;
	top: 0;
	height: 0;
	-webkit-box-shadow: 0 10px 0 1px black, 0 16px 0 1px black, 0 22px 0 1px black;
	box-shadow: 0 10px 0 1px black, 0 16px 0 1px black, 0 22px 0 1px black;
}

            

         

topbardropdownmenu

Because I set the background of drop down menu (of the top nav bar) to "white" the small arrow of the menu become invisible. Any other background color will make the arrow visible.
How i can make it visible again and keep the background white

Also i need to add some space between the drop down elements.

Look at the image

Space

<!-------------------------
    	ID topNAV
------------------------->
<div id="topNAV">
	<div class="row">
		<div class="large-12 columns"> 
			
			<!-- Navigation -->
			<nav class="top-bar" data-topbar>
				<ul class="title-area">
					<li class="name">
						<h1><a href="#"><img src="images/Logo.png" alt=""/></a></h1>
					</li>
					<li class="toggle-topbar menu-icon"><a href="#">Menu</a></li>
				</ul>
				<section class="top-bar-section"> 
					<!-- Left Nav Section -->
					<ul class="left">
						<li class="has-form">
							<input type="text" placeholder="Where are you going?">
						</li>
						<li class="has-dropdown active"> <a href="#" class="">BROWSE</a>
							<ul class="dropdown">
								<li><a href="#">First link in dropdown</a></li>
							</ul>
						</li>
						<li><a href="#">Sign Up</a></li>
						<li><a href="#">Sign In</a></li>
						<li><a href="#">Help</a></li>
						<li class="has-dropdown lang"> <a href="#">English (US)</a>
							<ul class="dropdown">
								<li><a href="#">Arabic (EG)</a></li>
							</ul>
						</li>
						<li class="has-dropdown lang"> <a href="#" class="">$ US</a>
							<ul class="dropdown">
								<li><a href="#">$ US</a></li>
							</ul>
						</li>
						<li class="endOf"><a href="#" class="">LIST YOUR SPACE</a></li>
					</ul>
				</section>
			</nav>
			
			<!-- End Navigation --> 
			
		</div>
	</div>
</div>
<!------------------------
		ID topNAV
------------------------>
            

         

/*-------------CSS-------------*/
/*-------------Nav-------------*/
body #topNAV {
    background: #fbfafa;
	margin: 0 auto;
	padding-top: 20px;
	padding-bottom: 20px;
	max-width:1600px;
}
body #topNAV .row .large-12.columns .top-bar {
	background: #fbfafa;
}
.top-bar-section li:not(.has-form) a:not(.button) {
	background: none repeat scroll 0 0 #fbfafa;
}
.top-bar-section ul li > a {
	color: #5b7495;
}
.top-bar-section .has-form {
	background: none repeat scroll 0 0 #fbfafa;
}
.top-bar-section li:not(.has-form) a:not(.button):hover {
	background: none repeat scroll 0 0 #fbfafa;
	color: #5b7495;
	border: rgba(0,0,0,1.00) solid 0px;
	border-radius: 10px;
}
.top-bar-section li.active:not(.has-form) a:not(.button):hover {
	background: none repeat scroll 0 0 #5b7495;
	color: #FFFFFF;
	border: rgba(0,0,0,1.00) solid 0px;
	border-radius: 10px;
}
.top-bar-section li.active:not(.has-form) a:not(.button) {
	background: none repeat scroll 0 0 #5b7495;
	color: #FFFFFF;
	border: rgba(0,0,0,1.00) solid 0px;
	border-radius: 10px;
}
.top-bar-section li.lang:not(.has-form) a:not(.button) {
	background: none repeat scroll 0 0 #fff;
	color: #757575;
	border: #e1e1e1 solid 1px;
	border-radius: 10px;
}
.top-bar-section li.lang:not(.has-form) a:not(.button):hover {
	background: none repeat scroll 0 0 #fff;
	color: #757575;
	border: #e1e1e1 solid 1px;
	border-radius: 10px;
	;
}
.top-bar-section li.endOf:not(.has-form) a:not(.button) {
	background: none repeat scroll 0 0 #ae6bb0;
	color: #FFFFFF;
	border: rgba(0,0,0,1.00) solid 0px;
	border-radius: 10px;
}
.top-bar-section li.endOf:not(.has-form) a:not(.button):hover {
	background: none repeat scroll 0 0 #ae6bb0;
	color: #FFFFFF;
	border: rgba(0,0,0,1.00) solid 0px;
	border-radius: 10px;
}
.top-bar-section ul {
	background: none;
}
.top-bar .toggle-topbar.menu-icon a {
	color: black;
	height: 34px;
	line-height: 33px;
	padding: 0 25px 0 0;
	position: relative;
}
.top-bar .toggle-topbar.menu-icon a::after {
	content: "";
	position: absolute;
	right: 0;
	display: block;
	width: 16px;
	top: 0;
	height: 0;
	-webkit-box-shadow: 0 10px 0 1px black, 0 16px 0 1px black, 0 22px 0 1px black;
	box-shadow: 0 10px 0 1px black, 0 16px 0 1px black, 0 22px 0 1px black;
}

            

         
Rafi Benkual almost 6 years ago

You can change this in the _settings.scss file, about line 1032
uncomment and change value
$topbar-dropdown-toggle-color: red;

http://zurb.us/1f1bkWh

In css it is

.top-bar-section .has-dropdown > a:after

andrea tagliazucchi over 5 years ago

Hi Rafi,
is there a way to change the red color (in your example) to something else on hover?

I have a white bar with blue links and blue drop down icons. When i hover: the link is white the bg is blue but the icon stays blue.

Tried everything with following variables but nothing seems to work:

$topbar-dropdown-bg: rgba(248, 248, 248, 0.95);
$topbar-dropdown-link-color: #3c64c8;
$topbar-dropdown-link-bg: #3c64c8;
// $topbar-dropdown-link-weight: normal;
$topbar-dropdown-toggle-size: 5px;
$topbar-dropdown-toggle-color: #3c64c8;
$topbar-dropdown-toggle-alpha: 1.0;

// Set the link colors and styles for top-level nav
$topbar-link-color: #3c64c8;
$topbar-link-color-hover: #fff;
// $topbar-link-color-active: #fff;
$topbar-link-color-active-hover: #ffffff;
// $topbar-link-weight: normal;
// $topbar-link-font-size: rem-calc(13);
// $topbar-link-hover-lightness: -10%; // Darken btoggly 10%
$topbar-link-bg-hover: rgba(60, 100, 200, 0.8);
// $topbar-link-bg-active: $primary-color;
//$topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%);
// $topbar-link-font-family: $body-font-family;

// $topbar-button-font-size: 0.75rem;

// $topbar-dropdown-label-color: #777;
// $topbar-dropdown-label-text-transform: uppercase;
// $topbar-dropdown-label-font-weight: bold;
// $topbar-dropdown-label-font-size: rem-calc(10);
// $topbar-dropdown-label-bg: #333;

// Top menu icon styles
// $topbar-menu-link-transform: uppercase;
// $topbar-menu-link-font-size: rem-calc(13);
// $topbar-menu-link-weight: bold;
$topbar-menu-link-color: #3c64c8;
$topbar-menu-icon-color: #3c64c8;
$topbar-menu-link-color-toggled: #3c64c8;
$topbar-menu-icon-color-toggled: #3c64c8;

Alexander Assimidis over 5 years ago

.top-bar-section .has-dropdown:hover > a:after {
     // YOUR COLOR
}

Or you simply use an Icon like Font-Awesome an overwrite
.top-bar-section .has-dropdown > a:after with ur icon an change it then with "color:black"

andrea tagliazucchi over 5 years ago

Thanks Alexander
your solution works but my question was poorly formulated!
I meant to ask for the drop down arrow. I am able to change the arrow color for large screen break point but not for small screen. That's why i was asking for a scss solution.
If you try this code

.top-bar-section .has-dropdown:hover > a:after {
    border-color: rgb(255, 255, 255) transparent transparent;
    
}  

you will see that the arrow turns white in large screen but stay gray in small screen.

thanks in advance

andrea tagliazucchi over 5 years ago

i found a solution around. my final code is:

.top-bar-section .has-dropdown:hover > a:after {
    border-color: rgb(255, 255, 255) transparent transparent;

}

@media only screen and (max-width: 942px) {

    .top-bar-section .has-dropdown:hover > a:after {
        border-color: transparent transparent  transparent rgb(255, 255, 255) ;
    }


} 

I have not fully test it so careful

Alexander Assimidis over 5 years ago

@andrea tagliazucchi

"you will see that the arrow turns white in large screen but stay gray in small screen."

You should style from Mobile to Desktop so your custom.scss should inherit this
and it should work if u want to use another color on Large you would do it with min-width

.top-bar-section .has-dropdown:hover > a:after {
    border-color: rgb(255, 255, 255) transparent transparent;
}
@media #{$large-up} {
.top-bar-section .has-dropdown:hover > a:after {
    border-color: // ANOTHER COLOR
}
 }
@import
  "foundation/components/grid",
  "foundation/components/accordion",
  "foundation/components/alert-boxes",
  "foundation/components/block-grid",
  "foundation/components/breadcrumbs",
  "foundation/components/button-groups",
  "foundation/components/buttons",
  "foundation/components/clearing",
  "foundation/components/dropdown",
  "foundation/components/dropdown-buttons",
  "foundation/components/flex-video",
  "foundation/components/forms",
  "foundation/components/inline-lists",
  "foundation/components/joyride",
  "foundation/components/keystrokes",
  "foundation/components/labels",
  "foundation/components/magellan",
  "foundation/components/orbit",
  "foundation/components/pagination",
  "foundation/components/panels",
  "foundation/components/pricing-tables",
  "foundation/components/progress-bars",
  "foundation/components/range-slider",
  "foundation/components/reveal",
  "foundation/components/side-nav",
  "foundation/components/split-buttons",
  "foundation/components/sub-nav",
  "foundation/components/switch",
  "foundation/components/tables",
  "foundation/components/tabs",
  "foundation/components/thumbs",
  "foundation/components/tooltips",
  "foundation/components/top-bar",
  "foundation/components/type",
  "foundation/components/offcanvas",
  "foundation/components/visibility",
  "custom",
  "large";

Because u will overwrite your styles from small to large.

Danny Pernik over 5 years ago

Okay, so I'm trying to do exactly the same thing as andrea - change the arrow's color on hover - except I am using the dropdown without the top bar. So .has-dropdown is not used.

I tried this to no avail (.light is a defined color class that gets darker on hover):

.dropdown.button.tiny.light:hover, button.dropdown.tiny.light:hover > a:after {
border-color: white transparent transparent transparent;
}

What else should I try? Really appreciate the help!