Jump to content
Sign in to follow this  

Hiding last text block in breadcrumb navigation on mobile phones

Recommended Posts


I would like to hide last text block from breadcrumb navigation on mobile phones.

Example (on product page):

Notebooky > Adaptéry k notebookům > Adaptéry náhradní > Nabíječka na notebook acer 19v 3.42a (5.5x1.7)

Im trying to make it look like this:

Notebooky > Adaptéry k notebookům > Adaptéry náhradní

I have already tried some CSS, Javascript and editing breadcrumb.tpl but I dont understand how are breadcrumbs made.

Could anyone help ? Thanks.

Code in breadcrumb.tpl

<!-- Breadcrumb -->
{if isset($smarty.capture.path)}{assign var='path' value=$smarty.capture.path}{/if}
<div class="breadcrumb clearfix {if isset($warehouse_vars.breadcrumb_width) && $warehouse_vars.breadcrumb_width == 0}fullwidth-breadcrumb{/if}">
	{if isset($warehouse_vars.breadcrumb_width) && $warehouse_vars.breadcrumb_width == 0}<div class="container">{/if}
		<a class="home" href="{if isset($force_ssl) && $force_ssl}{$base_dir_ssl}{else}{$base_dir}{/if}" title="{l s='Return to Home'}"><i class="icon-home"></i></a>
	{if isset($path) AND $path}
		<span class="navigation-pipe"{if isset($category) && isset($category->id_category) && $category->id_category == (int)Configuration::get('PS_ROOT_CATEGORY')} style="display:none;"{/if}>{$navigationPipe|escape:'html':'UTF-8'}</span>
		{if $path|strpos:'span' !== false}
			<span class="navigation_page">{$path|@replace:'<a ': '<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" '|@replace:'data-gg="">': '><span itemprop="title">'|@replace:'</a>': '</span></a></span>'}</span>

		{if $page_name == 'product'}
		{hook h='productnavs'}

{if isset($warehouse_vars.breadcrumb_width) && $warehouse_vars.breadcrumb_width == 0}</div>{/if}

<!-- /Breadcrumb -->


Generated HTML code by breadcrumb.tpl

<div class="breadcrumb clearfix "> 
  <a class="home" href="https://powerparts.cz/" title="Zpět na hlavní stránku">
    <i class="icon-home"></i></a> 
  <span class="navigation-pipe">&gt;
  <span class="navigation_page">
    <span itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
      <a itemprop="url" href="https://powerparts.cz/457-notebooky/" title="Notebooky">
        <span itemprop="title">Notebooky
    <span class="navigation-pipe">&gt;
    <span itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
      <a itemprop="url" href="https://powerparts.cz/50-adaptery-k-notebookum/" title="Adaptéry k notebookům">
        <span itemprop="title">Adaptéry k notebookům
    <span class="navigation-pipe">&gt;
    </span>Nabíječka na notebook acer 19v 3.42a (5.5x1.7)
  <div id="productsnavpn" class="pull-right">

Example: https://i.imgur.com/VGbqRqg.png


2018-11-16 12_42_41-Nabíječka na notebook acer 19v 3.42a (5.5x1.7) _ Adaptéry k notebookům - PowerPa.jpg

Edited by sooly (see edit history)

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More