Simple menu in grid

HTML & CSS
1

I have created a simple menu using CSS grid

It seems okay except that the options get jumbled on small screens. I’m wondering if grid was the best choice?

2

I’ll bite :fish:

It seems to work, but your requirements aren’t very strict :slightly_smiling_face:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="css/stylesheet.css">
    <title>simple menu, grid</title>
<!--
https://www.sitepoint.com/community/t/simple-menu-in-grid/374386
https://codepen.io/gandalf458/pen/dyRWJWa
-->
    <style>
.navBox {
    display: grid;
    grid-template-columns: 8em 8em 8em 8em;
    grid-template-rows: auto;
    gap: .8em;
    justify-content: center;
    margin: 1em 0;
}
.navItem a {
    text-align: center;
}
.navItem a:hover {
    filter: grayscale(50%);
}
.navC a {
    background-color: #366;
}
.navH a {
    background-color: #406194;
}
.navM a {
    background-color: #DA612C;
}
.navB a {
    background-color: #A60035;
}
.navBox a {
    display: block;
    padding: 1.2em 0;
    text-decoration: none;
    color: #fff;
}
@media only screen and (max-width: 540px) {
    .navBox {
        grid-template-columns: 8em 8em!important;
    }
}
    </style>
</head>
<body>

<div class="navBox">
    <div class="navItem navC">
        <a href="">View Clients</a>
        <a href="">Add Client</a>
    </div>
    <div class="navItem navH">
        <a href="">View Halls</a>
        <a href="">Add Hall</a>
    </div>
    <div class="navItem navM">
        <a href="">View Managers</a>
        <a href="">Add Manager</a>
    </div>
    <div class="navItem navB">
        <a href="">View Bookings</a>
        <a href="">Add Booking</a>
    </div>
</div>

</body>
</html>
2 Likes
3

I think it would be good to keep fouir columns if possible on small screens (when in portrait orientation). I have therefore had a go at doing this with CSS Flexbox. It seems to be generally accepted that the smallest smartphones are 320 pixels wide (CSS pixels). The challenge therefore is to get everything to squeeze up to 320 pixels width if necessary. Here is my CodePen:

At 320 pixels width it appears like this:
Flex menu1

In fact with the current font size and text content it’s OK down to 285 pixels. It would not work satisfactorily on a small smartphone, as it stands, if there is a long word or if a somewhat larger font is used.

I guess CSS order property would be one way of resolving this.

2 Likes
4

Thanks, chaps. I’ll have another play…

5

Personally, for a smartphone I would just have each of the anchor elements just spread out on the phone and maybe make it a hamburger menu?

2 Likes
6

You could just add this in your media query.


  .navC {order: 1;}
  .navH {order: 2; }
  .navM {order: 3;}
  .navB {order: 4;}

e.g…

@media only screen and (max-width: 540px) {
  .navBox {
    grid-template-columns: 8em 8em;
  }
  .navC {order: 1;}
  .navH {order: 2; }
  .navM {order: 3;}
  .navB {order: 4;}

}

I’d also remove the unnecessary divs and use a nav container.

It used to be that bare anchors next to each other confused screen readers but that doesn’t seem to be the case these days.

Also remember to use a value in the href as some browsers can be weird about it even when just testing.

1 Like
7

Ah, I thought that was only for flex.

Ah, yes, I’ve done that on the “real” site. I started with even more divs. :shifty: Start big and go small! :upside_down_face:

Are two navs permitted? This is a secondary nav on the home page only.

It occurs to me as it’s a secondary nav, I could just miss it out altogether on mobile.

Thanks chaps.

8

As long as they are major sections for navigation. Generally a nav in the footer say would not be a nav element. If not using a nav element then a ul would be better but of course will need the list parents around the anchors once again.

Try and make it easier for mobile not harder :slight_smile:

1 Like
9

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