I can't make my Navbar responsive and I don't know why. When I make a const in the Layout.server.jsx, that make an error.
I think I can't make a onClick event on a button, but I don't know why and how to resolve it.
You can find the git repository here: https://github.com/imnotremi/hydrogen-test
Please note that in the hydrogen.config.js
, you have to enter the free to use credential of hydrogen :
Shopify Domain : "hydrogen-preview.myshopify.com" Storfront Acces Token : "3b580e70970c4528da70c98e097c2fa0"
Here's my code :
import { useShopQuery, CacheLong, gql, Seo, Link } from "@shopify/hydrogen";
import { Suspense } from "react";
import CartBubble from "./CartBubble.client";
export default function Layout({children}) {
const data = useShopQuery({
query: SHOP_QUERY,
cache: CacheLong(),
preload: true,
});
const { data: { shop }, } = data;
return (
<>
<Seo
type="defaultSeo"
data={{
title: shop.name,
description: shop.description
}}
/>
<header className="">
<div className="text-center bg-transparent">
<div className=" container flex items-center justify-between py-4 ">
<Link to="/" className=" font-bold logo min-w-[33.33%]">
{shop.name}
</Link>
<ul className=" flex place-self-center text-center justify-around list-none font-nav gap-3 max-w-[33.33%]">
<li className="text-slate-600 hover:text-slate-800"><a href="/catalog">Catalog</a></li>
<li className="text-slate-600 hover:text-slate-800"><a href="/collections/freestyle">Freestyle</a></li>
<li className="text-slate-600 hover:text-slate-800"><a href="/Aboutus">About us</a></li>
</ul>
<Link to="/cart" className="flex items-center justify-end font-nav gap-3 w-[33.33%] text-slate-600 hover:text-slate-800">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
<path strokeLinecap="round" strokeLinejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
</svg>
<CartBubble />
</Link>
</div>
</div>
</header>
<main>
<Suspense>{children}</Suspense>
</main>
</>
); }
const SHOP_QUERY = gql`
query ShopInfo {
shop {
name
description
}
}
`;
I have try to make a const in Layout.server.jsx, also to create a Layout.client.jsx component but that doesn't work either.
I have try to make a const in Layout.server.jsx, also to create a Layout.client.jsx component but that doesn't work either.
I'm not familiar with
shopify-hydrogen
. But I would give you idea of how this can be done purely intailwindcss
You'll have to work with
relative
absolute
andz-index
tailwind classes to overlap the navbar on the contents of the page.Logic:
Have parent
relative
havingz-index
value less than the childabsolute
div which will be used for navbar.Output in large device:
Output in smaller device:
Code:
Further more you can use this tailwind play link
Extra : Toggle mobile navbar using hamburger menu
Output on large devices
Output in small device with
hamburger menu
When clicked on
hamburger menu
Code: