css - Broken Zurb Foundation 4 responsive navbar menu icon -


i'm using latest zurb-foundation gem ruby project. navbar should responsive , show menu 3 horizontal bars when screen width small enough. i'm getting show words "menu", not horizontal bars. when menu expanded, styling further off.

expanded navbar: http://d.pr/i/rtoo

i able reproduce in jsfiddle using css , js used project (only jquery , zurb foundation stuff now). http://jsfiddle.net/uvl7e/

is markup wrong? don't have custom css navbar yet , not using other css libraries.

the scss file use foundation below (mostly defaults):

// // foundation variables //  // default font-size set 100% of browser style sheet (usually 16px) // compatibility brower-based text zoom or user-set defaults. $base-font-size: 100% !default;  // $base-line-height 24px while $base-font-size 16px // $base-line-height: 150%;  // default html , body font-size base em value.  // since typical default browser font-size 16px, makes calculation grid size. // if want base font-size different size , not have effect grid size too, // set value of $em-base $base-font-size ($em-base: $base-font-size;) $em-base: 16px !default;  // working in ems annoying. think in pixels using handy function, emcalc(#px) @function emcalc($pxwidth) {   @return $pxwidth / $em-base * 1em; }  // colors  $primary-color: #2ba6cb; $secondary-color: #e9e9e9; $alert-color: #c60f13; $success-color: #5da423;  // make sure border radius matches unless want different.  $global-radius: 3px;  // media queries  $small-screen: emcalc(768px); $medium-screen: emcalc(1280px); $large-screen: emcalc(1440px);  // // form variables //  // base lots of form spacing , positioning styles  // $form-spacing: emcalc(16px);  // labels  $form-label-pointer: pointer; $form-label-font-size: emcalc(14px); $form-label-font-weight: 500; $form-label-font-color: lighten(#000, 30%); $form-label-bottom-margin: emcalc(3px); $input-font-family: inherit; $input-font-color: rgba(0,0,0,0.75); $input-font-size: emcalc(14px); $input-bg-color: #fff; $input-focus-bg-color: darken(#fff, 2%); $input-border-color: darken(#fff, 20%); $input-focus-border-color: darken(#fff, 40%); $input-border-style: solid; $input-border-width: 1px; $input-disabled-bg: #ddd; $input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);  // button background $button-bg-color: #d8e1ed;  // button text styles.  // $button-font-family: inherit; // $button-font-color: #fff; // $button-font-color-alt: #333; $button-font-med: emcalc(16px); // $button-font-tny: emcalc(11px); // $button-font-sml: emcalc(13px); // $button-font-lrg: emcalc(20px); // $button-font-weight: bold; // $button-font-align: center;  // various hover effects.  $button-function-factor: 10%;  // button border styles.  $button-border-width: 1px; $button-border-style: solid; $button-border-color: darken($primary-color, $button-function-factor);  // radius used throughout core.  $button-radius: 6px;  // opacity disabled buttons.  $button-disabled-opacity: 0.6;  // // top bar variables //  // background color top bar  $topbar-bg: #222;  // height , margin  // $topbar-height: 45px; $topbar-margin-bottom: emcalc(30px);  // input height top bar  $topbar-input-height: 2.45em;  // title in top bar  $topbar-title-weight: bold; $topbar-title-font-size: emcalc(17px);  // link colors , styles top-level nav  $topbar-link-color: #fff; $topbar-link-weight: bold; $topbar-link-font-size: emcalc(13px); $topbar-link-hover-lightness: -50% !default; // darken 30%  // top bar dropdown elements  // $topbar-dropdown-bg: #333; // $topbar-dropdown-link-color: #fff; // $topbar-dropdown-toggle-size: 5px; // $topbar-dropdown-toggle-color: #fff; // $topbar-dropdown-toggle-alpha: 0.5; // $dropdown-label-color: #555;  // top menu icon styles  $topbar-menu-link-transform: uppercase; $topbar-menu-link-font-size: emcalc(13px); $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 , breakpoint styles  $topbar-transition-speed: 900ms; $topbar-breakpoint: $small-screen; $topbar-media-query: "only screen , (min-width: "#{$topbar-breakpoint}")";  @import 'foundation';

it's pretty easy, class name has changed.
from: 

<li class="toggle-topbar menu-item">   <a href="#">     <span>menu</span>   </a> </li>

to:

<li class="toggle-topbar menu-icon">   <a href="#">     <span>menu</span>   </a> </li>

see http://jsfiddle.net/volker_e/mxmjt/2/

i've added yellow border on top, result label doesn't overlap menu icon.


Comments

Post a Comment

Popular posts from this blog

python - How to create a legend for 3D bar in matplotlib? -

Image
given ax = plt.subplot() : ax.bar()[0] can passed plt.legend() . however, ax.bar3d() returns none . how create legend displayed bars? update: passing legend="stuff" ax.bar3d() , calling ax.legend() raises /usr/lib/python2.6/site-packages/matplotlib/axes.py:4368: userwarning: no labeled objects found. use label='...' kwarg on individual plots. warnings.warn("no labeled objects found. " you need use proxy artist legends not supported. this code: from mpl_toolkits.mplot3d import axes3d import matplotlib.pyplot plt import numpy np fig = plt.figure() ax = fig.add_subplot(111, projection='3d') x, y = np.random.rand(2, 100) * 4 hist, xedges, yedges = np.histogram2d(x, y, bins=4) elements = (len(xedges) - 1) * (len(yedges) - 1) xpos, ypos = np.meshgrid(xedges[:-1]+0.25, yedges[:-1]+0.25) xpos = xpos.flatten() ypos = ypos.flatten() zpos = np.zeros(elements) dx = 0.5 * np.ones_like(zpos) dy = dx.copy() dz = hist.flatten() ax...
Read more

java - Multi-Label Document Classification -

i have database in store data based upon following 3 fields: id, text, {labels}. note each text has been assigned more 1 label \ tag \ class. want build model (weka \ rapidminer \ mahout) able recommend \ classify bunch of labels \ tags \ classes given text. i have heard svm , naive bayes classifier, not sure whether support multi-label classification or not. guides me right direction more welcome! the basic multilabel classification method one-vs.-the-rest (ovr), called binary relevance (br). basic idea take off-the-shelf binary classifier, such naive bayes or svm, create k instances of solve k independent classification problems. in python-like pseudocode: for each class k: learner = svm(settings) # example labels = [class_of(x) == k x in samples] learner.learn(samples, labels) then @ prediction time, run each of binary classifiers on sample , collect labels predict positive. (both training , prediction can done in parallel, since problems assumed ...
Read more

php - Dynamic url re-writing using htaccess -

how can rewrite http://mydomain.com/test/master.php?catid=2&subcatid=8 http://mydomain.com/test/master.php/catname/subcat using .htaccess file. once rewritten, how can access these parameters in master.php? note: untested, let me know if doesn't work. rewriterule ^master.php/([a-za-z0-9_-]+)/([a-za-z0-9_-]+)$ /master.php?catid$1&subcatid=$2 [l]
Read more