Transparent Header


I’d like a transparent Nav Bar, so I assume I have to put it over the background to see anything behind it… but as soon as I do I get a large gap above the header


import React from 'react';

import { NavHeader } from '../components/NavHeader';

import './pageBasket.css';
import logo from '../stories/assets/Basketball.svg';

interface BasketPageProps {
  user?: {};
  onLogin?: () => void;
  onLogout?: () => void;
  onCreateAccount?: () => void;

export const BasketPage = ({ user, onLogin, onLogout, onCreateAccount }: BasketPageProps) => (
    {/* <header className="App-header bg-image" > */}


    <header className="App-header bg-image" >

        Edit <code>src/App.tsx</code> and save to reload.
      <img src={logo} className="App-logo" alt="logo" />
    </header >

As this seems to primarily about presentation, I’ll move this over to the good people in the HTML+CSS forum.

1 Like

If your header is transparent and there is nothing behind it then you will see nothing.:slight_smile:

That in essence is your problem. Either you move the background image under your header so you can see it or you remove the header from the flow so that the background slides underneath.

Looking at your code your .bg-image class has the position:fixed commented out and I’m guessing that you need to reinstate that along with the left and top co-ordinates (0,0).

If I add that code in devtools and remove the padding from the body I get this design.

Of course it all depends on what you were trying to achieve.

1 Like

yes, this should work! thank you. I do want to keep the header fixed at the top… but I can start a different thread for that If I’m still stuck. This will be good for proof of concept right now. Thank you.

1 Like

This is the closest to what I want… but I can’t figure out what’s pushing it down so far?

Did you remember the top:0?

I can’t find what it’s coming off of… I think it’s because I took a shortcut at the beginning and am tempted to start over. Having a <Header/> inside of a <header/> has a bad code smell and I’m probably clashing name spaces somewhere

You need top:0 here s shown where I added it in devtools.

Note that you still have padding on the body element so if you want the fixed header to match that image then you would need top:1rem, left:1rem, right:1rem and width:auto.

ah, thank you! is much better now… exactly as you described it!


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.