0

I am totally new to this kinda stuff but i have got this index.php(index.php) and this template.Details.xml(templateDetails.xml). But the navigation bar looks completely different than this . It now looks like this enter image description here. How do I tell Joomla! that I want to have the bootstrap styling and not the default links.

  • Rather than dropping links to you scripts and volunteers needing to chase them down, you can edit your question to copy-paste the scripts into formatted code blocks here. This is also preferable to prevent vital question details existing only outside of JSE. – mickmackusa May 22 at 20:45
0

In the Joomla backend, go to the Menu module, click on the "Advanced" tab and you will see a field called "Module Class Suffix" (see this link).

In there, add the following:

navbar-nav

Note that there is a space before it. This is valid for Bootstrap 3. For Boostrap 4 please see the Bootstrap documntation. I will most probably need to do something similar for each menu entry, e.g.. adding " nav" to the entry item as well.

Alternatively, you could override the mod_menu layout. The easiest is to copy the file from "modules/mod_menu/tmpl/default.php" to "templates//html/mod_menu/default.php". Now you can alter the file in your template folder as you like and add the necessary classes. Here is one, that I did a couple of months ago to work with bootstrap 4. You will probably need to adjust it to your needs.

 <?php


defined('_JEXEC') or die;

// Note. It is important to remove spaces between elements.
?>
<?php // The menu class is deprecated. Use nav instead. ?>
<ul class="menu<?php echo $class_sfx;?>"<?php
    $tag = '';

    if ($params->get('tag_id') != null)
    {
        $tag = $params->get('tag_id') . '';
        echo ' id="' . $tag . '"';
    }
?>>
<?php
foreach ($list as $i => &$item)
{
    $class = 'nav-item item-' . $item->id;

    if (($item->id == $active_id) OR ($item->type == 'alias' AND $item->params->get('aliasoptions') == $active_id))
    {
        $class .= ' current';
    }

    if (in_array($item->id, $path))
    {
        $class .= ' active';
    }
    elseif ($item->type == 'alias')
    {
        $aliasToId = $item->params->get('aliasoptions');

        if (count($path) > 0 && $aliasToId == $path[count($path) - 1])
        {
            $class .= ' active';
        }
        elseif (in_array($aliasToId, $path))
        {
            $class .= ' alias-parent-active';
        }
    }

    if ($item->type == 'separator')
    {
        $class .= ' dropdown-divider';
    }

    if ($item->deeper)
    {
        $class .= ' deeper';
    }

    if ($item->parent)
    {
        $class .= ' parent dropdown';
    }

    if (!empty($class))
    {
        $class = ' class="' . trim($class) . '"';
    }

    echo '<li' . $class . '>';
    $item->anchor_css = 'nav-link' . $item->anchor_css;
    if($item->level > $params->get('startLevel')) {
        $item->anchor_css = 'dropdown-item';
    }

    // The next item is deeper.
    if ($item->deeper)
    {
        $item->anchor_css .= ' dropdown-toggle';
        $item->data = 'data-toggle="dropdown"';
    }

    // Render the menu item.
    switch ($item->type) :
        case 'separator':
        case 'url':
        case 'component':
        case 'heading':
            require JModuleHelper::getLayoutPath('mod_menu', 'default_' . $item->type);
            break;

        default:
            require JModuleHelper::getLayoutPath('mod_menu', 'default_url');
            break;
    endswitch;

    // The next item is deeper.
    if ($item->deeper)
    {
        echo '<ul class="nav-child unstyled dropdown-menu">';
    }
    elseif ($item->shallower)
    {
        // The next item is shallower.
        echo '</li>';
        echo str_repeat('</ul></li>', $item->level_diff);
    }
    else
    {
        // The next item is on the same level.
        echo '</li>';
    }
}
?></ul>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.