I have a problem positioning the nav bar, and sizing the elements

erezvol · December 13, 2022, 8:33pm

Hello everyone,

I created a responsive design for a website, designed for desktopm mobile vertical, and mobile horizontal.

I have a problem with the horizontal version.
I cant set the navbar to bo fixed at the top while the content is scrolled up.
I tried position fixes and position sticky.
Both of them won’t work. the navbar scrolls up with all the page.
Itried to define the navbar as 15% of screen height,
The balance and counter divs - together in one screen with navbar on top
All other divs 86% of screen height with navbar on top.

It wont work,
What did I miss

Here is the code :

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  
  <style type="text/css">
   :root{
     --balance-radius:5px;
	 --balance-padding:5px;
   }

	.container{
	  display: grid;
	  height:100vh;
	  grid-template-columns: 1.3fr 11fr 5fr;
	  grid-template-rows: 0.2fr 1fr 1fr 1fr 1fr 0.8fr;
	  grid-template-areas: 
	    "nav nav nav"
		"sidebar balance summary"
		"sidebar counter summary"
		 "sidebar line summary"
		 "sidebar closed summary"
		 "footer footer footer";
		grid-gap: 0.2rem;
	  font-family: arial, sans-serif;
	  font-weight: 800;
	  text-transform:uppercase;
	  font-size: 12px;
	  color: ##004d40;
	  text-align: center;
	}

	nav{
	  background: #a7ffeb;
	  grid-area: nav;
	  border-radius:var(--balance-radius);
	  padding-top:var(--balance-padding);
	}

	#balance{
	  background: #84ffff;
	  grid-area: balance;
	  border-radius:var(--balance-radius);
	  padding-top:var(--balance-padding);
	}

	#sidebar{
	  background: #18ffff;
	  grid-area: sidebar;
	  border-radius:var(--balance-radius);
	  padding-top:var(--balance-padding);
	}

	#counter{
	  background: #6fffd2;
	  grid-area: counter;
	  border-radius:var(--balance-radius);
	  padding-top:var(--balance-padding);
	}

	#closed{
	  background: #6fffd2;
	  grid-area: closed;
	  border-radius:var(--balance-radius);
	  padding-top:var(--balance-padding);
	}
	#summary{
	  background: #64ffda;
	  grid-area: summary;
	  border-radius:var(--balance-radius);
	  padding-top:var(--balance-padding);
	}

	#line{
	  background: #73ffba;
	  grid-area: line;
	  border-radius:var(--balance-radius);
	  padding-top:var(--balance-padding);
	}

	footer{
	 background: #1de9b6;
	 grid-area: footer;
	 border-radius:var(--balance-radius);
	  padding-top:var(--balance-padding);
	}

	@media only screen and (max-width: 550px){
	 .container{
	  grid-template-columns: 1fr;
	  grid-template-rows: 0.4fr 1.2fr 1.2fr 1.2fr 1.2fr 1.2fr 1fr;
      grid-template-areas:
	  "nav"
	  "balance"
	  "counter"
	  "line"
	  "closed"
	  "summary"
	  "footer";
     }

	 #sidebar{
	   display:none;
	 }
	}

   @media screen and (max-height: 450px) and (max-width:870px) {
      .container{
	  height:630vh;
	  grid-template-columns: 1fr;
	  grid-template-rows: 0.4fr 4.5fr 4.5fr 9fr 9fr 9fr 9fr;
      grid-template-areas:
	  "nav"
	  "balance"
	  "counter"
	  "line"
	  "closed"
	  "summary"
	  "footer";
     }

	 #sidebar{
	   display:none;

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

	#balance{
	  height:43vh;
	  background: #84ffff;
	  grid-area: balance;
	  border-radius:var(--balance-radius);
	  padding-top:var(--balance-padding);
	}

	#counter{
	  height:43vh;
	  background: #6fffd2;
	  grid-area: counter;
	  border-radius:var(--balance-radius);
	  padding-top:var(--balance-padding);
	}

	#closed{
	  height:96vh;
	  background: #6fffd2;
	  grid-area: closed;
	  border-radius:var(--balance-radius);
	  padding-top:var(--balance-padding);
	}
	#summary{
	  height:96vh;
	  background: #64ffda;
	  grid-area: summary;
	  border-radius:var(--balance-radius);
	  padding-top:var(--balance-padding);
	}

	#line{
	  height:96vh;
	  background: #73ffba;
	  grid-area: line;
	  border-radius:var(--balance-radius);
	  padding-top:var(--balance-padding);
	}

	footer{
	 height:96vh;
	 background: #1de9b6;
	 grid-area: footer;
	 border-radius:var(--balance-radius);
	  padding-top:var(--balance-padding);
	}
   }

  </style>
  <title>Document</title>
 </head>
 <body>
 <div id="" class="container">
  <nav>NAVBAR</nav>
  
  <div id="sidebar" class="">SIDEBAR</div>
  <div id="balance">balance</div>
  <div id="counter" class="">counter</div>
  <div id="line" class="">line</div>
  <div id="closed" class="">closed</div>
  <div id="summary" class="">summary</div>
  <footer>FOOTER</footer>
 </div>
 </body>
