How can I make navigation link working with Elate Hugo teme

Adding a link like the following to navigation bar (./layouts/partials/nav.html) of Elate teme, doesn’t work

<li><a href="{{ $.Site.BaseURL }}promote"><span>Promote</span></a></li>

it produce apparently correct html source, but linking simply goes nowhere:

<header role="banner" id="fh5co-header">
    <div class="container">
            <nav class="navbar navbar-default">
                <div class="navbar-header">   
                    <a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"><i></i></a>
                    <a class="navbar-brand" href="//localhost:1313/">Smart City Digest</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                  <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="#" data-nav-section="home"><span>Home</span></a></li>
                    <li><a href="/promote"><span>Promote</span></a></li>
                    <li><a href="#" data-nav-section="contact"><span>Contact</span></a></li>
                  </ul>
                </div>
            </nav>
    </div>
</header>

… it has something to do with #navbar, if I drop it off from <div id="navbar" class="navbar-collapse collapse"> like this: <div id="" class="navbar-collapse collapse"> the link works again, even if the entire navigation layout is broken of course.

So what is the correct way to add link to new entire pages which are not “predefined” like sessions in the partials?

Ok done … I found out this snippet in the original js code @ ./themes/hugo-elate/static/js/main.js :

			if ( $('#navbar').is(':visible') ) {
		                $('#navbar a:not([class="external"])').click(function(event){
				navbar = $('#navbar');
		                var $el = $('#navbar > ul');

then I just add ‘external’ class to the link like this :

<li><a href="{{ $.Site.BaseURL }}promote" class="external"><span>Promote</span></a></li>

and now it works!

1 Like

I had similar issue with another theme: Mediumish Theme by WowThemes.net. ‘baseURL’ was set in config.toml but wasn’t honored in the navbar. I replace in layouts/partials/_shared/navbar.html the following

from
<a class="navbar-brand" href="{{ .Site.BaseURL }}/">

to
<a class="navbar-brand" href="{{ "/" }}">

Then it worked as expected.