Menu icon Foundation

Engineer

I am building a nice iphone app paired with a wonderful website built with foundation 5 and Ink for email messaging

My Posts

No Content

My Comments

andrea tagliazucchi commented on Yamenshahin's post over 5 years

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;

Posts Followed

No Content

Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Yamenshahin's post over 5 years

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;

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content