I'm using Fortune and the 'Login and Register' are at the bottom of the page. Does anyone know how to put it at the top of the page with the other headings.
Please use below code:
{{#if customer}}
<li class="header-navigation-item navigation-item-primary">
<a class="navigation-link-primary" href="{{urls.account.index}}">{{lang 'account_general.your_account'}}</a>
</li>
<li class="header-navigation-item navigation-item-primary">
<a class="navigation-link-primary" href="{{urls.auth.logout}}">{{lang 'account_general.log_out'}}</a>
</li>
{{else}}
<li class="header-navigation-item navigation-item-primary">
<a class="navigation-link-primary" href="{{urls.auth.login}}">{{lang 'account_general.log_in'}}</a>
</li>
{{#if settings.account_creation_enabled}}
<li class="header-navigation-item navigation-item-primary">
<a class="navigation-link-primary" href="{{urls.auth.create_account}}">{{lang 'account_general.sign_up'}}</a>
</li>
{{/if}}
{{/if}}
Related
I am using materialize css 1.0.0-rc.2. I am having issues in dropdown. Same dropdown is linked to navbar and sidenav but only one of them working and next thing is it should come below the navbar or link when hovered or clicked.What should I do please help?
I think it won't work for same dropdown structure in both Navbar and Sidebar. Making two dropdown structure can solve your problem.
<nav>
<div class="nav-wrapper">
Logo
<a href="#" data-target="mobile-demo" class="sidenav-trigger">
<i class="material-icons">menu</i>
</a>
<ul class="right hide-on-med-and-down">
<li>
Sass
</li>
<li>
Components
</li>
<li>
<a class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown
<i class="material-icons right">arrow_drop_down</i>
</a>
</li>
</ul>
</div>
</nav>
<ul id="dropdown1" class="dropdown-content">
<li>
one
</li>
<li>
two
</li>
<li>
three
</li>
</ul>
<ul id="dropdown2" class="dropdown-content">
<li>
one
</li>
<li>
two
</li>
<li>
three
</li>
</ul>
<ul class="sidenav" id="mobile-demo">
<li>
Sass
</li>
<li>
Components
</li>
<li>
<a class="dropdown-trigger2" href="#" data-target="dropdown2">Dropdown
<i class="material-icons right">arrow_drop_down</i>
</a>
</li>
</ul>
<script>
$(document).ready(function () {
$(".dropdown-trigger").dropdown({
hover: true
});
$(".dropdown-trigger2").dropdown();
$('.sidenav').sidenav();
});
</script>
I seem to be able to find the question posted on here and google about the same issue in bootstrap, but i'm not able to find answers for the same issue in Materialize
I'm new to bootstrap and everything i've tried hasn't solved it. I'd be grateful if anyone knows why it's doing this and how to override it.
Thank you!
the live page is here
i've set drop downs to fire on 'about' and 'profile'
the script:
<script>
var $ = jQuery;
(function($){
$(function(){
$('.dropdown-button').dropdown({
inDuration: 300,
outDuration: 225,
constrain_width: false,
hover: false,
alignment: 'right',
gutter: 0,
belowOrigin: true,
});
$('.button-collapse').sideNav({menuWidth: 240, activationWidth: 70});
}); // end of document ready
})(jQuery); // end of jQuery name space
</script>
nav bar:
<nav>
<div class="nav-wrapper">
<a class="brand-logo hide-on-med-and-down left" href="http://focallocal.org">Focallocal</a>
<ul class="hide-on-small-and-down left">
<li class="text-icon">
<a class="dropdown-button" href="http://about.focallocal.org" data-activates="nav-about" title="About Us">
<i class="mdi-action-info"></i>
<span>About Us</span>
</a>
</li>
<li class="text-icon">
<a href="http://news.focallocal.org/" title="Happy News">
<i class="mdi-device-brightness-high"></i>
<span>Happy News</span>
</a>
</li>
<li class="text-icon">
<a href="http://action.focallocal.org/" title="Action">
<i class="mdi-action-get-app"></i>
<span>Action Centre</span>
</a>
</li>
<li class="text-icon">
<a href="http://activities.focallocal.org" title="Activities">
<i class="mdi-maps-directions-walk"></i>
<span>Activities</span>
</a>
</li>
<li class="text-icon">
<a href="http://gather.focallocal.org/" title="Gather">
<i class="mdi-image-flare"></i>
<span> Gather </span>
</a>
</li>
<li class="text-icon">
<a href="http://shop.focallocal.org/" title="Shop">
<i class="mdi-action-shop-two"></i>
<span> Shop</span>
</a>
</li>
<li class="text-icon">
<a class="dropdown-button" href="#" data-activates="nav-projects" title="Projects">
<i class="mdi-action-info"></i>
<span>Projects</span>
</a>
</li>
</ul>
<ul class="right">
<li class="text-icon">
<a href="http://discuss.focallocal.org" target="_blank" title="Chat">
<i class="mdi-communication-dialpad"></i>
<span>Discuss</span>
</a>
</li>
<li class="text-icon">
<a href="https://trello.com/invite/b/SwMdGGcX/dbf6c3cebca7e2214ac0df3a57b1881f/build-the-movement" target="_blank" title="Missions">
<i class="mdi-content-create"></i>
<span>Missions</span>
</a>
</li>
<li class="text-icon">
<a href="#" title="coming soon">
<i class="mdi-action-perm-media"></i>
<span>Profile</span>
</a>
</li>
</ul>
<ul id="user-dropdown" class="dropdown-content">
<li>Log in</li>
<li>Register</li>
</ul>
<a class="button-collapse" href="#" data-activates="nav-mobile"><i class="mdi-navigation-menu"></i></a>
</div>
</nav>
dropdowns:
<ul id="nav-about" class="dropdown-content">
<li>
About Us
</li>
<li>
Hire Us
</li>
<li>
Community Values
</li>
<li>
F.A.Q
</li>
<li>
The Road to Focallocal
</li>
<li>
Will we Succeed?
</li>
<li>
Focallocal in the news
</li>
<ul id="nav-projects" class="dropdown-content">
<li>
<a href="http://action.focallocal.org/">Action Center
</a>
</li>
<li>
<a href="http://brightertomorrowmap.com/">Brighter Tomorrow Map
</a>
</li>
<li>
<a href="http://morehappiness.focallocal.org/">More Happiness
</a>
</li>
I'm trying to add a shop by brand to a Bigcommerce theme. I've been through the template files and can't seem to make out what I need to do. I found the "shop-by-price.html" template page and I figured I could just paste some code above it but can't seem to find the brand listing code.
Here's the shop-by-price.html page
{{#if shop_by_price}}
<div class="sidebar-block shop-by-price facet-list" data-facet-filter>
{{> components/common/facet-toggle title=(lang 'category.shop_by_price')}}
<ul class="facet-list-items is-open" data-facet-filter-wrapper>
{{#each shop_by_price}}
<li class="facet-item">
<a class="{{#if selected }}is-active{{/if}}" href="{{url}}" alt="{{low.formatted}} - {{high.formatted}}">{{low.formatted}} - {{high.formatted}}</a>
</li>
{{/each}}
</ul>
{{#any shop_by_price selected=true}}
<a href="{{category_url}}" class="link facet-remove">
{{lang 'category.reset'}}
</a>
{{/any}}
</div>
{{/if}}
if I am not wrong so you want to show brands list in category sidebar page so please open your stencil theme editor from admin end then
templates->components->category->sidebar.html open the file sidebar.html and paste below code
<nav>
{{#if category.subcategories}}
<div class="sidebarBlock">
<h5 class="sidebarBlock-heading">{{category.name}}</h5>
<ul class="navList">
{{#each category.subcategories}}
<li class="navList-item">
<a class="navList-action" href="{{url}}" alt="{{name}}" title="{{name}}">{{name}}</a>
</li>
{{/each}}
</ul>
</div>
{{/if}}
{{#if shop_by_brand}}
<div class="sidebarBlock">
<h5 class="sidebarBlock-heading">{{lang 'brand.label'}}</h5>
<ul class="navList">
{{#each shop_by_brand}}
<li class="navList-item">
<a class="navList-action" href="{{url}}">{{name}}</a>
</li>
{{/each}}
<li class="navList-item">
<a class="navList-action" href="{{urls.brands}}">{{lang 'common.view_all'}}</a>
</li>
</ul>
</div>
{{/if}}
{{#if category.faceted_search_enabled}}
{{> components/faceted-search/index category}}
{{else}}
{{> components/category/shop-by-price shop_by_price=category.shop_by_price category_url=category.url}}
{{/if}}
</nav>
after hit the save and apply button it will look like this
http://deepak-diwan-s-store.mybigcommerce.com/ala-carte-by-the-lb/
When I use the find element by ID it is not working in my code.
--This is the HTML where the 4 tabs appears. Under each option there is nav option which has the id. Each of the 4 tabs also has ids. But identifying using those are not working.
HTML:
<nav id="monitoring-tab" class="pure-menu pure-menu-open pure-menu-horizontal ng-scope">
<ul>
<li id="now-tab" ui-sref-active="pure-menu-selected" ng-hide="hideTab.now" class="ng-hide">
<a ui-sref="app.monitoring.real-time" href="#/monitoring/real-time">
Now</a>
</li>
<li id="day-tab" ui-sref-active="pure-menu-selected" class="pure-menu-selected">
<a ui-sref="app.monitoring.historical.day" href="#/monitoring/historical/day">
Day</a>
</li>
<li id="month-tab" ui-sref-active="pure-menu-selected">
<a ui-sref="app.monitoring.historical.month" href="#/monitoring/historical/month">
Month</a>
</li>
<li id="year-tab" ui-sref-active="pure-menu-selected">
<a ui-sref="app.monitoring.historical.year" href="#/monitoring/historical/year">
Year</a>
</li>
<li id="lifetime-tab" ui-sref-active="pure-menu-selected">
<a ui-sref="app.monitoring.historical.lifetime" href="#/monitoring/historical/lifetime">
Lifetime</a>
</li>
</ul>
</nav>
<div id="date-range" ng-hide="stateName =='app.monitoring.historical.lifetime'" class="ng-scope">
<span>
<a id="historical-nav-prev" ui-sref="app.monitoring.historical.day({date:'2014-10-16'})" href="#/monitoring/historical/day?date=2014-10-16">
<i class="fa fa-chevron-left"></i>
</a>
</span>
<span class="ng-binding">Fri, Oct 17, 2014</span>
<span ng-show="historicalNav.nextDateBtnShown" class="ng-hide">
<a id="historical-nav-next" ui-sref="app.monitoring.historical.day({date:''})" href="#/monitoring/historical/day?date=">
<i class="fa fa-chevron-right"></i>
</a>
</span>
</div>
MyCode:
it('Should click on the previous day', function() {
element(by.id('historical-nav-prev')).click();
});
Error:
NoSuchElementError: No element found using locator: By.id("historical-nav-p
rev")
What is wrong here? Most of the id's I am using are not working.
I am using bootstrap 3 dropdown toggle menu in my angularjs project and everything seems to be working fine but after using angular ui bootstrap (angular-ui-bootstrap.min.js) the bootstrap 3 dropdown toggle menu is not working (meaning its not opening). Does anyone had the same issue? Please help me on how to solve this.
Index.html
<ul class="nav nav-list">
<li>
<a href="index.html">
<i class="icon-dashboard"></i>
<span class="menu-text"> Dashboard </span>
</a>
</li>
<li>
<a href="#" class="dropdown-toggle">
<i class="icon-building"></i>
<span class="menu-text"> Projects </span>
<b class="arrow icon-angle-down"></b>
</a>
<ul class="submenu">
<li>
<a href="#">
<i class="icon-double-angle-right"></i>
Find Project
</a>
</li>
<li>
<a href="#">
<i class="icon-double-angle-right"></i>
Create Project
</a>
</li>
<li>
<a href="#">
<i class="icon-double-angle-right"></i>
Update Project
</a>
</li>
</ul>
</li>
<ul>
You need to do it the Angularjs way:
Make sure to include:
Index:
<ul class="nav nav-list">
<li>
<a href="index.html">
<i class="icon-dashboard"></i>
<span class="menu-text"> Dashboard </span>
</a>
</li>
<li class="dropdown" ng-controller="DropdownCtrl">
<a class="dropdown-toggle">
<i class="icon-building"></i>
<span class="menu-text"> Projects </span>
<b class="arrow icon-angle-down"></b>
</a>
<ul class="dropdown-menu">
<li ng-repeat="choice in items">
<i class="icon-double-angle-right"></i>
<a>{{choice}}</a>
</li>
</ul>
</li>
<ul>
JS:
angular.module('plunker', ['ui.bootstrap']);
function DropdownCtrl($scope) {
$scope.items = [
"Find Project",
"Create Project",
"Update Project"
];
}