Force an icon in Navbar to stay visible in small view

[♥Moxamint]

Hi All,

I remember this has been discussed somewhere but I just couldn't find it.

How do I force an icon in Navbar to stay visible in small view, while other icons collapse into the hamburger menu?

I'm running the lastest CE, BS4.

Thanks, Eddy

[♥JcMagpie]

Simply make sure you add them outside the  class="collapse navbar-collapse" <div>

[♥Moxamint]

Hi @JcMagpie Do you have code example for this e.g if I'd like to let shopping cart stay visible all the time.

I could not find class="collapse navbar-collapse" anywhere.

Thanks, Eddy

[♥JcMagpie]

which version are you looking at? I only looked at BS4 but should be the same for BS3. The nav bar is using 2 modules. The first is in

public_html/includes/modules/content/navigation/templates/tpl_cm_navbar.php

This then pulls in the modules from

includes/modules/navbar_modules/templates/

So if you wish to keep original navbar then simple add code to

public_html/includes/modules/content/navigation/templates/tpl_cm_navbar.php

as shown below. or make a new navbar to replace the current and add all your custom code and turn on and turn off stock.

I've added it to the test site so you can see.

https://chilleddisplays.co.uk/

like this,

<nav class="navbar <?php //echo $navbar_style; ?> cm-navbar">
  <?php
  if ($oscTemplate->hasBlocks('navbar_modules_home')) {
    echo '<div class="navbar-header">' . PHP_EOL;
    echo $oscTemplate->getBlocks('navbar_modules_home');
    echo '</div>' . PHP_EOL;
  }
  ?>   
  <ul class="navbar-nav flex-row">
            <li class="nav-item"><a class="nav-link px-2" href="#"><span class="fa fa-facebook"></span></a></li>
            <li class="nav-item"><a class="nav-link px-2" href="#"><span class="fa fa-twitter"></span></a></li>
            <li class="nav-item"><a class="nav-link px-2" href="#"><span class="fa fa-youtube"></span></a></li>
            <li class="nav-item"><a class="nav-link px-2" href="#"><span class="fa fa-linkedin"></span></a></li>
        </ul>
  <div class="collapse navbar-collapse" id="collapseCoreNav">
    <?php
    if ($oscTemplate->hasBlocks('navbar_modules_left')) {
      echo '<ul class="navbar-nav mr-auto">' . PHP_EOL;
      echo $oscTemplate->getBlocks('navbar_modules_left');
      echo '</ul>' . PHP_EOL;
    }
    if ($oscTemplate->hasBlocks('navbar_modules_right')) {
      echo '<ul class="navbar-nav ml-auto">' . PHP_EOL;
      echo $oscTemplate->getBlocks('navbar_modules_right');
      echo '</ul>' . PHP_EOL;
    }    
    ?>
  </div>
</nav>

 

[♥raiwa]

Hello Eddy @Moxamint,

Supposed you have modularized navbar, in admin : modules : navbar modules : shopping cart : => set Content Placement to Home

Then you may need to apply some css styling to show it nice.

[♥Moxamint]

Thank you @raiwa @JcMagpie

Both solutions worked but it'll need more tweaking if I want the shopping cart icon to position/function properly.

Cheers, Eddy

[♥raiwa]

16 minutes ago, Moxamint said:

Both solutions worked but it'll need more tweaking if I want the shopping cart icon to position/function properly.

Cheers, Eddy

You may  duplicate the shopping cart module, place the copy in the home group and show it only on xs view. Then hide the original in xs view.

[♥Moxamint]

@raiwa Thanks but it turned out like this:

It breaks to the line below the hamburger and brand.  It is the same even if I turn off the brand.

Eddy 

[piernas]

Here you have another example: https://apps.oscommerce.com/s9Kqr&amp;alternative-navbar-with-extra-buttons

[♥raiwa]

1 hour ago, Moxamint said:

@raiwa Thanks but it turned out like this:

It breaks to the line below the hamburger and brand.  It is the same even if I turn off the brand.

Eddy 

Please compare the coding in the navbar template for the different groups.

The modules left and right group have <ul> tags wrapped around the groups, the home group does not have it.

So try to add <ul> tags to the home group in the navbar template, in which case the brand template (and all other home group module templates) also need <li> tags.

As already pointed out, it needs some additional css/tags to style it.