Menu icon Foundation

My Posts



My Comments

Hot Belgo commented on Hot Belgo's post over 3 years

Editing the html is not straightforward in as much as you have to keep doing it each time you want to change anything. As the drop down is caused by a hover, you can normally emulate that, but you need to know to which part of the DOM the hover event is connected

Hot Belgo commented on Daniel Scarpim's post over 3 years

Drop the { "events": ... } wrapper - just use the array

Hot Belgo commented on Daniel Wild's post over 5 years

I'm also looking for a solution. $(document).foundation() works for an accordion, but the reason I am using ajx is to reload page content without touching the topbar where I have an audio player that I want to persist across pages. $(document).foundation() stops the music so this is a problem for me.

Edit: writing this made me think of moving the audio element elsewhere (it is hidden anyway), and then it was not affected by .foundation()

Hot Belgo commented on Hot Belgo's post over 5 years

Solved it - the word Menu had been wrapped in a (I copied it in from a Foundation 4 set up) and removing that solved the problem

Hot Belgo commented on Hot Belgo's post over 5 years

Sorry, should have been clearer. The box shadow is the problem, and digging into details I see that it is part of the Menu system (the hamburger i think). I have only played with _settings.scsss so I think this is a bug in Foundation. What I need to know is how to undo this, assuming I am the cause

// TOP BAR
//

$include-html-top-bar-classes: $include-html-classes;

// Background color for the top bar
$topbar-bg-color: $primary-color;
$topbar-bg: $topbar-bg-color;

// Height and margin
// $topbar-height: 45px;
// $topbar-margin-bottom: 0;

// Control Input height for top bar

// Controlling the styles for the title in the top bar
// $topbar-title-weight: normal;
// $topbar-title-font-size: rem-calc(17);

// Style the top bar dropdown elements
$topbar-dropdown-bg: $topbar-bg-color;
// $topbar-dropdown-link-color: #fff;
$topbar-dropdown-link-bg: $topbar-bg-color;
// $topbar-dropdown-toggle-size: 5px;
// $topbar-dropdown-toggle-color: #fff;
$topbar-dropdown-toggle-alpha: 0.4;

// Set the link colors and styles for top-level nav
// $topbar-link-color: #fff;
// $topbar-link-color-hover: #fff;
// $topbar-link-color-active: #fff;
// $topbar-link-weight: normal;
// $topbar-link-font-size: rem-calc(13);
$topbar-link-hover-lightness: -10%; // Darken by 10%
$topbar-link-bg-hover: lighten($primary-color, 15%);
$topbar-link-bg-active: $topbar-link-bg-hover;
$topbar-link-bg-active-hover: darken($primary-color, 5%);
// $topbar-link-font-family: $body-font-family;

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

$topbar-dropdown-label-color: $topbar-bg-color;
// $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: #fff;
// $topbar-menu-icon-color: #fff;
// $topbar-menu-link-color-toggled: #888;
// $topbar-menu-icon-color-toggled: #888;

// Transitions and breakpoint styles
// $topbar-transition-speed: 300ms;
// Using rem-calc for the below breakpoint causes issues with top bar
// $topbar-breakpoint: #{upper-bound($medium-range)}; // Change to 9999px for always mobile layout
// $topbar-media-query: "only screen and (min-width: #{upper-bound($medium-range)})";

// Divider Styles
$topbar-divider-border-bottom: solid 1px lighten($topbar-bg-color, 10%);
$topbar-divider-border-top: solid 1px lighten($topbar-bg-color, 10%);

Posts Followed






Following

    No Content

Followers

My Posts

My Comments

You commented on Hot Belgo's post over 3 years

Editing the html is not straightforward in as much as you have to keep doing it each time you want to change anything. As the drop down is caused by a hover, you can normally emulate that, but you need to know to which part of the DOM the hover event is connected

You commented on Daniel Scarpim's post over 3 years

Drop the { "events": ... } wrapper - just use the array

You commented on Daniel Wild's post over 5 years

I'm also looking for a solution. $(document).foundation() works for an accordion, but the reason I am using ajx is to reload page content without touching the topbar where I have an audio player that I want to persist across pages. $(document).foundation() stops the music so this is a problem for me.

Edit: writing this made me think of moving the audio element elsewhere (it is hidden anyway), and then it was not affected by .foundation()

You commented on Hot Belgo's post over 5 years

Solved it - the word Menu had been wrapped in a (I copied it in from a Foundation 4 set up) and removing that solved the problem

You commented on Hot Belgo's post over 5 years

Sorry, should have been clearer. The box shadow is the problem, and digging into details I see that it is part of the Menu system (the hamburger i think). I have only played with _settings.scsss so I think this is a bug in Foundation. What I need to know is how to undo this, assuming I am the cause

// TOP BAR
//

$include-html-top-bar-classes: $include-html-classes;

// Background color for the top bar
$topbar-bg-color: $primary-color;
$topbar-bg: $topbar-bg-color;

// Height and margin
// $topbar-height: 45px;
// $topbar-margin-bottom: 0;

// Control Input height for top bar

// Controlling the styles for the title in the top bar
// $topbar-title-weight: normal;
// $topbar-title-font-size: rem-calc(17);

// Style the top bar dropdown elements
$topbar-dropdown-bg: $topbar-bg-color;
// $topbar-dropdown-link-color: #fff;
$topbar-dropdown-link-bg: $topbar-bg-color;
// $topbar-dropdown-toggle-size: 5px;
// $topbar-dropdown-toggle-color: #fff;
$topbar-dropdown-toggle-alpha: 0.4;

// Set the link colors and styles for top-level nav
// $topbar-link-color: #fff;
// $topbar-link-color-hover: #fff;
// $topbar-link-color-active: #fff;
// $topbar-link-weight: normal;
// $topbar-link-font-size: rem-calc(13);
$topbar-link-hover-lightness: -10%; // Darken by 10%
$topbar-link-bg-hover: lighten($primary-color, 15%);
$topbar-link-bg-active: $topbar-link-bg-hover;
$topbar-link-bg-active-hover: darken($primary-color, 5%);
// $topbar-link-font-family: $body-font-family;

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

$topbar-dropdown-label-color: $topbar-bg-color;
// $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: #fff;
// $topbar-menu-icon-color: #fff;
// $topbar-menu-link-color-toggled: #888;
// $topbar-menu-icon-color-toggled: #888;

// Transitions and breakpoint styles
// $topbar-transition-speed: 300ms;
// Using rem-calc for the below breakpoint causes issues with top bar
// $topbar-breakpoint: #{upper-bound($medium-range)}; // Change to 9999px for always mobile layout
// $topbar-media-query: "only screen and (min-width: #{upper-bound($medium-range)})";

// Divider Styles
$topbar-divider-border-bottom: solid 1px lighten($topbar-bg-color, 10%);
$topbar-divider-border-top: solid 1px lighten($topbar-bg-color, 10%);

Posts Followed

Following

  • No Content

Followers

  • No Content