I do not know how to set even spacing in my navbar:
there is a bigger gap between Articles and User Profil than User Profil and Admin.
There is a bigger gap between Admin and DB than User Profil and Admin.
My code is:
<li class="blog-nav-item">
<a class="blog-nav-item" href="#" class="blog-nav-item active" data-toggle="dropdown" role="button" aria-expanded="false">Articles<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>All</li>
<li>Create New</li>
</ul>
</li>
<a class="blog-nav-item" href="/accounts/profil/">User Profil</a></li>
<a class="blog-nav-item" href="/admin/">Admin</a></li>
<li class="blog-nav-item">
DB<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>DB: JSON</li>
<li>DB: XML</li>
</ul>
</li>
That is because, by default, there is different margin spacing for a simple list element and a drop down menu.
Override the settings by:
.blog-nav-item > a{
margin-right:10px;
}
.blog-nav-item > .dropdown-menu{
margin-right:10px;
}
Adding these classes to the css will help
Related
i have a problem with the Slideshow component by UIkit:
the site of the images are 0 and doesn't show images - with without uk-cover they show the first images, but the next images are Style="width:0;height:0"…
here the code
<div class="uk-position-relative uk-visible-toggle uk-slideshow" uk-slideshow="animation: fade">
<ul class="uk-slideshow-items" uk-lightbox="animation: fade">
<li class="uk-active uk-transition-active" style="z-index: -1;">
<img src="imag1.jpg" alt="">
</li>
<li>
<img src="image2.jpg" alt="">
</li>
</ul>
<div class="uk-position-relative uk-position-small uk-visible-toggle uk-light uk-slider uk-slider-container" uk-slider="">
<ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3#s uk-child-width-1-4#m">
<li uk-slideshow-item="0" class="uk-transition-active uk-active">
<img src="image1.jpg">
</li>
<li uk-slideshow-item="1" >
<img src="image2.jpg" alt="">
</li>
</ul>
</div>
</div>
Add the uk-position-cover class.
<a class="uk-position-cover" href="image2.jpg"><img src="image2.jpg" alt=""></a>
Slideshow component displays images as background images.
Therefore, slideshow container must have height property.
<div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1"
uk-slideshow="animation: slide; autoplay: true; autoplay-interval: 3000">
<ul class="uk-slideshow-items" uk-height-viewport="offset-top: true;">
uk-height-viewport="offset-top: true" --> set min-height as 100vh or less according to viewport and elements (without fixed or absolute positionned) on top of slideshow.
Here is the pen slideshow with data-srcset. You can add images url seperately for mobile and desktop.
I copied the foundation navbar syntax straight from their site https://foundation.zurb.com/sites/docs/top-bar.html and the dropdown menu feature doesnt seem to be working
Here's the code:
<div class="top-bar">
<div class="top-bar-left">
<ul class="dropdown menu" data-dropdown-menu>
<li class="menu-text">Site Title</li>
<li>
One
<ul class="menu vertical">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu">
<li><input type="search" placeholder="Search"></li>
<li><button type="button" class="button">Search</button></li>
</ul>
</div>
</div>
Here's what it looks like
Make sure to initialize foundation:
$(document).foundation();
I had the same issue -
This appears to be a known issue with Foundation 6.2 ~ 6.4 - at least for Rails apps using the foundation-rails gem.
The fix was to update the foundation_and_overrides.scss include order, move
#include foundation-dropdown-menu;
to the bottom as per here
This is my menu template - using the DDRMenu template style
<ul class="nav" id="side-menu">
[*>NODE]
</ul>
[>NODE]
<li class="[?SELECTED]active[/?]">
[?NODE]
[=TEXT]
[?ELSE]
</span>
[/?]
[?NODE]
<ul class="nav nav-****second****-level">
[*>NODE]
</ul>
[/?]
[/>]
How do I replace the ****second**** with the correct ordinal depending on how many levels down the menu goes
I'm using below logic to show multi level menu in one project.
<ul>
[*>NODE]
</ul>
[>NODE]
<li id="languages-box-holder">
[?ENABLED]
[=TEXT]
[?ELSE]
<span>[=TEXT]</span>
[/?]
[?NODE]
<ul class="languages-box popup-box cream-bg">
<li class="arrow-top"><span class="shadow cream-bg"></span></li>
<li class="focusor-top"></li>
[*>NODE]
</ul>
[/?]
</li>
[/>]
I would like to undo the changes that spree_fancy theme has made to the listing products. In the original Spree, I received products with 'columns three' when I browsed a taxon.
<div data-hook="taxon_products">
<ul id="products" class="inline product-listing" data-hook="">
<li id="product_3" class="columns three alpha" itemtype="http://schema.org/Product" itemscope="" data-hook="products_list_item">
<div class="product-image">
<a class="info" title="Ruby on Rails Baseball Jersey" itemprop="name" href="/products/ruby-on-rails-baseball-jersey">Ruby on Rails Baseball Jersey</a>
<span class="price selling" itemprop="price">$19.99</span>
</li>
However, spree_fancy theme inserted another nested unordered list and set the class to "columns four". I would like to undo these changes. My first guess was to browse through the overrides, but I couldn't find the caused file.
div data-hook="taxon_products">
<ul id="products" class="inline product-listing" data-hook="">
<li class="product-row">
<ul>
<li id="product_18" class="columns four alpha" itemtype="http://schema.org/Product" itemscope="" data-hook="products_list_item">
<div class="product-image">
<a class="info" title="Sunflower Clip Arts" itemprop="name" href="/products/sunflower-clip-arts">Sunflower Clip Arts</a>
<span class="price selling" itemprop="price">$4.00</span>
</li>
The override happens here:
https://github.com/spree/spree_fancy/blob/596d11e09343a1ce716b4c34bcd3802765728c46/app/overrides/spree/shared/_products/group_products_list_by_3_in_row.html.erb.deface
If you place an empty file at app/overrides/spree/shared/_products/group_products_list_by_3_in_row.html.erb.deface and restart your web server, this override should not longer be applied.
The example from Foundation 3 explains how to set up tabs using lists but how do you use the tabs with a div layout?
<dl class="tabs">
<dd class="active">Simple Tab 1</dd>
<dd>Simple Tab 2</dd>
<dd class="hide-for-small">Simple Tab 3</dd>
</dl>
<ul class="tabs-content">
<li class="active" id="simple1Tab">This is simple tab 1s content. Pretty neat, huh?</li>
<li id="simple2Tab">This is simple tab 2s content. Now you see it!</li>
<li id="simple3Tab">This is simple tab 3s content.</li>
</ul>
<div class="tabs-content">
<div class="active" id="simple1Tab">This is simple tab 1s content. Pretty neat, huh?</li>
<div id="simple2Tab">This is simple tab 2s content. Now you see it!</div>
<div id="simple3Tab">This is simple tab 3s content.</div>
</div>
Add the divs in the list item.
<ul class="tabs-content">
<li class="active" id="simple1Tab">
<div>This is simple tab 1s content. Pretty neat, huh?</div>
</li>
<li id="simple2Tab">
<div>This is simple tab 2s content.</div>
</li>
<li id="simple3Tab">
<div>This is simple tab 3s content.</div>
</li>
</ul>