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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
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