[Resolved] Custom Header

[Manoj Kumar]

Hi,

I want create a custom header and apply on entire site. Please let me know how can I do this?

Thank You

[Leo]

Hi there,

Can you provide an example or a mock-up of this custom header so we can provide the best suggestion possible?

Let me know 🙂

[Manoj Kumar]

Hi,

I want to achieve-
1. logo to be displayed on center on mobile header.

2. put menu items more closer to each other on desktop header.

3. set bottom border size of the main container in header.

I am using INFO Template for my site.

Thank You

[Leo]

Can you link me to the page in question?

All three requests are decently simple and do not require creating a custom header.

[Manoj Kumar]

Hi,

Yes, you were right. But I am still unable to show/set top and bottom border of Header. I am using INFO template.

Thank You

[Fernando]

Hi Manoj,

Here’s a CSS you can try adding through Appearance > Customize > Additional CSS:

header {
    border-bottom: solid 4px #000000;
    border-top: solid 4px #000000;
}

[Manoj Kumar]

Hello,

Thanks for your quick response.

[Fernando]

You’re welcome, Manoj!

[Manoj Kumar]

Hi,

I have inserted the CSS code

header {
border-bottom: solid 4px #e51010;
}

Bottom border in header created same as I wanted. But there is an issue. As you can see in image attached another unwanted border or line is created under Post heading in single page. It is even visible after disabling heading. When I delete CSS code both border disappears. Please help me in removing the unwanted border.

https://imgur.com/Im0lU4s

Thank You

[David]

Hi there,

change the CSS to:

.site-header {
    border-bottom: solid 4px #000000;
    border-top: solid 4px #000000;
}

[Manoj Kumar]

Hello

It worked!

Really happy for the great support

Thank You

[David]

You’re welcome

[Author]

Posts