How to navigate between one-scroll-page-navigation & another page with bootstrap?

Question

I build a "one-scroll" homepage for a multi page website. I build it with bootstrap skeleton. After this design I want to add another page to build a blog.

Link to website: http://werkbaar.net/

Link to repo: https://github.com/bomengeduld/boilerplate

The problem: I am using scrollspy, so the navigation is set to scroll. Whenever I navigate to new_page I can't navigat back to home_page

My goal: To make a dropdown menu for my one-scroll home_page with navigation to other pages & blog.

Main Question: How can I navigate to another page back and fort?

I found this answer, but not sure how to apply it:

Can I create a link to another page using ScrollSpy in bootstrap, while also keeping default functionality?

Structure of nav:

   <!-- Navigation -->
    <nav class="navbar navbar-default navbar-fixed-top navbar-custom" role="navigation">
      <div class="container">
        <div class="navbar-header page-scroll">

      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                                    <span class="sr-only">Toggle navigation</span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
     </button>

    <a class="navbar-brand page-scroll" href="#header" data-toggle="collapse" data-target=".navbar-collapse.in"><img class="img-responsive" alt="logo"
                            src="/img\logo_200x38px_t.png"></a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav">
        <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
        <li class="hidden">
          <a class="page-scroll" href="#header" data-toggle="collapse" data-target=".navbar-collapse.in"></a>
        </li>
        <li>
          <a class="page-scroll" href="#welkom" data-toggle="collapse" data-target=".navbar-collapse.in">Welkom</a>
        </li>
        <li>
          <a class="page-scroll" href="#gasten" data-toggle="collapse" data-target=".navbar-collapse.in">Onze Gasten</a>
        </li>
        <li>
          <a class="page-scroll" href="#kaart" data-toggle="collapse" data-target=".navbar-collapse.in">Het Menu</a>
        </li>
        <li>
          <a class="page-scroll" href="#gastvrouw" data-toggle="collapse" data-target=".navbar-collapse.in">De Gastvrouw</a>
        </li>
        <li>
          <a class="page-scroll" href="#contact" data-toggle="collapse" data-target=".navbar-collapse.in">Contact</a>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container -->
</nav>

Structure default.html

<!DOCTYPE html>
<html lang="en">
    {% include head.html %}

    <!-- The #page-top ID is part of the scrolling feature - the data-spy and data-target are part of the built-in Bootstrap scrollspy function -->

    <body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
        {% include nav.html %}
        {% include header.html %}

    {{ content }} 

        {% include footer.html %}
        {% include scripts.html %}
    </body>
</html>

Exactly. Some buttons scroll, and some bring me to another page. — Gino Jan Ludikhuyze, Nov 07 '17 at 22:50

score 2 · Answer 1 · answered Nov 08 '17 at 11:54

You need to add a menu item to the navigation bar and fix your relative paths.

In _includes.header.html:

-    <link href="css/bootstrap.min.css" rel="stylesheet">
+    <link href="{{site.baseurl}}/css/bootstrap.min.css" rel="stylesheet">
-    <link href="css/style.css" rel="stylesheet">
+    <link href="{{site.baseurl}}/css/style.css" rel="stylesheet">

In _includes/header.html fix all the menu items with baseurl:

-          <a class="page-scroll" href="#header" data-toggle="collapse" data-target=".navbar-collapse.in"></a>
+          <a class="page-scroll" href="{{site.baseurl}}/#header" data-toggle="collapse" data-target=".navbar-collapse.in"></a>

And add the new menu item:

+       <li>
+           <a href="{{site.baseurl}}/foobar#foo" data-target=".navbar-collapse.in">Foobar</a>
+       </li>

Finally create another post where your new navigation item will navigate to, for exampe /foobar.md:

---
title: I'm other page
layout: default
---

## Foo

Hello World!

Now your link to foobar will appear as part of the scrolldown navigation bar.

Hi Marcanuy! It seems this is an alternative solution. Is it adviced to exchange a liquid syntax with the current tag linking to stylesheets? Can you elaborate please? Thanks in advance. — Gino Jan Ludikhuyze, Nov 11 '17 at 19:56
It is a good practice to add the baseurl prefix, If you ever use jekyll in a subfolder like `example.com/blog` then you will need it. — marcanuy, Nov 11 '17 at 20:28

score 1 · Answer 2 · answered Nov 08 '17 at 09:17

Use this HTML:

