Streaming live at 10am (PST)

I can't align borders between nav bar menu and section / Grid concept website

Hi to all,

I’ve created a website with a grid/boxes concept full of borders.

In the Formacions Page, I can not align the borders between the nav menu bar (Eixida-Menu-Fixed) and the “Div Block Section - Info”. As you can see, I made it with the nav bar because they are 5 different div blocks and I managed to apply borders separately, but inside the Div Block Section - Info there is a CMS collection displayed as a flexbox, so all the elements inside (collection Items) work together as the same element, so I can not apply different borders to different parts.

I’m pretty sure there is a way to make it, but I’ve tried a lot of options and I can not find the best combination of borders to align it.

Here is the ready-link:

Does anyone know how to solve this?

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

My suggestion is to make both grids the same (4 columns) and inside the 4 columns of the nav one create the divisions you need, that way you can always be sure that the four columns are going to align correctly.

Another idea would be to create only one grid and set the nav as a top element in that grid with position sticky.

Hope this helps.

Thanks Aaron for your response.

I think I’m a bit confused with the grid element right now.

The general grid called Grid Eixida (first element in the body) is supose to work as the main grid of the website. It has the good divisions for all the future elements, as you can see (1fr, 0,25fr + 0,75fr , 1fr and 0,75fr + 0,25fr). It is true that I’m not able to work with it with the nested elements. For instance, as you can see in the Home page, I have the Grid Eixida, but then to build the Section 2, I had to duplicate the grid inside the Section 2.

I’m sure this is not the way to work with grids, and there is something I don’t get.

Ready-only link:

PD: Trying to build something here:

Hey Aaron,
I’ve tried to recreate again the menu with 4 columns, but still not matching.

I’m not able to match the borders/lines of the grid created in the upper menu (Symbol NOU MENU) and the grid created for the CMS list collection (Section 14 - collection list 20).

I’ve tried to create the same structure (4 columns) for both in order to mach the borders when I scroll up and they get overlaped, but always there is a little difference.

What I’m doing wrong? :frowning: