Logo Design

Now that we have a navigation bar and footer, let’s customise them by adding:

• A logo to the navigation bar and footer
• A custom footer message
• Links to other pages in the website

Customising the Navigation Bar

Adding a Logo

To add a logo to the navigation bar, we need to update the HeaderWithSearch component.

Open the HeaderWithSearch component in your code editor. This is found at app/components/organisms/HeaderWithSearch.tsx.

Tip

Jump to file in VS Code

You can jump straight to any project file in VS Code by typing CTRL + P (or CMD + P on macOS), or clicking the search bar at the top of your screen, and typing in the start of the filename.

You will see a list of files that match your search. Select the file you want to open.

Adding a section for the logo

Look carefully at your navbar header in the browser, and think carefully where you want to place the logo.

Typically, the logo is placed on the left side of the navigation bar:

Challenge

Look carefully at the HeaderWithSearch component and decide where you should place a new div to encapsulate the new logo.

HeaderWithSearch.tsx

import { useMatches } from '@remix-run/react'
import { SearchBar } from '../molecules/SearchBar'
import LoginOrUserDropdown from './LoginOrUserDropdown'

export default function HeaderWithSearch() {
  const matches = useMatches()
  const isOnSearchPage = matches.find(m => m.id === 'routes/users+/index')
  const searchBar = isOnSearchPage ? null : <SearchBar status="idle" />

  return (
    <header className="bg-primary/10 py-6 dark:bg-dark-primary/10">
      <nav className="container flex flex-wrap items-center justify-between gap-4 sm:flex-nowrap md:gap-8">
        <div className="ml-auto hidden max-w-sm flex-1 sm:block">
          {searchBar}
        </div>
        <div className="flex items-center gap-10">
          <LoginOrUserDropdown />
        </div>
        <div className="block w-full sm:hidden">{searchBar}</div>
      </nav>
    </header>
  )
}

For the time being, just place the code below at the spot you think is best:

<div>
  <span className="text-sm text-foreground">Epic News</span>
</div>

When you have added your text, compare your solution with the one below:

HeaderWithSearch.tsx

import { useMatches } from '@remix-run/react'
import { SearchBar } from '../molecules/SearchBar'
import LoginOrUserDropdown from './LoginOrUserDropdown'

export default function HeaderWithSearch() {
  const matches = useMatches()
  const isOnSearchPage = matches.find(m => m.id === 'routes/users+/index')
  const searchBar = isOnSearchPage ? null : <SearchBar status="idle" />

  return (
    <header className="dark:bg-dark-primary/10 bg-primary/10 py-6">
      <nav className="container flex flex-wrap items-center justify-between gap-4 sm:flex-nowrap md:gap-8">
        <div>
          <span className="text-sm text-foreground">Epic News</span>
        </div>
        <div className="ml-auto hidden max-w-sm flex-1 sm:block">
          {searchBar}
        </div>
        <div className="flex items-center gap-10">
          <LoginOrUserDropdown />
        </div>
        <div className="block w-full sm:hidden">{searchBar}</div>
      </nav>
    </header>
  )
}

With this in place, your navbar should look something like this:

Click to reveal

Create a logo

Now that we have a placeholder for our logo, let’s create a logo for our site.

One way you could design a logo quickly is to use a logo generator. These tools allow you to create a logo by selecting a few options, such as colours, fonts, and icons.

Alternatively, if you want more control over the design of your logo, you can use a design tool like Figma.

Logo Generator

You can use an online logo generator to create a logo for your site. This will result in a rather generic email, but is a quick and easy solution.

Try the site below if you want to use a logo generator:

https://tailwind-generator.com/logo-generator/generator

Figma

Open the Figma file for your Epic News wireframes, and create a logo that fits the design of the site.

Tip

Pick up some tips for a simple but effective logo design in the video below:

Once you are happy with your logo, export it as an PNG file.

Summary

In this tutorial we have:

• Added a placeholder for the logo in the navigation bar
• Created a logo for the site using Figma
• Exported the logo as a PNG file

Next Steps

In the next section, we will add the logo to the navigation bar and footer.