[Support request] inverted css

Home Forums Support inverted css

  • This topic has 8 replies, 3 voices, and was last updated 4 months ago by David.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1514461
    Ketil

    Hi. I thought I would make an inverted header for a site I’m working on, uses “Mason” from site library as basis for this site. To have inverted colors for menu for this header-element only, what would be the easiest way?

    #1514820
    David
    Staff
    Customer Support

    Hi there,

    you can create a new Header Element:

    https://docs.generatepress.com/article/header-element-overview/

    You do not need to add anything to the Hero content, just go to the Site Header tab and set it to Merge with Content, then you can enable header and navigation colors to change them.

    Then set the Display Rules for the pages you want this effect to apply.

    #1515321
    Ketil

    Made header element, but couldn’t get the header bg black. it’s set in header, but displays white. What could be wrong?

    #1515375
    Ketil

    Screenshots of header and settings, why don’t the black bg color apply?

    #1515380
    Elvin
    Staff
    Customer Support

    Hi,

    You can try adding this CSS:

    header#masthead {
        background-color: black;
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1516355
    Ketil

    yes, that added the background. Now the problem is when i select “no merge”, then I can’t set colors for the menu, and it appears with white background. How can I manipulate colors for main menu with “no merge”-setting?

    #1516391
    Ketil

    also, the code made the header background black everywhere, not just on the frontpage

    #1516448
    Ketil

    Sort of got it working as I wanted to, by adding margin to top container in content to push it below the menu. Doesn’t work on cellphone though, there the background color is white.

    #1516471
    David
    Staff
    Customer Support

    Swap the top margin in your container block for top padding, this will extend the color behind the Header. You can adjust the top padding separately for Mobile devices.

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.