This component will hold your logo, nav links, and a CTA button. On mobile it will automatically collapse into a hamburger button.

Location: src/components/Header.svelte

Header.svelte

​
Setup

To change links you can edit the navLinks array:

Updating the links array will change both desktop and mobile nav!
Header.svelte
<script lang="ts>
    ...
    const navLinks = [
        { name: 'Link Name', href: '#link-name' },
        ...
    ];
    ...
</script>
To utilize the scrolling feature, you will need to add the href chosen for the nav link to an element on the page. See the Pricing.svelte component for a demo.
BlogHero