Adapting w3.css javascript navigation bar for grav

Support Themes & Styling
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

2

Hello ! I cannot see the result of your work, but at a first glance, there’s no real problem in your code.

Twig and w3c may have some syntax conflicts ! Maybe twig interprets some tags on the server side …

I would take a look at the server response (in network tab of your browser dev tools F12), t get the source code before w3c framework process, or just check response sources Ctrl-U …

w3c.css is not before good in performance, and quite limited. It is interesting for learning purpose, I would recommend you to use Vue.js instead.

Good luck