Desktop Horizontal Menu inconsistent on home page and other pages

  • Specifically the styling of the dropdowns. On all pages but the home page they’re black text on a white background with a sort of comic book speech balloon effect. But on the home page they’re plain black.

    I’ve been staring at the CSS definitions for hours and cannot find the hook the theme is using to hang on this different styling.

    I would like to get rid of it because I think it will disorient my users.

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter cmkl

    (@cmkl)

    Okay so. It seems like the styles that make the menus appear differently on the home page and the inside pages are generated by a function in the theme’s functions.php, namely: function twentytwenty_get_elements_array()

    The function lays out a series of selectors for which WordPress builds style rules using the theme’s color variables for background color, text color etc.

    This renders a series of embedded styles which differ between the home page and ‘interior’ pages because of the selector body:not(.overlay-header). The not-overlay selector’s styles appear on the interior pages.

    At first I wasn’t seeing the overlay-header class in the home page’s body tag because there are 21 class attributes added to the body tags and I missed it.

    Do I have to create a child theme that replaces only this function with a version that leaves out the problematic array?

    Or do I write custom style rules that have greater specificity or all use the !important keyword?

    Which is the greater sin?

    Thanks for reading. This has been very therapeutic.

    • This reply was modified 4 years, 6 months ago by cmkl.
    • This reply was modified 4 years, 6 months ago by cmkl. Reason: Further information uncovered
    Moderator James Huff

    (@macmanx)

    If you don’t already have a child theme, stick with !important

    !important gets a bad reputation because if you’re building a theme or any site really from scratch, you should fix your styles properly instead of forcing an override with !important

    But, if you’re already overriding styles via Additional CSS, sometimes you need to force it with !important and there’s no shame in that, because that’s exactly what it was designed for.

    Plus it’s a lot less work than maintaining a child theme. ??

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Desktop Horizontal Menu inconsistent on home page and other pages’ is closed to new replies.