Mam problem z menu, które będzie rozdzielane pionowymi znakami pomiędzy poszczególnymi elementami. W jaki sposób mogę to wdrożyć?
<nav id="header-navbar" class="navbar navbar-fixed-top" role="navigation">
<div class="container">
<div id="logo">
<div>
<a href="{$homepage_url}">
<img src="{image_path image='logo.png'}" alt="" />
</a>
</div>
</div>
<div id="navbar-buttons" class="btn-group pull-right">
<button id="nav-button-search" type="button" class="btn btn-navbar hidden-xs collapsed" data-toggle="collapse" data-target="#nav-search" data-parent="#header-navbar">
<span class="glyphicon glyphicon-search"></span>
</button>
<button id="nav-button-shopping-cart" class="btn btn-navbar collapsed empty" data-toggle="collapse" data-target="#nav-shopping-cart" data-parent="#header-navbar">
<span class="glyphicon glyphicon-shopping-cart"></span>
<small class="quantity"></small>
</button>
{if !$sf_user->isAuthenticated()}
<a href="{url_for internal='stUser/loginUser' secure=true}" id="nav-button-user" class="hidden-xs btn btn-navbar collapsed">
<span id="login-status-info" class="glyphicon glyphicon-user"></span>
<small class="login-status"> </small>
</a>
<button id="nav-button-user" class="visible-xs btn btn-navbar collapsed" data-toggle="collapse" data-target="#nav-user" data-parent="#header-navbar">
<span id="login-status-info" class="glyphicon glyphicon-user"></span>
<small class="login-status"> </small>
</button>
{else}
<button id="nav-button-user" class="btn btn-navbar collapsed" data-toggle="collapse" data-target="#nav-user" data-parent="#header-navbar">
<span id="login-status-info" class="glyphicon glyphicon-user"></span>
<small class="login-status"> </small>
</button>
{/if}
<button id="nav-button-settings" class="btn btn-navbar hidden-xs collapsed" data-toggle="collapse" data-target="#nav-settings" data-parent="#header-navbar">
<span class="glyphicon glyphicon-globe"></span>
</button>
</div>
<div class="navbar-header">
<button id="nav-button-menu" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-menu" data-parent="#header-navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Menu -->
<div id="nav-menu" class="navbar-collapse collapse">
{st_get_component module="stCategoryTree" component="horizontal"}
</div>
<div class="navbar-dropdown">
<!-- Koszyk -->
<div id="nav-shopping-cart" class="navbar-collapse collapse">
{st_get_component module="stBasket" component="show"}
</div>
<div id="nav-user" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<!-- Moje konto, Język, Waluta -->
{st_get_component module="stUser" component="loginStatus"}
</ul>
</div>
{strip}
<div id="nav-settings" class="hidden-xs navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
{st_get_component module="stLanguageFrontend" component="choose"}
</li>
<li class="dropdown">
{st_get_component module="stCurrencyFrontend" component="pickCurrency"}
</li>
</ul>
{slot name="nav-setting" hidden="true"}{/slot}
</div>
{/strip}
<div id="nav-search" class="navbar-collapse collapse hidden-xs">
{include_file id="_search"}
</div>
</div>
</div>
</nav>
{literal}
<script type="text/javascript">
//<![CDATA[
jQuery(function($) {
if ($('#nav-settings > ul > li:empty').length == 2)
{
$('#nav-button-settings').hide();
}
$(document).ready(function(){
if ($(window).width() < 768) {
var windowHeightMobile = $(window).height();
var menuHeightMobile = $('#header-navbar').height();
$('#header-navbar .navbar-collapse').css('max-height', windowHeightMobile - menuHeightMobile);
};
});
});
//]]>
</script>
{/literal}
Strona: promoto.nutron.pl
