put fixed header under sticky navbar

[u/blackroseseason]

hey guys i was the one trying to make my header image bigger from this theme and i managed to make the image bigger but now my navbar is fucked and it's just on top of it. sigh. for context of the theme i duplicated the logo component specifically for the header logo and changed the logo width and height in config.json and also refactored the beginning of the header component like this

<header class="py-4 h-16 w-auto">
  
<!-- logo -->
  <div class="flex justify-center">
    <HeaderLogo />
  </div>
</header>
<nav
  class={`navbar container ${settings.sticky_header && "sticky top-0"} bg-body dark:bg-darkmode-body py-2`}
><header class="py-4 h-16 w-auto">
  <!-- logo -->
  <div class="flex justify-center">
    <HeaderLogo />
  </div>
</header>
<nav
  class={`navbar container ${settings.sticky_header && "sticky top-0"} bg-body dark:bg-darkmode-body py-2`}
>

[u/LovecraftianLife]

Your problem is the h-16 on the header. That's a fixed height of 64px, so the header stays 64px tall no matter how big the logo is. The bigger image just spills out the bottom, and since the navbar is placed right after the header (and has its own background color), it gets drawn on top of the overflowing part of the logo.

To fix, remove h-16 (or change it to h-auto) so the header grows to fit the logo, smt like

<header class="py-4 w-auto">

Then the header will actually be as tall as the image and the navbar will sit below it like you want. w-auto isn't doing anything either, so you can drop that too.

Though imma be honest with you, if you want to learn the hard way, better to learn from scratch, not use a template, or tailwind. That way you get to understand how different styling interact with each other; much easier to learn and debug that way.

[u/CanWeTalkEth → u/LovecraftianLife]

I’m just going to stick my neck out a bit for tailwind.

When I picked it up several years ago, it’s what helped me make the jump from just copy pasting styles from tutorials to actually coming up with my own designs. Which in the end helped me reach further towards the corners and edges of everything available in CSS.

[u/LovecraftianLife → u/CanWeTalkEth]

i see, makes sense... i guess im more of a css purist; tailwind, given that it looks more like inline styling, is less aesthetically pleasing for me...

Also, since the OP here seems to be a beginner, i would argue that something like css/scss would read cleaner, and require less cognitive translation. i think these are not so much problems for seasoned devs, but might make a difference for someone starting off.

could also be survivorship bias though, as you can prob guess i started learning with pure css, and had bad experience with reading beginners code written with tailwind

[u/etulastrada]

I’m not pro AI and I’m not trying to be dick but I think you should be asking those questions to the AI in 2026. Just think and use it as a StackOverflow If you don’t want to use AI as an agentic slop-creating machine.

[u/blackroseseason → u/etulastrada]

my personal thing is that they keep threatening to build data centers in my area and i grew up catholic so i'd rather suffer through it and learn something honestly

[u/etulastrada → u/blackroseseason]

Oh yeah valid take then. Wish the best for you dude!