Support » Theme: Twenty Twenty-One » Changing body or header with custom CSS, having trouble getting it to work

  • I’m a bit rusty and I can’t seem to get my custom CSS changes to work.

    The website I’m trying to edit is:

    http://mrpowerwash.co

    I created a child theme and am adding my custom css to the style.css sheet within the child theme.

    I’m trying really simple stuff, like wanting to change the header background color.

    I want to do a similar look and color design like this website:

    https://www.powerwashri.com/

    So when I try to adjust the website’s colors under Customize/Colors & Darkmode

    And if I change the overall site color to #003da6, then it also changes the global font color to all white.

    Which I like and want to keep.

    So I would just need to change the header background and the main menu font color within the header

    But no matter what I try, I can’t seem to affect the background color of the header.

    I’ve tried every variation of the following:

    content{
        background-color: #ffffff;
    }
    
    #content{
        background-color: #ffffff;
    }
    .content{
        background-color: #ffffff;
    }
    
    site-header{
        background-color: #ffffff;
    }
    #site-header{
        background-color: #ffffff;
    }
    .site-header{
        background-color: #ffffff;
    }
    
    body{
        background-color: #ffffff;
    }
    #body{
        background-color: #ffffff;
    }
    .body{
        background-color: #ffffff;
    }

    I’m rusty with CSS/HTML, so what am I doing wrong that these changes aren’t working to any of these sections?

    Would it be best for me to set the entire site to blue and just change the header to white, or keep the site white and adjust the main body/content areas to the custom blue and white font?

    Also, how would I add a “Get a Quote/Call Us” button in the header that will call a phone number like they do?

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

Viewing 1 replies (of 1 total)
  • Thread Starter JohnnyScience

    (@johnnyscience)

    If I add the following to the Customize>Additional CSS

    main {
    	background-color: #003da6;
    	color: #ffffff;
    }

    I can get the changes I’m looking for to take affect.

    But don’t I want to style the css through the child theme’s style.css sheet?

Viewing 1 replies (of 1 total)
  • The topic ‘Changing body or header with custom CSS, having trouble getting it to work’ is closed to new replies.