Best Practice: Spacing between Navbar & Content

Design help General
1

Hey I’m running into a issue and I can see two different ways of solving put would like to get a second opinion on best practice.

My homepage is designed around each section being 100% VH so I made the nav absolute positioning. However, the rest of the website is not setup this way (sections are defined by the content inside) this causes me to have to either:

  1. Duplicate the same navbar as a separate symbol with static pos
  2. Adjust all the other pages so the content has a margin of 25VH.

What typically works better, spacing the margin between the nav and page content in PX or VH? What direction should I take? Thanks for the help.

Here is my site Read-Only: [LINK]

2

Hi @miikede is hard to recommend any solution as is strictly related to your design and is up to you what approach you will implement. I can only add that there is another option you can apply, create another nav symbol without absolute positioning and use this on other pages.

1 Like
3

Thanks Stan, that is what I was thinking too. Do you know what is most commonly used to space elements (between the navbar and page content?).

4

Hi @miikede for consistency of section spacing is used mainly (recommended) margin bottom of top element. But if for example you have fixed or absolutely positioned menu this menu is out of standard elements flow this mean that next section element will be under your menu (as layer on top).

In this case you will on this section use padding top at minimum size of menu height but usually much bigger depends how much space you will need under menu before another element as eg. text will show. It is hard to explain and as you see all is about how design is made.