Kevin Powell - Community•2y ago

Why is my nav not responsive?

I don't know why my header is not responsive. I've been looking around for about an hour and I can't seem to find what's wrong. What's the problem with my code? I'm using tailwind for the styling, the rest is pure React.

import React, { FC, ReactNode } from 'react'
import DiscordLogo from './svg/DiscordLogo';

type Props = {}

const headerLinks = [
    {
        content: 'Download'
    },
    {
        content: 'Nitro'
    },
    {
        content: 'Discover'
    },
    {
        content: 'Safety'
    },
    {
        content: 'Support'
    },
    {
        content: 'Blog'
    },
    {
        content: 'Careers'
    }
];

export const Header: FC<Props> = (props) => {
    return (
        <header>
            <nav className='flex justify-between items-center bg-emerald-400 flex-row h-20'>
                <DiscordLogo className='text-white' />
                <ul className='flex flex-row'>
                    {headerLinks.map((link, index) => (
                        <HeaderLink key={index} content={link.content} className='text-white text-lg font-bold hover:underline underline-offset-1
                        p-3 mx-3'>
                            {link.content}
                        </HeaderLink>
                    ))}
                </ul>
                <Button className='rounded-full bg-white text-black cursor-pointer 
                    hover:shadow-lg 
                    hover:text-blurple transition
                    duration-200 ease-in-out
                    '
                >
                    Login
                </Button>
            </nav>
        </header>
    )
}

interface HeaderLinkProps {
    children: ReactNode;
    content: string;
    className?: string;
}

const HeaderLink: FC<HeaderLinkProps> = ({ content, children, className }) => {
    return (
        <li className='px-4'>
            <a href='#' className={`${className}`}>
                {children}
            </a>
        </li>
    )
}

import React, { FC, ReactNode } from 'react'
import DiscordLogo from './svg/DiscordLogo';

type Props = {}

const headerLinks = [
    {
        content: 'Download'
    },
    {
        content: 'Nitro'
    },
    {
        content: 'Discover'
    },
    {
        content: 'Safety'
    },
    {
        content: 'Support'
    },
    {
        content: 'Blog'
    },
    {
        content: 'Careers'
    }
];

export const Header: FC<Props> = (props) => {
    return (
        <header>
            <nav className='flex justify-between items-center bg-emerald-400 flex-row h-20'>
                <DiscordLogo className='text-white' />
                <ul className='flex flex-row'>
                    {headerLinks.map((link, index) => (
                        <HeaderLink key={index} content={link.content} className='text-white text-lg font-bold hover:underline underline-offset-1
                        p-3 mx-3'>
                            {link.content}
                        </HeaderLink>
                    ))}
                </ul>
                <Button className='rounded-full bg-white text-black cursor-pointer 
                    hover:shadow-lg 
                    hover:text-blurple transition
                    duration-200 ease-in-out
                    '
                >
                    Login
                </Button>
            </nav>
        </header>
    )
}

interface HeaderLinkProps {
    children: ReactNode;
    content: string;
    className?: string;
}

const HeaderLink: FC<HeaderLinkProps> = ({ content, children, className }) => {
    return (
        <li className='px-4'>
            <a href='#' className={`${className}`}>
                {children}
            </a>
        </li>
    )
}

5 Replies

ademondev•2y ago

interface ButtonInterface {
    children: ReactNode;
    className?: string;

}

const Button: FC<ButtonInterface> = ({ children, className }) => {
    return (
        <a
            className={`px-6 py-2 font-bold ${className}`}
        >
            {children}
        </a>
    )
}

interface ButtonInterface {
    children: ReactNode;
    className?: string;

}

const Button: FC<ButtonInterface> = ({ children, className }) => {
    return (
        <a
            className={`px-6 py-2 font-bold ${className}`}
        >
            {children}
        </a>
    )
}

Unknown User•2y ago

Message Not Public

ademondev•2y ago

It's actually a custom color! I'm making a Discord landing page clone and set up the colors in tailwind.config.cjs to use in tailwind I hadn't thought about that! Thanks Couldn't make codesandbox work

Unknown User•2y ago

Message Not Public

Jochem•2y ago

you should also be able to copy the contents of any tag in the inspector, and get an HTML version of your page after React has rendered it

Gaming

Programming

Why is my nav not responsive?