Customize SonataAdminBundle base_edit_form.html.twig - symfony

I would like to show the map in the form generated by Sonata Admin Bundle
This is my formMapper,
class PlaceInfoAdmin extends Admin
{
public function configureFormFields(FormMapper $formMapper)
{
$formMapper
->with('General')
->add('lati')
->add('longi')
->add('name')
I am using ivory google map API.
Simplifying what I want to do,
put this code at the last of template used by PlaceInfoAdmin
{{ ivory_google_api([
data.map,
data.form.field.vars['autocomplete']
])}}
put this code between rendered the cide of longi and name.
{{ ivory_google_map(data.map) }}
Now I research the twig files and found out maybe form is rendered by base_edit_form.html.twig,
However where should I alter?? or How can I find this twig is called by PlaceInfoAdmin?? (not by another ****Admin class)
{% block form %}
{{ sonata_block_render_event('sonata.admin.edit.form.top', { 'admin': admin, 'object': object }) }}
{% set url = admin.id(object) is not null ? 'edit' : 'create' %}
{% if not admin.hasRoute(url)%}
<div>
{{ "form_not_available"|trans({}, "SonataAdminBundle") }}
</div>
{% else %}
<form
{% if sonata_admin.adminPool.getOption('form_type') == 'horizontal' %}class="form-horizontal"{% endif %}
role="form"
action="{% block sonata_form_action_url %}{{ admin.generateUrl(url, {'id': admin.id(object), 'uniqid': admin.uniqid, 'subclass': app.request.get('subclass')}) }}{% endblock %}"
{% if form.vars.multipart %} enctype="multipart/form-data"{% endif %}
method="POST"
{% if not sonata_admin.adminPool.getOption('html5_validate') %}novalidate="novalidate"{% endif %}
{% block sonata_form_attributes %}{% endblock %}
>
{{ include('SonataAdminBundle:Helper:render_form_dismissable_errors.html.twig') }}
{% block sonata_pre_fieldsets %}
<div class="row">
{% endblock %}
{% block sonata_tab_content %}
{% set has_tab = ((admin.formtabs|length == 1 and admin.formtabs|keys[0] != 'default') or admin.formtabs|length > 1 ) %}
<div class="col-md-12">
{% if has_tab %}
<div class="nav-tabs-custom">
<ul class="nav nav-tabs" role="tablist">
{% for name, form_tab in admin.formtabs %}
<li{% if loop.index == 1 %} class="active"{% endif %}><i class="fa fa-exclamation-circle has-errors hide" aria-hidden="true"></i> {{ name|trans({}, form_tab.translation_domain ?: admin.translationDomain) }}</li>
{% endfor %}
</ul>
<div class="tab-content">
{% for code, form_tab in admin.formtabs %}
<div class="tab-pane fade{% if loop.first %} in active{% endif %}" id="tab_{{ admin.uniqid }}_{{ loop.index }}">
<div class="box-body container-fluid">
<div class="sonata-ba-collapsed-fields">
{% if form_tab.description != false %}
<p>{{ form_tab.description|raw }}</p>
{% endif %}
{{ form_helper.render_groups(admin, form, form_tab['groups'], has_tab) }}
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% else %}
{{ form_helper.render_groups(admin, form, admin.formtabs['default'].groups, has_tab) }}
{% endif %}
</div>
{% endblock %}
{% block sonata_post_fieldsets %}
</div>
{% endblock %}
{{ form_rest(form) }}
{% block formactions %}
<div class="sonata-ba-form-actions well well-small form-actions">
{% block sonata_form_actions %}
{% if app.request.isxmlhttprequest %}
{% if admin.id(object) is not null %}
<button type="submit" class="btn btn-success" name="btn_update"><i class="fa fa-save" aria-hidden="true"></i> {{ 'btn_update'|trans({}, 'SonataAdminBundle') }}</button>
{% else %}
<button type="submit" class="btn btn-success" name="btn_create"><i class="fa fa-plus-circle" aria-hidden="true"></i> {{ 'btn_create'|trans({}, 'SonataAdminBundle') }}</button>
{% endif %}
{% else %}
{% if admin.supportsPreviewMode %}
<button class="btn btn-info persist-preview" name="btn_preview" type="submit">
<i class="fa fa-eye" aria-hidden="true"></i>
{{ 'btn_preview'|trans({}, 'SonataAdminBundle') }}
</button>
{% endif %}
{% if admin.id(object) is not null %}
<button type="submit" class="btn btn-success" name="btn_update_and_edit"><i class="fa fa-save" aria-hidden="true"></i> {{ 'btn_update_and_edit_again'|trans({}, 'SonataAdminBundle') }}</button>
{% if admin.hasroute('list') and admin.isGranted('LIST') %}
<button type="submit" class="btn btn-success" name="btn_update_and_list"><i class="fa fa-save"></i> <i class="fa fa-list" aria-hidden="true"></i> {{ 'btn_update_and_return_to_list'|trans({}, 'SonataAdminBundle') }}</button>
{% endif %}
{% if admin.hasroute('delete') and admin.isGranted('DELETE', object) %}
{{ 'delete_or'|trans({}, 'SonataAdminBundle') }}
<a class="btn btn-danger" href="{{ admin.generateObjectUrl('delete', object) }}"><i class="fa fa-minus-circle" aria-hidden="true"></i> {{ 'link_delete'|trans({}, 'SonataAdminBundle') }}</a>
{% endif %}
{% if admin.isAclEnabled() and admin.hasroute('acl') and admin.isGranted('MASTER', object) %}
<a class="btn btn-info" href="{{ admin.generateObjectUrl('acl', object) }}"><i class="fa fa-users" aria-hidden="true"></i> {{ 'link_edit_acl'|trans({}, 'SonataAdminBundle') }}</a>
{% endif %}
{% else %}
{% if admin.hasroute('edit') and admin.isGranted('EDIT') %}
<button class="btn btn-success" type="submit" name="btn_create_and_edit"><i class="fa fa-save" aria-hidden="true"></i> {{ 'btn_create_and_edit_again'|trans({}, 'SonataAdminBundle') }}</button>
{% endif %}
{% if admin.hasroute('list') and admin.isGranted('LIST') %}
<button type="submit" class="btn btn-success" name="btn_create_and_list"><i class="fa fa-save"></i> <i class="fa fa-list" aria-hidden="true"></i> {{ 'btn_create_and_return_to_list'|trans({}, 'SonataAdminBundle') }}</button>
{% endif %}
<button class="btn btn-success" type="submit" name="btn_create_and_create"><i class="fa fa-plus-circle" aria-hidden="true"></i> {{ 'btn_create_and_create_a_new_one'|trans({}, 'SonataAdminBundle') }}</button>
{% endif %}
{% endif %}
{% endblock %}
</div>
{% endblock formactions %}
</form>
{% endif%}
{{ sonata_block_render_event('sonata.admin.edit.form.bottom', { 'admin': admin, 'object': object }) }}
{% endblock %}
{% endblock %}
Ho

Create a template that extends base_edit.html.twig:
{% extends 'SonataAdminBundle:CRUD:base_edit.html.twig' %}
{% block form %}
{# your custom code #}
{{ parent() }}
{% endblock %}
Then to make sure only the admin you want uses that template pass it in the definition of your admin service with a setTemplate call:
librinfo_crm.admin.contact:
class: Librinfo\CRMBundle\Admin\ContactAdmin
arguments: [~, Librinfo\CRMBundle\Entity\Contact, SonataAdminBundle:CRUD]
tags:
- name: sonata.admin
manager_type: orm
group: Customers Relationship Management
label: librinfo.crm.contact_admin.label
label_translator_strategy: blast_core.label.strategy.librinfo
calls:
- [ setTemplate, [edit, LibrinfoCRMBundle:OrganismAdmin:edit.html.twig]]

Related

form field label is displaying twice

I'm using macro to display a collection of videos in my form.
Form
{% import "macros/prototype.html.twig" as prototype %}
{{ form_start(form) }}
<div class="row">
<div class="col-md-6">
{{ form_row(form.title) }}
{{ form_row(form.description) }}
<fieldset class="form-group">
{{ form_label(form.videos) }}
<div id="course_videos" class="collection_holder" data-prototype="{{ prototype.tagCollectionLinkItem(form.videos.vars.prototype)|e }}">
{% for video in form.videos.children %}
{{ prototype.tagCollectionLinkItem(video) }}
{% endfor %}
</div>
<button type="button" id="add-video-btn" data-target-collection="#{{ form.videos.vars.id }}" class="btn btn-sm btn-info"><i class="la la-plus"></i> {{ 'course.buttons.add_video' | trans({}, 'labels') }}</button>
</fieldset>
</div>
</div>
<hr>
<input type="submit" class="btn m-btn--pill at-btn--primary pull-right" value="{{ button_name }}">
{{ form_end(form) }}
Macro
{% macro tagCollectionFileItem(item) %}
<fieldset class="form-group">
<div id="{{ item.vars.id }}">
{% if item.uploadedFile.vars.file_url or item.uploadedFile.vars.image_url %}
{{ form_errors(item.uploadedFile) }}
{{ form_widget(item.uploadedFile, {'attr': {'hidden': true}}) }}
{% else %}
<div class="custom-file">
{{ form_widget(item.uploadedFile) }}
{{ form_label(item.uploadedFile, item.uploadedFile.vars.label, {'label_attr': {'class': 'custom-file-label'}}) }}
</div>
{% endif %}
</div>
</fieldset>
{% endmacro %}
form_end makes form.videos label to display twice. I guess because I never used form_widget(form.videos) so form_end makes it appears. Should I replace my macro with a form theme?
Because you never rendered form.video with the widget you need to set the field as rendered. Just use {{ do form.videos.setRendered }} and you are good to go

Twig {% if statement %} using Symfony 2

How can I access an entity attribute in Twig (using the Winzou Symfony2 tutorial on OpenClassroom)?
Category is an attribute of my class Advert which contains all my adverts. I just want to show an error message if there are no Advert entities.
Here is my accordion that lists "adverts" from my Advert entity. One accordion is for the category incident and the one other is for the category general.
<div class="well">
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseGen">
<h3><i class="icon-chevron-right"></i> Incidents</h3>
</a>
</div>
<div id="collapseGen" class="accordion-body collapse">
<div class="accordion-inner">
<div class="accordion" id="accordion4">
{% for advert in listAdverts %}
{% if advert.category == "incident" %}
<div class="accordion-group">
<div class="accordion-heading decalage">
<a href="{{ path('info_view', {'id': advert.id}) }}">
<h3 class="{{ advert.category }}">{{ advert.title }}</h3>
</a>
<div>
<span>{{ advert.content|truncate(100, true, '...')|raw }}</span>
</div>
<div>
{% if (advert.UpdatedAt is empty) %}
<i>Créé par {{ advert.author }}, le {{ advert.date|date('d/m/Y') }}
à {{ advert.date|date('H:i') }}</i>
{% else %}
<i>Modifié par {{ advert.author }},
le {{ advert.updatedAt|date('d/m/Y') }}
à {{ advert.updatedAt|date('H:i') }}</i>
{% endif %}
</div>
<div>{% if advert.readers is not empty %}
<i>Vu par :
{% for reader in advert.readers %}
{{ reader.username }},
{% endfor %}
{% endif %}</i>
</div>
<br>
<div>
{% if is_granted("IS_AUTHENTICATED_FULLY") %}
<p>
<a href="{{ path('info_edit', {'id': advert.id}) }}"
class="btn btn-default">
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
Modifier
</a>
<a href="#myModal{{ advert.id }}" role="button" class="btn btn-danger"
data-toggle="modal">
<i class="fa fa-trash-o" aria-hidden="true"></i>
Supprimer
</a>
</p>
<div id="myModal{{ advert.id }}" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h3>Suppression annonce "{{ advert.title }}"</h3>
</div>
<div class="modal-body">
<p>Voulez-vous vraiment supprimer l'annonce : "{{ advert.title }}" ? </p>
</div>
<div class="modal-footer parente">
<div>Annuler</div>
<div>
<form class="nomargin"
action="{{ path('info_delete', {'id': advert.id}) }}"
method="post">
<input type="submit" value="Supprimer"
class="btn btn-danger"/>{{ form_rest(form) }}
</form>
</div>
</div>
</div>
{% endif %}
</div>
</div>
</div>
{# HERE I DONT KNOW HOW TO DO IT #}
{% else %} No Advert !
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseCo">
<h3><i class="icon-chevron-right"></i> Général</h3>
</a>
</div>
<div id="collapseCo" class="accordion-body collapse">
<div class="accordion-inner">
<div class="accordion" id="accordion4">
{% for advert in listAdverts %}
{% if advert.category == "general" %}
<div class="accordion-group">
<div class="accordion-heading decalage">
<div class="accordion-heading">
<a href="{{ path('info_view', {'id': advert.id}) }}">
<h3 class="{{ advert.category }}">{{ advert.title }}</h3>
</a>
<span>{{ advert.content|truncate(100, true, '...')|raw }}</span>
<div>
{% if (advert.UpdatedAt is empty) %}
<i>Créé par {{ advert.author }}, le {{ advert.date|date('d/m/Y') }}
à {{ advert.date|date('H:i') }}</i>
{% else %}
<i>Modifié par {{ advert.author }},
le {{ advert.updatedAt|date('d/m/Y') }}
à {{ advert.updatedAt|date('H:i') }}</i>
{% endif %}
</div>
<div>{% if advert.readers is not empty %}
<i>Vu par :
{% for reader in advert.readers %}
{{ reader.username }},
{% endfor %}
{% endif %}</i>
</div>
<br>
<div>
{% if is_granted("IS_AUTHENTICATED_FULLY") %}
<p>
<a href="{{ path('info_edit', {'id': advert.id}) }}"
class="btn btn-default">
<i class="fa fa-pencil-square-o" aria-hidden="true"></i>
Modifier
</a>
<a href="#myModal{{ advert.id }}" role="button" class="btn btn-danger"
data-toggle="modal">
<i class="fa fa-trash-o" aria-hidden="true"></i>
Supprimer
</a>
</p>
<div id="myModal{{ advert.id }}" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h3>Suppression annonce "{{ advert.title }}"</h3>
</div>
<div class="modal-body">
<p>Voulez-vous vraiment supprimer l'annonce : "{{ advert.title }}" ? </p>
</div>
<div class="modal-footer parente">
<div>Annuler</div>
<div>
<form class="nomargin"
action="{{ path('info_delete', {'id': advert.id}) }}"
method="post">
<input type="submit" value="Supprimer"
class="btn btn-danger"/>{{ form_rest(form) }}
</form>
</div>
</div>
</div>
{% endif %}
</div>
</div>
</div>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
My error message " No Adverts !" doesnt appears..
EDIT : According to Mitchel's answer, i've tried this :
{% endif %}
{% else %}<li>No Adverts</li>
{% endfor %}
I don't know why it doesn't work when one advert is in the other category...
{% for advert in listAdverts if advert.category == "incident" %}
{% if listAdverts is empty%}
<li>No Adverts</li>
{% endif %}
{% endfor %}
That code does not work.
I'm not sure to understand your question, but if so, you can maybe try a thing like this according to the documentation:
{% for user in users %}
<li>{{ user.username|e }}</li>
{% else %}
<li><em>no user found</em></li>
{% endfor %}
In Twig a for statement can have an associated else. It basically means that if the for has no results, the else is used. You should put the {% endif %} before the {% else %} and it should work.

twig print field multiple image in field templates

Here, I have attached my code
<div{{ attributes }}>
{% if not label_hidden %}
<div{{ title_attributes.addClass('field-label') }}>{{ label }}</div>
{% endif %}
<div{{ content_attributes.addClass('gall-wrp') }}>
{% for item in items %}
<a class="gall-img" href="{{ file_url(element['#object'].field_multiple_image.0.entity.uri.value) }}">
<img src="{{ file_url(element['#object'].field_multiple_image.0.entity.uri.value) }}"></a>
{% endfor %}
</div>
</div>
How to change {{ file_url(element['#object'].field_multiple_image.0.entity.uri.value) }} dynamically change value of 0.
.0 is the same than [0]. You can use:
{{ file_url(element['#object'].field_multiple_image.[yourVar].entity.uri.value) }}
Here, I have fixed this,
<div{{ attributes }}>
{% if not label_hidden %}
<div{{ title_attributes.addClass('field-label') }}>{{ label }}</div>
{% endif %}
<div{{ content_attributes.addClass('gall-wrp') }}>
{% for item in element['#object'].field_multiple_image %}
<a class="gall-img" href="{{ file_url(item.entity.uri.value) }}">
<img src="{{ file_url(item.entity.uri.value) }}"></a>
{% endfor %}
</div>
</div>

How to show mobile menu on Shopify Site

I have designed a new site using the Timber Framework in Shopify and I am now trying to sort out the responsive side to ensure this works on all devices properly.
The problem I am currently facing is that when the screen is resized to below 768px the desktop menu goes away which is fine but no menu shows up at all and I am not sure why this is. Initially when I added the Timber Framework then this was working and I have looked through the theme.liquid file but can't work why this is happening.
The site itself can be viewed at : http://www.prontaprint247.com
If somebody could please advise as to where I have gone wrong as not sure how to fix this issue.
Any help or advice would be appreciated.
My menu code in theme.liquid
<div id="NavDrawer" class="drawer drawer--left">
<div class="drawer__header">
<div class="drawer__title h3">{{ 'layout.drawers.browse' | t }}</div>
<div class="drawer__close js-drawer-close">
<button type="button" class="icon-fallback-text">
<span class="icon icon-x" aria-hidden="true"></span>
<span class="fallback-text">{{ 'layout.drawers.close_menu' | t }}</span>
</button>
</div>
</div>
<!-- begin mobile-nav -->
<ul class="mobile-nav">
<li class="mobile-nav__item mobile-nav__search">
{% include 'search-bar' %}
</li>
{% for link in linklists.main-menu.links %}
{% comment %}
Create a dropdown menu by naming a linklist the same as a link in the parent nav
More info on dropdowns:
- http://docs.shopify.com/manual/your-website/navigation/create-drop-down-menu
{% endcomment %}
{% assign child_list_handle = link.title | handleize %}
{% if linklists[child_list_handle].links != blank %}
<li class="mobile-nav__item{% if link.active %} mobile-nav__item--active{% endif %}" aria-haspopup="true">
<div class="mobile-nav__has-sublist">
{{ link.title }}
<div class="mobile-nav__toggle">
<button type="button" class="icon-fallback-text mobile-nav__toggle-open">
<span class="icon icon-plus" aria-hidden="true"></span>
<span class="fallback-text">See More</span>
</button>
<button type="button" class="icon-fallback-text mobile-nav__toggle-close">
<span class="icon icon-minus" aria-hidden="true"></span>
<span class="fallback-text">{{ 'cart.general.close_cart' | t | json }}</span>
</button>
</div>
</div>
<ul class="mobile-nav__sublist">
{% for childlink in linklists[child_list_handle].links %}
<li class="mobile-nav__item {% if childlink.active %} mobile-nav__item--active{% endif %}">
{{ childlink.title | escape }}
</li>
{% endfor %}
</ul>
</li>
{% else %}
<li class="mobile-nav__item{% if link.active %} mobile-nav__item--active{% endif %}">
{{ link.title }}
</li>
{% endif %}
{% endfor %}
{% comment %}
If customer accounts are enabled, provide login and create account links
{% endcomment %}
{% if shop.customer_accounts_enabled %}
{% if customer %}
<li class="mobile-nav__item">
{% if customer.first_name != blank %}
{% capture first_name %}{{ customer.first_name }}{% endcapture %}
{{ 'layout.customer.logged_in_as_html' | t: first_name: first_name }}
{% else %}
{{ 'layout.customer.account' | t }}
{% endif %}
</li>
<li class="mobile-nav__item">
{{ 'layout.customer.log_out' | t | customer_logout_link }}
</li>
{% else %}
<li class="mobile-nav__item">
{{ 'layout.customer.log_in' | t | customer_login_link }}
</li>
<li class="mobile-nav__item">
{{ 'layout.customer.create_account' | t | customer_register_link }}
</li>
{% endif %}
{% endif %}
</ul>
<!-- //mobile-nav -->
</div>

Liquid default expanded menu

I have a liquid dropdown menu with a list of products that only expand when you click. I figured out how to open it by default when loading the site.
I simply found the <ul> tag for my dropdown list and changed it from this:
<ul id="Collapsible{{ forloop.index }}" class="site-nav__submenu site-nav__submenu--expanded" aria-hidden="false">
to this:
<ul id="Collapsible{{ forloop.index }}" class="site-nav__submenu site-nav__submenu--expand" aria-hidden="false">
However, I would also like it to be closed by default on small screens.
So far I haven't been able to find a solution that allows me to do that. I'm open to both liquid and CSS solutions. Anyone got any ideas?
Here is my code as it looks now with the default expand:
<div class="grid">
<nav class="grid__item small--text-center medium-up--one-fifth" id="makeShort" role="navigation">
<hr class="hr--small medium-up--hide">
<button data-target="site-nav" id="ToggleMobileMenu" class="mobile-menu-icon medium-up--hide" aria-haspopup="true" aria-owns="SiteNav">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="icon__fallback-text">{{ 'layout.navigation.menu' | t }}</span>
</button>
<div id="SiteNav" class="site-nav" role="menu">
<ul class="list--nav">
{% for link in menus.main-menu.links %}
{% assign child_list_handle = link.title | handleize %}
{% if menus[child_list_handle].links != blank %}
<li class="site-nav--has-submenu site-nav__element">
{% if link.title == 'Shop' %}
<button class="site-nav__link btn--link site-nav__expand hidden" aria-expanded="false" aria-controls="Collapsible{{ forloop.index }}">
{{ link.title }}
<span>+</span>
</button>
<button class="site-nav__link btn--link site-nav__collapse" aria-expanded="true" aria-controls="Collapsible{{ forloop.index }}">
{{ link.title }}
<span>-</span>
</button>
<ul id="Collapsible{{ forloop.index }}" class="site-nav__submenu site-nav__submenu--expand" aria-hidden="false">
{% for childlink in menus[child_list_handle].links %}
<li class="{% if childlink.active or collection.current_type == childlink.title or collection.current_vendor == childlink.title %}{% unless forloop.first and childlink.title contains 'All' and current_tags.size > 0 %} site-nav--active {% endunless %}{% endif %}">
{{ childlink.title | escape }}
</li>
{% endfor %}
</ul>
</li>
{% else %}
<button class="site-nav__link btn--link site-nav__expand hidden" id="hideOnLargeScreen" aria-expanded="false" aria-controls="Collapsible{{ forloop.index }}">
{{ link.title }}
<span>+</span>
</button>
<button class="site-nav__link btn--link site-nav__collapse" id="hideOnLargeScreen" aria-expanded="true" aria-controls="Collapsible{{ forloop.index }}">
{{ link.title }}
<span>-</span>
</button>
<ul id="Collapsible{{ forloop.index }}" class="site-nav__submenu site-nav__submenu--expanded" id="hideOnLargeScreen" aria-hidden="false">
{% for childlink in menus[child_list_handle].links %}
<li class="{% if childlink.active or collection.current_type == childlink.title or collection.current_vendor == childlink.title %}{% unless forloop.first and childlink.title contains 'All' and current_tags.size > 0 %} site-nav--active {% endunless %}{% endif %}">
{{ childlink.title | escape }}
</li>
{% endfor %}
</ul>
{% endif %}
{% else %}
<li class="site-nav__element {% if link.active %}site-nav--active{% endif %}">
{% if link.title == 'Shop' %}
{{ link.title }}
{% else %}
{{ link.title }}
{% endif %}
</li>
{% endif %}
{% endfor %}
{% if shop.customer_accounts_enabled %}
{% if customer %}
<li>
{{ 'layout.customer.account' | t }}
</li>
<li>
{{ 'layout.customer.log_out' | t }}
</li>
{% else %}
<li>
{{ 'layout.customer.log_in' | t }}
</li>
<li>
{{ 'layout.customer.create_account' | t }}
</li>
{% endif %}
{% endif %}
</ul>
{% include 'custom.social-bar' %}
</div>
<hr class="medium-up--hide hr--small {% if template == 'index' %}{% if settings.home_section_1 == 'banner-image' or settings.home_section_1 == 'featured-products' %}hr--border-bottom{% endif %}{% endif %}">
</nav>
It's nothing that belongs to liquid or Shopify. You easily can do this with common solutions. For example you could use jQuery by putting something like this into your theme js file:
$( window ).resize(function() {
if ($(window).width() < 700 ) { // Size of "small"
$('.list--nav ul').addClass('site-nav__submenu--expanded').removeClass('site-nav__submenu--expand');
} else {
$('.list--nav ul').addClass('site-nav__submenu--expand').removeClass('site-nav__submenu--expanded');
}
});
But you also could put the css code of .site-nav__submenu--expand into a condition for large devices like:
#media (min-width:960px) {
.site-nav__submenu--expand {...}
}

Resources