Work to emulate the WP Business Theme

This page is a testing page - I used it to develop the menu system for the Village Hall website when I was of the opinion that I would do a complete re-write.

I have stylesheets linked just to show how the button and function were supposed to work.

The Menu

What I really needed a new function that deconstructed the menu button action. This button seems to work using the existing function and the header class (which determines the colour and shadow)

Having decided to stick with the Wordpress.com hosting for the Village Hall website I designed a template for pages written in my code that emulates the WP Business Theme.

Unlike the theme that was originally (2017 "Twentyseventeen" I think) the Business Theme was more traditionally responsive. It had a top menu that reconfigured on a phone screen and somewhat ressembled my responsive design. The mobile menu had an open and close button which I emulated by adapting the CSS and JavaScript from my fixed bottom menu.

The CSS is: wp_emulate2.css

The JavaScript:

// the function controlling the Responsive Top Menu
function myFunction2() {
  var x = document.getElementById("menu");
  if (x.className === "header-right") {
    x.className += " responsive";
   var y = document.getElementById("thebutton");
  y.innerHTML =  "Close menu" ;
 } else {
    x.className = "header-right";
// need to change menu to close
  var y = document.getElementById("thebutton");
  y.innerHTML =  "Menu" ;
  }
}

The class header-right was a "hangover" from my original rwd.css and could be changed to something like topnav.

The Open/close button:

Here I need to add the CSS for the button on this page. The responsive bit header-right should be ignored.

The use to empulate a Wordpres theme