<ul class="nav navbar-nav">
  <li><a href="{% if page.layout == 'home' %}#top{% else %}/{% endif %}">Home</a></li>
  <li class="{% if page.layout == 'verzorging' %}active{% endif %} hidden-sm"><a href="/verzorging">Verzorging</a></li>
  <li class="{% if page.layout == 'collectie' %}active{% endif %}"><a href="{% if page.layout == 'home' %}{% else %}/{% endif %}#collectie">Collectie</a></li>
  <li><a href="{% if page.layout == 'home' %}{% else %}/{% endif %}#top" id="logo"><img src="/img/urbanwildlogo.png" /></a></li>
  <li class="hidden-sm"><a href="{% if page.layout == 'home' %}{% else %}/{% endif %}#luchtzuiverend">Luchtzuiverend</a></li>
  <li class="{% if page.layout == 'jmplants' %}active{% endif %}"><a href="/jmplants">JM Plants</a></li>
  <li class="{% if page.layout == 'contact' %}active{% endif %}"><a href="/contact">Contact</a></li>
</ul>

... and an animated scroll script (jQuery):

//make anchor tags scroll
$('.navbar a').click(function(){
    if($('body').hasClass('home') && $(this).attr('href')) {
        el = $.attr(this, 'href').replace('/','');
        $('html, body').animate({
            scrollTop: ($( el ).offset().top - 100)
        }, 500);
        if($('.navmenu.offcanvas').hasClass('in')) $('.navbar-toggle').click();
        return false;
    }
    else if (!$('body').hasClass('home')) {
        if($(this).attr('href').charAt(0)!='/' && $(this).attr('href').charAt(0)=='#') $(this).attr('href', '/'+$(this).attr('href'));
    }
});

... and a script for the scrollspy:

/* SCROLLSPY NAVBAR */
$('#navbar').on('activate.bs.scrollspy', function (e) {
    $pageTitle = $(e.target).children("a").text();
    $pagehref = $(e.target).children("a").attr('href').replace("#","").replace("/","");
    if( $("#header").attr('class') != $pagehref){
        $('.navbar li a').blur();
        $("#header").removeClass().addClass($pagehref);
    }
    function delayupdate(){
        history.pushState({}, $pageTitle , '#'+$pagehref)
    };
    setTimeout(delayupdate,500)
});

Hi Joost, thanks for the input. It worked. But I already had a jquery scrolling feature in my js folder. So I only need to add the html. — Gino Jan Ludikhuyze, Nov 10 '17 at 21:29

Gino Jan Ludikhuyze · Accepted Answer · 2017-11-11T21:32:29.693

This is the html that made it work smoothly.

<nav class="navbar navbar-default navbar-fixed-top navbar-custom" role="navigation">
  <div class="container">
    <div class="navbar-header page-scroll">

      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
      </button>

       <a class="navbar-brand" href="{% if page.layout == 'header' %}{% else %}/{% endif %}#header" id="logo"><img class="img-responsive" src="/img\logo_200x38px_t.png" /></a>
</div>


  </div>

 <div class="collapse navbar-collapse navbar-ex1-collapse">
          <ul class="nav navbar-nav">

            <li class="{% if page.layout == 'welkom' %}active{% endif %}"><a href="{% if page.layout == 'logo' %}{% else %}/{% endif %}#welkom">Welkom</a></li>

            <li class="{% if page.layout == 'gasten' %}active{% endif %}"><a href="{% if page.layout == 'logo' %}{% else %}/{% endif %}#gasten">Onze Gasten</a></li>

            <li class="{% if page.layout == 'kaart' %}active{% endif %}"><a href="{% if page.layout == 'logo' %}{% else %}/{% endif %}#kaart">Het Menu</a></li>

            <li class="{% if page.layout == 'gastvrouw' %}active{% endif %}"><a href="{% if page.layout == 'logo' %}{% else %}/{% endif %}#gastvrouw">De Gastvrouw</a></li>

            <li class="{% if page.layout == 'contact' %}active{% endif %}"><a href="{% if page.layout == 'logo' %}{% else %}/{% endif %}#contact">Contact</a></li>

            <li class="{% if page.layout == 'blog' %}active{% endif %}"><a href="/blog">Blog</a></li>


          </ul>

    </div>
  </div>
</nav>

How to navigate between one-scroll-page-navigation & another page with bootstrap?

Structure of nav:

Structure default.html

3 Answers3