Suggestion : responsive header

[HuebraG]

Hi ! I realized the current header wasn't responsive. It's okay when there are only two links in the menu, but when you have 4 or more, it becomes annoying. If I may suggest a solution, here what I came with : In the header.php

...
<input type="checkbox" id="drop" />
<label for="drop" class="toggle">Menu</label>
<menu id="menu">
     <!-- Sample menu items -->
     <a href="<?=$ccsite->root?>">Home</a>
     <a href="<?=$ccsite->root?>comic/archive">Archive</a>
</menu>

...

and in styles.css

  .toggle, #drop {
    display: none;
  }

  @media all and (max-width: 480px) {
    #menu {
        display: none;
    }

    .toggle {
        text-align: center;
        background: #ccc;
        display: block;
        padding: 20px;
        color: #000;
        font-size: 1.2em;
        cursor: pointer;
    }

    #drop:checked~#menu {
      display: flex;
      flex-direction: column;
    }

    #drop:checked+.toggle {
        background-color: rgba(0,0,0, 0.3);
    }

  } 

In any case, thanks for your work !

[erintheunready]

Hi, Thanks for pointing this out. I chose a different way to address the issue but this should solve the responsiveness issue on the basic template. This fix will be present in the next pushed update. Cheers, Erin

On Fri, Jul 9, 2021 at 5:21 PM HuebraG @.***> wrote:

Hi ! I realized the current header wasn't responsive. It's okay when there are only two links in the menu, but when you have 4 or more, it becomes annoying. If I may suggest a solution, here what I came with : In the header.php

...

Menu Home Archive

...

and in styles.css

.toggle, #drop { display: none; }

@media all and (max-width: 480px) {

menu {

    display: none;
}

.toggle {
    text-align: center;
    background: #ccc;
    display: block;
    padding: 20px;
    color: #000;
    font-size: 1.2em;
    cursor: pointer;
}

#drop:checked~#menu {
  display: flex;
  flex-direction: column;
}

#drop:checked+.toggle {
    background-color: rgba(0,0,0, 0.3);
}

}

In any case, thanks for your work !

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or unsubscribe.