Header Customizations with Multiple Colors

[bgrill881]

I have a one page site I am setting up, but I wasn’t sure if I could customize the header how the client wants just using X Theme. Would the image below be possible to come close to without having to customize too much?

The current site is 444dayton.com, I already have the brick background set in customize. I could make the Topbar transparent, but would the logo and ribbons of color be possible? Thanks in advance for any suggestions!

[nico]

Hi @bgrill881,

Thanks for writing in.

Yes it is possible. I suggest that you will also include the color of the ribbons together with the brick image and for the logo, you could use CSS to arrange it like that.

Let us know how it goes.

Thanks.

[bgrill881]

Thanks for the suggestion Nico! One problem is that I have the brick set as the background for the whole page. But I could theoretically have a different image grabbed from the “topbar content” field in the header customization options in the customize mode.

If I did that, what would the CSS be to make the image overlap the top bar and navbar? Thanks again for the great support from the x team!

[mldarshana]

Hi There @bgrill881

I will provide some example CSS, so that you can customize it accordingly.

For the logo, try adding the following CSS rules.

.x-brand img {
    width: 150px;
    margin-top: -45px;
}

For the navbar, try following example CSS on the following link (https://css-tricks.com/stripes-css/).

.x-navbar {
    background: linear-gradient( to bottom, yellow 25%, blue 25%, green 50%, white 75% );
}

Please not that we do not provide support for customizations. If you require further assistance, you may contact a developer/designer to assist you.

Thanks!

[bgrill881]

Thanks for the example code, I will run with it and see what I can do.

[friech]

Hi There,

Let us know how it goes, or if you need it to be a solid color make those horizontal stripes as one image, it can be a small image and just repeat-x it, and then position your background-image to left-top (0,0)

background-image
background-position
background-repeat

Cheers!