I am opening this topic for two reasons, one is to know other approaches to reach layout results, and the second is because I don’t know how to implement properly some elements of one design that my client asks for:
My main doubts are about these graphic elements, like the lines that go outside the grid and to the edge of the viewport… Because we have a grid of 12 columns and I use all the elements inside it, these lines are giving me a headache.
Another problem is the background color cut, I try to create a white div to cut the background because if I need it to be a background and go to the edge of the viewport, it doesn’t respect the grid, but the approach makes me lose the control of until where the cut goes and sometimes the cut should be in a correct place to harmony with some graphic elements or text.
I can’t share the view link because of privacy, and I put some pink squares on everything related to the brand. To give more context, I am using a structure of Body → page wrapper → main wrapper → section → container → grid → elements.
Because this menu also breaks the grid and the hover needs to be that little bar, I made a black line of a div edge to edge and created the main nav over that.
So please, community! Show me how you do this:
Thank you, everyone! Much appreciate the help