Adapting w3.css javascript navigation bar for grav


#1

Hello,
I’m learning all this as I go so please excuse my ignorance. I’ve exhausted my abilities to cut and paste bits of code until it works and now I’m just staring at it, wondering what it is so I thought it was time to ask for help.

I’m making my own, very basic, theme for grav, using the w3.css CSS framework. I’m having trouble incorporating the twig elements(?) which create a navigation menu into my theme using the w3.css navigation styling - which is from here.

I copied some (I think relevant) code from the Antimatter theme and I’ve got something partly-working but it’s a total mess. I’ll paste some bits of my attempt here but if you’d like to have a look at my theme it’s on github.

CSS LINK:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

MY NAVIGATION CODE:

<div class="w3-bar">
  {% for page in pages.children.visible %}
    {% set current_page = (page.active or page.activeChild) ? 'active' : '' %}
    <a href="{{ page.url }}" class="w3-bar-item w3-button w3-hover-pale-red">
      {{ page.menu }}
    </a>
    <a href="javascript:void(0)" class="w3-bar-item w3-button w3-right w3-hide-large w3-hide-medium w3-hover-pale-red" onclick="myNavMenu()">&#9776;</a>
  {% endfor %}
</div>

<div id="demo" class="w3-bar-block w3-pale-red w3-hide w3-hide-large w3-hide-medium">
  {% for page in pages.children.visible %}
    {% set current_page = (page.active or page.activeChild) ? 'active' : '' %}
    <a href="{{ page.url }}" class="w3-bar-item w3-button w3-hover-pale-red">
      {{ page.menu }}
    </a>
  {% endfor %}
</div>

W3.CSS MENU SCRIPT:

<script>
  function myNavMenu() {
    var x = document.getElementById("demo");
    if (x.className.indexOf("w3-show") == -1) {
      x.className += " w3-show";
    } else {
      x.className = x.className.replace(" w3-show", "");
    }
  }
</script>

I hope it’s not a pain to have to look through this stuff. I’m really not sure how to resolve it and get this menu looking right.
Please let me know if there’s other information that you need.

thanks so much for your help, I really appreciate it. bye
Adam