Why is the nav bar displayed as a square at the corner

HTML & CSS
1

Here is the code file with JQUERY
responsive.HTML (6.2 KB)

Here is a screenshot of the page on mobile

screenshot
screenshot2280×879 55.5 KB

Why do I get the nav bar as a square at the top left corner of page ?

2

You have a max-height/max-width media query that turns the postition to fixed.
That takes it out of the document flow.
The question is, how do you want it to look on such a size screen?

3

I’d just remove the fixed positioning from the small screen media query assuming that you only have a small number of nav items.

e.g.

In this media query comment out the fixed positioning,

/* mobile /
@media screen and (max-height: 450px) and (max-width:870px) {
/ etc … */

  nav {
    height: 20vh;
    background: #a7ffeb;
    grid-area: nav;
    /*position: fixed;*/
    top: 0;
    border-radius: var(--balance-radius);
    padding-top: var(--balance-padding);
  }

 /* etc ... */
}

If you have a large number of nav items then I would assume that the previous small square for the nav should operate like a hamburger item and you’d need to click the hamburger to overlay the navigation menu (or slide it down from the top or from the side).

Note that when you create a demo of the layout you should insert ‘extravagant’ dummy content as coloured empty boxes are only half the story and never show overflowing or excessive content. e.g. put your nav code in place with all the links and logos and stuff you need as any changes required will ultimately depend on the content. :slight_smile:

.