Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Force an icon in Navbar to stay visible in small view


Recommended Posts

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

Link to comment
Share on other sites

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>

 

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

1 hour ago, Moxamint said:

@raiwa Thanks but it turned out like this:

1119567047_Image002.png.084ba56bdb48a2a1ed692a73258d192e.png

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.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...