Twenty Fifteen theme dark font bug on left menu for narrow browser window

• 

  friskysaga · Member · Apr 29, 2020 at 12:16 am

  • Copy link
  • Add topic to favorites

  Without any custom CSS styling from me, I am using a dark palette selected from the WordPress customizer menu option Colors & Background. But when the browser window size is narrow (about less than 1/2 of my screen size), but not narrow enough to where the left navigation menu gets pushed upwards, the font on the links from the left menu turn gray instead of white, such that it is unreadable on a dark background.

  I believe this is a bug because there was no CSS styling on my end. Can anyone else confirm?

  The blog I need help with is: (visible only to logged in users)

• 

  staff-zinnia · Staff · Apr 29, 2020 at 3:48 pm

  • Copy link

  Hi –

  Yes, we can definitely take a look. Is this happening on friskylabs.wordpress.com or a different site.

  Please let us know the following:

  – what browser and version number is in use:
  https://supportdetails.com/

  – does a different browser appear any differently?

  – what about clearing the browser cache?

  Solve Common Browser Issues

  – Take a screen shot and add it to the site’s media library:

  Take a Screenshot

  
  https://en.support.wordpress.com/add-media/

• 

  friskysaga · Member · Apr 29, 2020 at 5:18 pm

  • Copy link

  Hey, thanks for getting back to me.

  This happens on the Firefox browser as well, and it is not an issue with clearing the browser cache.

  Also, I managed to finally override the palette bugs using this CSS.

  
  /* Known bug with the default WordPress theme where decreasing the width of the browser will cause the top menu to show a white background irregardless of palette settings */
  
  /* Sidebar menu hotfix background color */
  #secondary {
    background-color: #1f1f1f;
  }
  
  /* Known bug with the default WordPress theme where decreasing the width of the browser will cause the left menu to show unreadable text against a dark background */
  
  /* Sidebar menu dropdown buttons hotfix */
  #secondary button {
    background-color: #611e1e;
  }
  
  /* Sidebar menu hotfix for links */
  #menu-primary a {
    color: #fff;
  }
  

  Will not be marking as resolved simply because I think the developers of this theme should still take a look at the issue.

• 

  friskysaga · Member · Apr 30, 2020 at 10:07 pm

  • Copy link

  Oh I forgot to mention this: To target the dropdown arrow on the menu:

  
  /* Targets menu dropdown button arrow */
  .dropdown-toggle::after {
    color: #fff !important;
  }