Problem/Motivation

Our navigation menu items in header have left and right padding. This is good because it increase tapping area of a link. However this introduce slight layout shift and menu items that are on border of container are slightly shift left/right from content limits which does not look that good.

Proposed resolution

  • Introduce block padding for all blocks in header regions with negative margins for wrapper rows elements.
  • Reset left padding for first menu item in first menu block and reset right padding for last menu item in last block.. Padding resetting needs a bit of a complicated CSS and also is not consistent because we can have hidden blocks that are shown only on mobile and then CSS selectors will fail. Instead of this apply negative margin to navigation menu wrappers with the value of nav items horizontal padding - much easier and more logical approach.

Do all this new CSS rules in new partial so custom themes can easily remove inclusion of this rules if needed.

CommentFileSizeAuthor
#8 interdiff-3229246-5-8.txt2.96 KBpivica
#8 better-align-menu-items-header-3229246-5-8.patch7.89 KBpivica
#5 interdiff-3229246-4-5.txt4.55 KBpivica
#5 better-align-menu-items-header-3229246-5.patch6.25 KBpivica
#4 interdiff-3229246-2-4.txt4.31 KBpivica
#4 better-align-menu-items-header-3229246-4.patch6.03 KBpivica
#2 better-align-menu-items-header-3229246-2.patch4.44 KBpivica

Comments

pivica created an issue. See original summary.

pivica’s picture

pivica commented
Status: Active » Needs review
StatusFileSize
new better-align-menu-items-header-3229246-2.patch4.44 KB

Here is a first patch. This needs some testing in client projects before merging.

I've also fixed missing nav-item CSS class for language menu item links.

pivica’s picture

pivica commented

Note that this patch is also removing button left/right margin we added in https://www.drupal.org/node/3196202. We added it for cases when we are adding a block with a single button and we needed that margins to create space around a button. However with this patch we are adding left/right padding to all blocks and we should not need this margins any more.

pivica’s picture

pivica commented
StatusFileSize
new better-align-menu-items-header-3229246-4.patch6.03 KB
new interdiff-3229246-2-4.txt4.31 KB

Testing showed that applying this kind of rules - for first block and last block are not practical because we can have hidden responsive blocks before or after of desired menu blocks, and in this cases rules will fail.

It seems that simple applying of negative nav item spacing margins to wrapper element is better and simpler for implementation.

Additionally, while testing, i noticed some CSS rules for offcanvas responsive navigation that was leaking to bigger screens rules. This is also fixed.

pivica’s picture

pivica commented
StatusFileSize
new better-align-menu-items-header-3229246-5.patch6.25 KB
new interdiff-3229246-4-5.txt4.55 KB

Seems we need to fully split rules for region and region-navbar, even region negative margin block padding for navbar should only be applied to not collapsible menu state (bigger screens) so we do not mess up offcanvas menu layout.

pivica’s picture

pivica commented
Title: Better align first and last menu items in header » Improve header layout

I've missed that we already had an issue for this in #3101508: Main menu misaligned with top region. However this issue now is fixing/improving couple of additional things in header layout. Will close related issue and let's continue work here.

pivica’s picture

pivica commented
Issue summary: View changes
pivica’s picture

pivica commented
StatusFileSize
new better-align-menu-items-header-3229246-5-8.patch7.89 KB
new interdiff-3229246-5-8.txt2.96 KB

I've tried to generalize solution more but it is not possible to do it fully because desired behaviour can easily change - region-navigation-second can have blocks only for mobile or blocks for all screen sizes, and making everything fit into grid is not possible in this case. So I've added more comments explaining this situation with an example code to fix this based on situation and fixed some bad selector rules introduced with previous refactoring.

  • pivica committed ce84c83 on 8.x-1.x 
    Issue #3229246 by pivica: Improve header layout
pivica’s picture

pivica commented
Status: Needs review » Fixed

Committed.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.