Header background color and full width

  • Resolved rod

    (@nomadarod)


    3 years, 9 months ago

    Hi,

    I am trying to add a different background image to each page. I want it to cover the footer (transparent footer as it is) but not the header. So I tried changing the header’s color but soon found out that it had margins (so the color doesn’t cover the extremities).

    The .site-header has the following css: max-width: var(--responsive--alignwide-width); which if I turn it off the header takes the full width. But then I need some padding so that the logo and the menu icon dont stay ‘glued’ to the left and right edges. And probably a responsive to screen size padding? So I tried this:

    .site-header {
    background-color: white;
    padding-left: 10vw;
    padding-right: 10vw;
    max-width: none;
}

    It seems to work, but I fear ‘breaking’ some rules of responsiveness or something else. Can you advise me on this or let me know if there is a simpler solution?

    kind regards
    Rod

    • This topic was modified 3 years, 9 months ago by rod.

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

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Oliver Campion

    (@domainsupport)

    Hi Rod,

    Have you tried using our plugin to set a header background image?

    That wraps the header in a new div wrapper. After that you can then cancel the image and set a background color …

    #masthead-wrapper {
background-image: none;
background-color: white;
}

    Let me know if that works for you and I’ll add an option to the plugin so that the background image doesn’t need to be set to have a background color that fills the width of the screen.

    Oliver

    Thread Starter rod

    (@nomadarod)

    Hi Oliver!

    The css didn’t work in my child-theme, but in the inspector it works. I redid it and emptied the cache… I’m puzzled.

    Update: it worked when I added !important. Can I leave it like this?

    Thanks for that simple solution.

    hugs

    • This reply was modified 3 years, 9 months ago by rod.
    Plugin Author Oliver Campion

    (@domainsupport)

    You can … but I’d rather get it working. Also, on the link above I’m not seeing a white background, I’m seeing some kind of squash or something? LOL

    I always try every avenue so as to not use !important as it should be avoided.

    Try this …

    body #masthead-wrapper {
background-image: none;
background-color: white;
}

    … that might take precedence.

    Let me know.

    Oliver

    Thread Starter rod

    (@nomadarod)

    You’re right. It’s the squash image that is showing. The page takes time to load and it was white before the image took place ^_^

    and… still the squash taking place with the new css.

    • This reply was modified 3 years, 9 months ago by rod.
    Plugin Author Oliver Campion

    (@domainsupport)

    Please add this to “Customizer – Additional CSS” …

    body #masthead-wrapper {
background-image: none;
background-color: white;
}

    It doesn’t look like you’ve added it.

    Thanks,

    Oliver

    Plugin Author Oliver Campion

    (@domainsupport)

    There is now a setting in the plugin to choose a background color for the header rather than a background image.

    Marking this as “resolved” now.

    Oliver

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Header background color and full width’ is closed to new replies.