</html>

SamA74 · December 13, 2022, 8:39pm

I’ve not done a lot with grid (for a while) but I assume that for an element to have a fixed or sticky position, it should not be part of a grid system, as it will be independant of normal document flow.
You could try and remove the nav out of the grid container.

PaulOB · December 13, 2022, 10:28pm

There is no scrolling in that page at all as you set it to height:100vh. That is a mistake unless you are going to supply scrollbars on all the inner elements which would be a nightmare.

If you add a lot of content to say the summary section then content overflows.

You need min-height on the container not height.

.container{
      display: grid;
      min-height: 100vh
etc...
}

Now you can add position:sticky to the nav and it will stick at the top because the page will scroll.

 nav {
      position:-webkit-sticky;
      position:sticky;
      top:0;
    }

You have made a number of similar mistakes with height in elements like this (and there are many others).

   #counter {
          height: 43vh;
}

Unless you give that element a scrollbar the content will just overflow.

Here’s another one:

  .container {
        height: 630vh;
}

630 is a magic number and you would rarely if ever do something like that.

99% of the time your content will dictate the height of the element. If you need a starting height then use min-height. In most cases you would only need that on the main container anyway, Grid and flex allow for flexible layout of content and fixed heights do not work well in those situations or for responsive sites. You can make elements stretch without fixing their height as such .

I think you need to layout some dummy content to test with rather than empty boxes as you are missing some important concepts here

What if your content doesn’t fit in 15%?

This is the same issue as already mentioned.

Unless you are building some sort of dashboard where everything has to sit on one viewport screen and each element has its own scrollbar then your current approach is not going to give you the results you want. Try to think more freely and let the document flow as required.

Position:sticky will work in a grid layout but it has to be done right.

erezvol · December 19, 2022, 9:48pm

Thank you for your answers and explanations,

Here is a printScreen of the core page of my website which I want to make responsive:

I will take the navbar and the footer out of the container as they will be the same on every page.
I do not believe that it will be comfortable to view on mobile held verticaly, and Ia notice saying that this page is best viewed horizontally will be displayed

I want the page will be 5 times higher than vh so that
first screen shows The menu wuth about 10% -15% of the screen visible area. position stickey. and the 2 bar charts (a bar chart with 1 - 4 columns).
Second screen will be navbar and the line chart
Third screen includes the navbar and summary which will change layout to fit horizontal view
Fourth screen with navbar and table with scrolling as there could be many lines of data.
Bottom screen - navbar and footer.

The left sidebar will show up on demand from navbar main menu.

The column charts are created usin javascript (In case it matters).

How do I define the page correctly without “magic numbers” ?

Is there a way to define the page scrolling so that when scrolling is stopped by the user, It stops exactly so that the navbar top and chart bottom are at screen edges ? can it be done using Jquery ?

PaulOB · December 21, 2022, 8:56am

You use a method that allows for fluidity and plan every stage with care to achieve the design you want,

I can’t give you a full solution because I’d have to build it for you but you can start off with something simpler and then progress from there. Here’s a basic grid layout demo that shows a few features tha may be useful but there are loads of variations that could be done.

That’s like saying “This site is not for you go somewhere else”

There is always something you can do to accomodate all users. That’s what responsive and responsible design is all about. I’m not saying it’s easy but it is certainly possible with a bit of hard work and patience.

In the end it depends if its a hobby site or a real site in to how much effort you put into it.

Magic number alert

That has no relevance to anything. You are thinking in the wrong terms again. I’ve never said to myself this page needs to be 5 x vh tall in the last 1000 sites I’ve coded. If you want 5 screenfulls of information then you could just set each section to a min-height of 100vh. There is no need to do anything else.

As I said before if this is a dashboard type application then you can try and keep each screen to a fixed height of 100vh but you would need to add scrollbars to those individual elements like the sidebar in my grid demo. Generally though once you start hijacking the scrollbar you make life awkward for everyone unless ts well done.

system · March 25, 2023, 6:02pm

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