Navigation submenu left padding introduced

  • dunnamana1

    (@dunnamana1)


    2 years, 11 months ago

    My submenu has a left padding for certain pages on my website and not for others even though they are using the same template. See image 1. For example http://yvonneg2.sg-host.com/donate-to-educate/ has the incorrect left padding as per image 2 but http://yvonneg2.sg-host.com/light-on-the-horizon/ is perfect as per image 3. I used the navigation block to create this heading in the default template.See Image 4.

    Any ideas?

    Image 1 – showing default template

    Image 2 showing incorrect left padding

    Image 3 showing correct left padding

    Image 4 Showing the navigation block that both pages are using

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • thelmachido a11n

    (@thelmachido)

    2 years, 11 months ago

    Hi @dunnamana1 it looks like the submenu on http://yvonneg2.sg-host.com/donate-to-educate/  has the following CSS which is adding padding to your submenu. 

    ul.has-background {
   padding: 1.25em 2.375em; 
}

    This CSS is not being rendered on the other page hence the difference in display, do you remember adding such CSS to your site?

    Thread Starter dunnamana1

    (@dunnamana1)

    2 years, 11 months ago

    Thanks for looking into this – I can’t see where this was set but I was delighted you could pinpoint it. I recently made this site into a twenty twenty two theme and have done very little work with lists so can’t think where this is being set up. I have checked additional css in customiser and the list in the global settings but not found anything. I also disabled plugins to see if there was a conflict. However, when I set padding: 0.25em 0.375em into the additional css it works a dream.

    Even though it is working now I would like to hear where else I should look for the setting causing the issue so I can avoid in future. Thanks so much for helping with this, it is very much appreciated.

    thelmachido a11n

    (@thelmachido)

    2 years, 11 months ago

    Hi @dunnamana1 it looks like this is actually a bug. If you have a submenu that has a background color, the unwanted padding is added on pages that have a list block. This was reported here:

    https://github.com/WordPress/gutenberg/issues/49445

    I’ve added your experience to the bug report, as a workaround for now I would suggest adding the CSS code below to your site. 

    .wp-block-navigation__container ol.has-background,
.wp-block-navigation__container ul.has-background{
padding:inherit;
}

.wp-block-navigation__container ol,
.wp-block-navigation__container ul{
box-sizing:border-box
}
Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Navigation submenu left padding introduced’ is closed to new replies.

Tags