Navigation Bar + Page block to add up full size

Permanently deleted user

• January 12, 2022 12:59

Hi Brizy Team,

I would like to manage to have a page block to fill up the full screen but including a Navigation Menu bar. 

Since that same Navigation Menu bar has to be on every page of my site and I would like to be edit it later on I created and saved the Navigation Menu as a global Block and add it together with my global footer to every page.

Now I would like to have a page element to cover the entire screen of the page. Setting the first page block to be displayed on the page to "full height" and looking at it in preview. the page element is actually too thall and exceeding the page height of the screen, because first the navigation is displayed as a separate page element, then the "full height" page element follows. Together they are thaller than full height.

The way I solved it now is that I set the page element, placed below the navigation to "full height".

Then in the settings of the navigation menu global block I set the margin to -52 px, since the navigation is 52 px thall, shifting it on top of the full height page element that follows. In order for it to be visible I need to set the naviagtion menus "z-Value" to 1 to be displayed on top.

So far so good, but its difficult now to access the block settings for both the page element block or the menu navigation block.

My question is, is this the correct way to do this and solve this problem or is there a more elegant, better way to tackle this issue?

 

0

• 

  Permanently deleted user

  • January 12, 2022 13:06

  What I would like to achieve:

  Full height Page Element including a global navigation block sitting on top

  

  i set the margin of the global navigation block to -52 px (its height)

  

   

  Full Height Block setting:

  

  0
• 

  Permanently deleted user

  • January 13, 2022 08:44

  Hello Max,

  You have implemented your design correctly. There is something you can do better though.

  You have set the bottom margin of your header to a -53. Since you are using a global header, this negative margin will apply on all your pages (and on other pages, you may not have a full-width hero image. )

  A better way to implement this would be to set the top margin for your hero block (the block with full width and full height) to -53 and set the bottom margin for your global header to zero. This way on all other pages, the header will not carry a negative margin. See here.

  Best regards, Nelea

   

  0
• 

  Permanently deleted user

  • January 14, 2022 11:38

  Hi Nela,

   

  thank you for this tip. I did as you suggested,

  best regards,

  Max

  0
• 

  Permanently deleted user

  • January 14, 2022 11:49

  We are welcome, have a nice day.

  0

Please sign in to leave a comment.