v1.1.1 Submit button on contact form not working

[hrishikesh-k]

Hello!

I just noticed that v2.0.0 was released and it looks even better. More importantly, it already has fixed the issue described here. However, I've now customised v1.1.1 a lot and I am happy with the result. So, merging with v2.0.0 will be a big task for me.

The problem is, I just noticed that the Submit button of contact form on the contact page isn't working in the mobile version. I've narrowed the problem down to the point that it stops working at the 800px breakpoint, that is, when the sidebar navigation appears instead of the default desktop navigation.

Can this be considered for fixing? It'd be a great help.

[akzhy]

Hey, I advise you to switch to v2, but if you surely can't then add the file https://github.com/akzhy/gatsby-starter-elemental/blob/master/src/components/navigation.js to your project. Then import Sidebar from the above file instead of react-sidebar on components/navbar.js Then replace the entire Sidebar Component (line 91-111) with

<Sidebar open={this.state.sidebarOpen} onChange={this.onSetSidebarOpen}>
    <SidebarContents/>
</Sidebar>

See if it works

[hrishikesh-k]

I'm not sure if I did it right, but, I'm now getting just a blank white page with localhost:8000 as the title. Even the Developer Tools are all empty, however, Gatsby didn't give any error while building.

Here's what I did. I downloaded the file from the link you gave and put in in my src/components directory. Then, in src/components/navbar.js, I changed import Sidebar from "react-sidebar"; to import Sidebar from "./navbar.js"; and replaced the entire Sidebar component in the file with the code you mentioned above. If I have done it all correctly, that sadly doesn't work. 😢

UPDATE: My bad, I had imported it wrong. Now, I changed the import statement to import Sidebar from "./navigation.js";. However, an error in Gatsby build popped up: Can't resolve 'react-feather' in 'C:\Users\Hrishikesh\Files\Node.js Websites\HriTech\src\components'. It'll probably go after I install the dependency.

[akzhy]

Hmm, that is weird. Have you tried

gatsby clean
gatsby develop

[akzhy]

Hmm, that is weird. Have you tried

gatsby clean
gatsby develop

[hrishikesh-k]

@akzhy Yes, I did that. Now, even after adding react feather dependency, it won't work. navigation.js has almost all of the import statements that are absent in 1.1.1

[akzhy]

Oh wait, I am absolutely sorry I linked the wrong file. https://www.github.com/akzhy/gatsby-starter-elemental/tree/master/src/components/sidebar.js is the file to be added. It has no dependencies

[hrishikesh-k]

Oh, got it. I used the file and updated the navbar.js and yeah, it works,. The button problem is solved. However now, my navbar is all without CSS styling. The layout is all messed up. I'll try fixing it myself and I hope I succeed. Thank you for the help.

[akzhy]

Okay, it might be due to the placement of the sidebar, must have messed up some css selector. Leave a message if you can't get it work.

[hrishikesh-k]

I'm really sorry, but, at my current stage of expertise, this seems too much messed up. The class names and style sheet seem correct to me, but, it's not really having any effect.

At this stage, the background colour of the sidebar is missing, logo is being shown at its original PNG size, text links have lost styling and theme icons are visible at a huge size.

[akzhy]

Hey, try

<Sidebar open={this.state.sidebarOpen} onChange={this.onSetSidebarOpen}>
    <div className="sidebar-content">
       <SidebarContents/>
    </div>
</Sidebar>

I am on phone, so I can't try these myself. If that doesn't solve it I will try and create a working demo tomorrow.

[hrishikesh-k]

That fixes a lot of stuff, however, the sidebar was somewhat weird...

I added height: 100% in navbar.less and that fixes it.

Everything seems to work. Thanks a lot.