Customize Header (Logo and Remove Lines)

[mchesin]

Hello,

I need some assistance in configuring my header/logo. I want the logo to be big and centered but how do I remove the lines and shadow the theme generates? What options do I have to generate a custom header?

*Don’t mind the redacted logo. The items in yellow I am trying to remove. Just want a clean header with no lines or shadows that are generated by the theme.

Thank you!

[christian]

Hey Matt,

I’d first start with the Logo. To have a big and centered logo, you need to set the Header Layout to Stacked and then adjust the Logo Image Width to your desired pixel value. You can read more about those settings in our Header documentation here: https://theme.co/docs/header#header-logo-settings

In X or using the Original Header, the lines and shadows are part of the theme’s header design so there’s no option to remove them. It would require overriding them with CSS. With that said, you will need to learn CSS and also learn how to use the browser element inspector so you’ll know what selectors to use in the CSS.

I’ll provide you with an example but please note that issues that will result from the use of any custom code and further enhancing them will not be supported.

The only Stack with a line and shadow is the Integrity Stack. The override CSS to remove them is the following.

.x-navbar {
    border-bottom: 0;
    box-shadow: none;
}

That will result to something like the following screenshot. As you’ll see, there is no separation between header and content.

If you wish to have a custom header, it’s best to upgrade to Pro. The Pro Header Bar, by default, doesn’t have a line but just a shadow that can be easily disabled like the following options.

Hope that helps.

[mchesin]

Thank you for your reply. I placed the CSS under the " Additional CSS" section however the lines are still displaying:

[christian]

Hey Matt,

You might be using the Renew or Icon stack. My example is for Integrity. We will help you one last time regarding removing those lines you showed. For other customizations, you will need to learn CSS and the use of the browser element inspector to further customize the header.

Please provide access to your site in a Secure Note. If we can’t see your site, we can’t help.

By the way, the recommended area to add CSS in our theme is in the X > Theme Options > CSS.

Thanks.