Layout of my project is broken on Netlify

Support
,
1

Website’s URL: Coffee Shop
Screenshot of my localhost: Gatsby project

Hi there!

When I develop my project locally everything is working, either on Brave, Firefox or even on Chrome but when I deployed my website, the navbar’s layout doesn’t look the same. Any ideas on why’s it happening?

2

without seeing the code of your local version, it is a little tricky to compare, but the first thing i would ask is whether you are sure you are adding the most up to date files to git, and also whether you are sure your last build & deploy went through correctly. is that the case?

3

Hi there and sorry about that, I totally forgot! Here’s the github repo: Coffee Shop
It’s developing locally and the Netlify’s build log is here:

2:16:43 AM: Waiting for other deploys from your team to complete
2:16:57 AM: Build ready to start
2:17:00 AM: build-image version: b0258b965567defc4a2d7e2f2dec2e00c8f73ad6
2:17:00 AM: build-image tag: v3.4.1
2:17:00 AM: buildbot version: bca3bbf1ce7c7ca2e2192b1683becc1d98c88c5b
2:17:01 AM: Fetching cached dependencies
2:17:01 AM: Starting to download cache of 163.5MB
2:17:02 AM: Finished downloading cache in 812.391799ms
2:17:02 AM: Starting to extract cache
2:17:10 AM: Finished extracting cache in 8.170400227s
2:17:10 AM: Finished fetching cache in 9.036452973s
2:17:10 AM: Starting to prepare the repo for build
2:17:11 AM: Preparing Git Reference refs/heads/master
2:17:12 AM: Different publish path detected, going to use the one specified in the Netlify configuration file: 'public' versus 'public/' in the Netlify UI
2:17:12 AM: Starting build script
2:17:12 AM: Installing dependencies
2:17:12 AM: Python version set to 2.7
2:17:13 AM: Started restoring cached node version
2:17:16 AM: Finished restoring cached node version
2:17:16 AM: v12.18.0 is already installed.
2:17:17 AM: Now using node v12.18.0 (npm v6.14.4)
2:17:17 AM: Started restoring cached build plugins
2:17:17 AM: Finished restoring cached build plugins
2:17:17 AM: Attempting ruby version 2.7.1, read from environment
2:17:19 AM: Using ruby version 2.7.1
2:17:19 AM: Using PHP version 5.6
2:17:19 AM: 5.2 is already installed.
2:17:19 AM: Using Swift version 5.2
2:17:19 AM: Started restoring cached node modules
2:17:19 AM: Finished restoring cached node modules
2:17:19 AM: Started restoring cached yarn cache
2:17:19 AM: Finished restoring cached yarn cache
2:17:20 AM: Installing NPM modules using Yarn version 1.22.4
2:17:20 AM: yarn install v1.22.4
2:17:20 AM: warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
2:17:20 AM: [1/4] Resolving packages...
2:17:24 AM: [2/4] Fetching packages...
2:17:29 AM: warning url-loader@1.1.2: Invalid bin field for "url-loader".
2:17:59 AM: info fsevents@2.1.3: The platform "linux" is incompatible with this module.
2:17:59 AM: info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
2:17:59 AM: info fsevents@1.2.13: The platform "linux" is incompatible with this module.
2:17:59 AM: info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
2:17:59 AM: [3/4] Linking dependencies...
2:17:59 AM: warning " > bootstrap@4.5.2" has unmet peer dependency "jquery@1.9.1 - 3".
2:17:59 AM: warning " > bootstrap@4.5.2" has unmet peer dependency "popper.js@^1.16.1".
2:17:59 AM: warning "gatsby > @pmmmwh/react-refresh-webpack-plugin@0.3.3" has incorrect peer dependency "react-refresh@^0.8.2".
2:17:59 AM: warning "gatsby > @typescript-eslint/eslint-plugin > tsutils@3.17.1" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
2:17:59 AM: warning "gatsby > gatsby-cli > gatsby-recipes > gatsby-interface@0.0.166" has incorrect peer dependency "gatsby@2.6.0".
2:17:59 AM: warning "gatsby > gatsby-cli > gatsby-recipes > gatsby-interface@0.0.166" has incorrect peer dependency "react@16.8.1".
2:17:59 AM: warning "gatsby > gatsby-cli > gatsby-recipes > gatsby-interface@0.0.166" has incorrect peer dependency "react-dom@16.8.1".
2:17:59 AM: warning " > styled-components@5.1.1" has unmet peer dependency "react-is@>= 16.8.0".
2:18:18 AM: [4/4] Building fresh packages...
2:18:23 AM: success Saved lockfile.
2:18:23 AM: Done in 62.53s.
2:18:23 AM: NPM modules installed using Yarn
2:18:23 AM: Started restoring cached go cache
2:18:23 AM: Finished restoring cached go cache
2:18:23 AM: go version go1.14.4 linux/amd64
2:18:23 AM: go version go1.14.4 linux/amd64
2:18:23 AM: Installing missing commands
2:18:23 AM: Verify run directory
2:18:24 AM: ​
2:18:24 AM: ┌─────────────────────────────┐
2:18:24 AM: │        Netlify Build        │
2:18:24 AM: └─────────────────────────────┘
2:18:24 AM: ​
2:18:24 AM: ❯ Version
2:18:24 AM:   @netlify/build 3.1.10
2:18:24 AM: ​
2:18:24 AM: ❯ Flags
2:18:24 AM:   deployId: 5f2ce3bbdc5d9000074b4154
2:18:24 AM:   mode: buildbot
2:18:24 AM:   timersFile: /tmp/substage_times.txt
2:18:24 AM: ​
2:18:24 AM: ❯ Current directory
2:18:24 AM:   /opt/build/repo
2:18:24 AM: ​
2:18:24 AM: ❯ Config file
2:18:24 AM:   No config file was defined: using default values.
2:18:24 AM: ​
2:18:24 AM: ❯ Context
2:18:24 AM:   production
2:18:24 AM: ​
2:18:24 AM: ┌───────────────────────────────────┐
2:18:24 AM: │ 1. Build command from Netlify app │
2:18:24 AM: └───────────────────────────────────┘
2:18:24 AM: ​
2:18:24 AM: $ gatsby build
2:18:28 AM: success open and validate gatsby-configs - 0.071s
2:18:29 AM: success load plugins - 0.625s
2:18:29 AM: success onPreInit - 0.017s
2:18:29 AM: success delete html and css files from previous builds - 0.018s
2:18:29 AM: success initialize cache - 0.010s
2:18:29 AM: success copy gatsby files - 0.083s
2:18:29 AM: success onPreBootstrap - 0.011s
2:18:29 AM: success createSchemaCustomization - 0.020s
2:18:29 AM: success Checking for changed pages - 0.000s
2:18:29 AM: success source and transform nodes - 0.097s
2:18:30 AM: success building schema - 0.413s
2:18:30 AM: success createPages - 0.001s
2:18:30 AM: success Checking for changed pages - 0.000s
2:18:30 AM: success createPagesStatefully - 0.093s
2:18:30 AM: success update schema - 0.028s
2:18:30 AM: success onPreExtractQueries - 0.001s
2:18:30 AM: success extract queries from components - 0.471s
2:18:30 AM: success write out redirect data - 0.001s
2:18:30 AM: success Build manifest and related icons - 0.236s
2:18:30 AM: success onPostBootstrap - 0.238s
2:18:30 AM: info bootstrap finished - 5.999s
2:18:31 AM: success run static queries - 0.019s - 1/1 52.49/s
2:18:31 AM: success run page queries - 0.013s - 8/8 627.98/s
2:18:31 AM: success write out requires - 0.004s
2:19:09 AM: success Building production JavaScript and CSS bundles - 38.185s
2:19:09 AM: success Rewriting compilation hashes - 0.007s
2:19:14 AM: success Building static HTML for pages - 4.974s - 8/8 1.61/s
2:19:14 AM: success onPostBuild - 0.001s
2:19:14 AM: info Done building in 49.493373491 sec
2:19:14 AM: ​
2:19:14 AM: (build.command completed in 49.7s)
2:19:14 AM: ​
2:19:14 AM: ┌─────────────────────────────┐
2:19:14 AM: │   Netlify Build Complete    │
2:19:14 AM: └─────────────────────────────┘
2:19:14 AM: ​
2:19:14 AM: (Netlify Build completed in 49.7s)
2:19:14 AM: Caching artifacts
2:19:14 AM: Started saving node modules
2:19:14 AM: Finished saving node modules
2:19:14 AM: Started saving build plugins
2:19:14 AM: Finished saving build plugins
2:19:14 AM: Started saving yarn cache
2:19:14 AM: Finished saving yarn cache
2:19:14 AM: Started saving pip cache
2:19:14 AM: Finished saving pip cache
2:19:14 AM: Started saving emacs cask dependencies
2:19:14 AM: Finished saving emacs cask dependencies
2:19:14 AM: Started saving maven dependencies
2:19:14 AM: Finished saving maven dependencies
2:19:14 AM: Started saving boot dependencies
2:19:14 AM: Finished saving boot dependencies
2:19:14 AM: Started saving go dependencies
2:19:14 AM: Finished saving go dependencies
2:19:14 AM: Build script success
2:19:14 AM: Starting to deploy site from 'public'
2:19:15 AM: Creating deploy tree 
2:19:15 AM: Creating deploy upload records
2:19:17 AM: 29 new files to upload
2:19:17 AM: 0 new functions to upload
2:19:21 AM: Starting post processing
2:19:21 AM: Post processing - HTML
2:19:23 AM: Post processing - redirect rules
2:19:23 AM: Post processing - header rules
2:19:23 AM: Post processing done
2:19:24 AM: Site is live
2:19:47 AM: Finished processing build request in 2m47.565921773s
4

