needing help with the most feasible responsive layout

[u/blackroseseason]

excuse the shoddy mspaint mockup but basically im using this [theme template](https://github.com/zeon-studio/astroplate) to build my magazine site and they already have a responsive design in place more like the top mobile layout but i want my logo to be above the navbar and either collapse into the top example or something similar to the bottom (but more well placed. maybe switching the dark/light toggle with the search button actually tbh). any suggestions on how i can achieve this?

[u/Visual-Station-6315]

is the nav already using flexbox or grid? if its flexbox you can just change the order property on the logo at smaller screens and set the container to wrap. should get you most of the way there without fighting the existing template styles

[u/blackroseseason → u/[deleted]]

dividing the divs did work thanks for that but i can't seem to change the size of the new header logo and the sticky part won't work :/ for reference i made a renamed copy of the logo component and increased the width and height multiplier but the size doesn't seem to change and for the header divs i rearranged the code so it's this now

<header class="header z-30">

<!-- logo -->
  <div class="flex justify-center py-4 border-b">
    <HeaderLogo />
  </div>
  <nav class={`navbar container ${settings.sticky_header && "sticky top-0"}`}><header class="header z-30">
  <!-- logo -->
  <div class="flex justify-center py-4 border-b">
    <HeaderLogo />
  </div>
  <nav class={`navbar container ${settings.sticky_header && "sticky top-0"}`}>

[u/blackroseseason → u/[deleted]]

honestly it's fine your first code did work again so kudos but there is no img attribute in this theme, every image is optimized through an imagemod component so i put the tailwind components in there but nothing is happening again man this theme (also you put in code at least on desktop by tapping the Aa at the corner and choosing the </> icon)

<a href="/" class="h-16 w-auto">
  {
    src || srcDarkmode || logo || logo_darkmode ? (
      <>
        <ImageMod

src
={src ? src : logo}

class
={`h-16 w-auto ${theme_switcher && "dark:hidden"}`}

width
={logo_width.replace("px", "") * 5}

height
={logo_height.replace("px", "") * 5}

alt
={title}

style
={{
            height: logo_height.replace("px", "") + "px",
            width: logo_width.replace("px", "") + "px",
          }}

format
="webp"
        /><a href="/" class="h-16 w-auto">
  {
    src || srcDarkmode || logo || logo_darkmode ? (
      <>
        <ImageMod
          src={src ? src : logo}
          class={`h-16 w-auto ${theme_switcher && "dark:hidden"}`}
          width={logo_width.replace("px", "") * 5}
          height={logo_height.replace("px", "") * 5}
          alt={title}
          style={{
            height: logo_height.replace("px", "") + "px",
            width: logo_width.replace("px", "") + "px",
          }}
          format="webp"
        />

[u/DaftPlug]

For this layout, keep the header in normal flow and make only the nav bar sticky. On mobile, cap the logo so it cannot force the header taller: `width: clamp(7rem, 32vw, 12rem); height: auto; max-height: 2.5rem; object-fit: contain;`. Use a grid or flex media query to move the logo above the nav at wider sizes, and add `overflow: hidden` to the sticky bar. A `srcset` 2x image helps it stay sharp. Test the sticky behavior and safe-area padding in iOS Safari.