Change color of top row columns

  • I am using the Kadence template on a local website (am using xampp) and am wanting to change the color of
    different columns on the top row of the header like this website:https://www.cliniqueaurora.com/
    so the top bar is two different colors (orange and black). I cannot see this option in the style customiser for changing the color
    of individual columns in the top bar row so
    will probably have to edit the css.

    I have tried to find the class for the right end column using the inspector which is:
    .site-header-section-right
    I tried to change the background color to green in the add custom css in the customiser:
    .site-header-section-right{background-color:green!important;}

    This created a large colored block rather than just coloring the row.

    Do I need to add an id to this column? I can’t see where I do this.

    Also when styling with css is it best to use the !important override?
    I am new to css styling in wordpress so any help or suggestions on how to create two colors for a top bar would be great.
    Many Thanks!

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

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hello @flamey23

    There aren’t any settings in the header builder to add background colors for the different columns in the rows. However, the CSS you used applies to the right column in all rows. Instead, try using the following CSS to target the right section of the top row, and let us know if it works for you.

    .site-header-top-section-right.site-header-section.site-header-section-right {
    background-color: green;
}
    Thread Starter flamey23

    (@flamey23)

    Thank you! This works perfectly to make last column green. Can now see where I got the css wrong (was selecting all columns and not the top one only):)

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Change color of top row columns’ is closed to new replies.