Jump to content
Moxamint

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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>

 


 

Share this post


Link to post
Share on other sites
Posted (edited)

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.

Edited by raiwa

Share this post


Link to post
Share on other sites
Posted (edited)

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

Edited by Moxamint

Share this post


Link to post
Share on other sites
Posted (edited)
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.

Edited by raiwa

Share this post


Link to post
Share on other sites

@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 

Share this post


Link to post
Share on other sites
Posted (edited)
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.

Edited by raiwa

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

×