I noticed something interesting which is when you click to another page and then back to the homepage, the nav layout is fixed.

It seems to be broken initially on the homepage because the middle link does not have the same “nav-link” class as the other two. It seems to be a copy of the “pricing” link with the “about” link inside it.

I would go back and look through your components, I personally don’t do much React/Gatsby stuff right now so it’s hard for me to give you a really specific answer, but I hope that helps.

5

Hi there, unfortunately that didn’t change the current navbar layout :c

6

In the generated markup for the homepage you’re still having the same issue, just in a different order now.

This is the markup for the links on the homepage:

<div class="mr-auto navbar-nav">
	<a href="#" class="nav-link" role="button">
		<a aria-current="page" class="sc-AxjAm bcMPWx" href="/">Homepage</a>
	</a>
	<a aria-current="page" class="sc-AxjAm bcMPWx" href="/">
		<a class="sc-AxjAm bcMPWx" href="/pricing">Pricing</a>
	</a>
	<a href="#" class="nav-link" role="button">
		<a class="sc-AxjAm bcMPWx" href="/about">About</a>
	</a>
	<a class="sc-AxjAm bcMPWx" href="/pricing">
		<a class="sc-AxjAm bcMPWx" href="/contact">Contact</a>
	</a>
</div>

See how there are now two links without the nav-link class and the contact page is wrapped in the “pricing” anchor tag.

I can assure you that is definitely causing your layout problem, although without seeing your local code it’s hard to say why it’s just building the initial load of the homepage like that.

Here the same markup when you click onto another page or then back to the homepage:

<div class="mr-auto navbar-nav">
	<a href="#" class="nav-link" role="button">
		<a aria-current="page" class="sc-AxjAm bcMPWx" href="/">Homepage</a>
	</a>
	<a href="#" class="nav-link" role="button">
		<a class="sc-AxjAm bcMPWx" href="/pricing">Pricing</a>
	</a>
	<a href="#" class="nav-link" role="button">
		<a class="sc-AxjAm bcMPWx" href="/about">About</a>
	</a>
	<a href="#" class="nav-link" role="button">
		<a class="sc-AxjAm bcMPWx" href="/contact">Contact</a>
	</a>
</div>

Notice here they are all using the nav-link class, no generated classes and there is no issue with contact being wrapped in the link of “pricing”.

Do you see this issue on the production build locally? You can see this by first running gatsby build then gatsby serve.

2 Likes
7

Wow, that was my mistake! I was trying a lot of things, including adding nav-link but probably I was doing it in the wrong way, thank you so much!