Url in 'Top Navigation Bar' block including full site path

Developing with Concrete
#1

Hello, any advice would be much appreciated.
I thought I’d use the new ‘Top Navigation Bar’ block instead of the ‘Auto-Nav’ block for my site menu.
However I want to have some links in the menu that are just anchors to scroll to a part of the current page eg #mydiv.
If I just add an external link in the site map this works fine when using the ‘Auto-Nav’ block. However when I use the ‘Top Navigation Bar’ block the link generated includes the whole site path. Therefore the page is refreshed when clicking the link.

‘Auto-Nav’ block

<li class=""><a href="#ToMe" target="_self" class="">ToMe</a></li>

‘Top Navigation Bar’ block

<li class="nav-item"><a class="nav-link" target="_self" href="http://localhost:8888/site.co.uk#ToMe">ToMe</a></li>

Is there anyway to make the ‘Top Navigation Bar’ block output just what is entered in the external link field?

Many thanks

#2

Hi,

I would look at the view.php file in the block and see what is being pulled in. If there is nothing there look at the controller file.

#3

Hi @TMDesigns
Thanks, I did look at the view and controller files but I’m still a bit stumped.
In the ‘Top Navigation Bar’ block view file the link is

<?= $item->getUrl() ?>

In the ‘Auto-Nav’ block it’s

$ni->url

This bit in the controller for the ‘Top Navigation Bar’ block seems to refer to $item but I’m still none the wiser about why the link is coming through different

        $children = $home->getCollectionChildren();
        $navigation = new Navigation();

        $current = Page::getCurrentPage();
        $parentIDs = $this->getParentIDsToCurrent();

        foreach ($children as $child) {
            if ($this->includePageInNavigation($child)) {
                $item = new PageItem($child);
#4

In the interim, you can probably override either the controller or the view to essentially check for if an entry is an external link and modify behavior accordingly. Not terribly elegant, but this would work for a view override I think:

<?php defined('C5_EXECUTE') or die('Access Denied.');
use Concrete\Core\Page\Page;
$c = Page::getCurrentPage();
?>

<div class="ccm-block-top-navigation-bar" <?php if ($includeTransparency) { ?>style="display: none" data-transparency="navbar"<?php } ?>>
    <nav class="navbar navbar-expand-lg navbar-light <?php if ($includeStickyNav && !$c->isEditMode()) { ?>fixed-top<?php } ?>">
        <div class="container-fluid">
            <a class="navbar-brand" href="<?=$home->getCollectionLink()?>">
                <?php if ($logo && ($includeBrandLogo && $includeBrandText)) { ?>
                    <img src="<?=$logo->getURL()?>" class="logo align-text-center">
                    <?php if (isset($transparentLogo)) { ?>
                        <img src="<?=$transparentLogo->getURL()?>" class="logo-transparent align-text-center">
                    <?php } ?>
                    <?=$brandingText?>
                <?php } ?>
                <?php if ($logo && ($includeBrandLogo && !$includeBrandText)) { ?>
                    <img src="<?=$logo->getURL()?>" class="logo">
                    <?php if (isset($transparentLogo)) { ?>
                        <img src="<?=$transparentLogo->getURL()?>" class="logo-transparent">
                    <?php } ?>
                <?php } ?>

                <?php if (!$includeBrandLogo && $includeBrandText) { ?>
                    <?=$brandingText?>
                <?php } ?>
            </a>

            <?php if ($includeNavigation) { ?>
                <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#top-navigation-bar-<?=$bID?>" aria-controls="#top-navigation-bar-<?=$bID?>" aria-expanded="false" aria-label="<?=t('Toggle Navigation')?>">
                    <?php /* Custom animated Toggler */ ?>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <?php /* End animated toggler */?>

                    <?php
                    /* Standard bootstrap toggler. Uncomment to use */
                    /*
                    ?>
                    <span class="navbar-toggler-icon"></span>
                    <?php */ ?>
                </button>
                <div class="collapse navbar-collapse" id="top-navigation-bar-<?=$bID?>">
                    <?php if ($includeSearchInput) { ?>
                        <form method="get" action="<?=$searchAction?>">
                            <div class="input-group">
                                <input class="form-control border-end-0 border" type="search" name="query" placeholder="<?=t('Search')?>" aria-label="<?=t('Search')?>">
                                <span class="input-group-append">
                                    <button class="btn bg-white border-start-0 border" type="submit">
                                        <i class="fas fa-search text-secondary"></i>
                                    </button>
                                </span>
                            </div>
                        </form>
                    <?php } ?>
                    <ul class="navbar-nav">
                        <?php foreach ($navigation->getItems() as $item) {
                            $thisPage = Page::getByID($item->getPageID());
                            $thisTarget = '_self';
                            $thisLink = $item->getURL();
                            $thisTarget = $controller->getPageItemNavTarget($item);
                            if ($thisPage->isExternalLink()) {
                                $thisLink = $thisPage->getCollectionPointerExternalLink();
                                $thisTarget = '_self';
                            }
                            
                            /**
                             * @var $item \Concrete\Core\Navigation\Item\PageItem
                             */
                            
                            if (count($item->getChildren()) > 0) { 
                           
                            ?>
                            
                                <li class="nav-item dropdown">
                                    <a class="nav-link dropdown-toggle<?= $item->isActive() ? " active" : ""; ?>" data-concrete-toggle="dropdown" target="<?=$controller->getPageItemNavTarget($item)?>" href="<?php echo $item->getUrl(); ?>">
                                        <?=$item->getName()?>
                                    </a>
                                    <ul class="dropdown-menu">
                                        <?php foreach ($item->getChildren() as $dropdownChild) { ?>
                                            <li><a class="dropdown-item<?= $dropdownChild->isActive() ? " active" : ""; ?>" target="<?=$controller->getPageItemNavTarget($dropdownChild)?>" href="<?=$dropdownChild->getUrl()?>"><?=$dropdownChild->getName()?></a></li>
                                        <?php } ?>
                                    </ul>
                                </li>
                            <?php } else { ?>
                                <li class="nav-item"><a class="nav-link<?= $item->isActive() ? " active" : ""; ?>" target="<?=$thisTarget ?>" href="<?=$thisLink?>"><?=$item->getName()?></a></li>
                            <?php } ?>
                        <?php } ?>
                    </ul>

                </div>
            <?php } ?>
        </div>
    </nav>
</div>

But might be worth submitting an issue to ask why this behaves differently than the autonav as well.

#5

@rosie607 I recently added getPageItemNavTarget() to the block so I had a good idea what’s going on here. I currently have 2 v9.1.1 installs:

The first has a broken top nav block that always refreshes to the home page with the attached #anchor. (Is this how it’s acting for you? I’m not using pretty url’s so have index.php attached.)

The second install, I believe I have this issue fixed. In this install I can add an external link directly under the home page. Call it footer, link to #footer, and choose NOT to open in new window. Then drop your #footer anchor in a footer global area. No matter what page of the site you are on, the footer link in the top nav block will zip the user to the footer of the page. Is that what you’re looking for. By all appearances and my quick testing that is how the autonav block is rendering it, although I’ve never utilized it before!

#6

But might be worth submitting an issue to ask why this behaves differently than the autonav as well.

@EvanCooper PR enroute…

1 Like
#7

@rosie607 try implementing these changes and let me know if you have any issues or if this gets it working as expected!

#8

Awesome, thanks enlil!

#9

Updated fix for this issue: https://github.com/concretecms/concretecms/pull/10776

#10

Final draft has been merged to core. This will be fixed in next release…

1 Like