How to change header height?

Posted in: Newspaper
Post count: 83

Hi,

I’d like the header to be narrow, only a little higher than the logo. I like header style 1 (to try to mimick the header as seen on https://nrc.nl), but without the add space. And how can I align the logo with the menu -the logo is somewhat offset now.

Regards,
Martin.

Post count: 20685

Hi,

Without the header ad header style 1 will look like this
https://www.screencast.com/t/wRSb9GTtP
With the margins removed from the logo the total height will reduce
https://www.screencast.com/t/ureorrAk
So maybe this is what you wanted, the code can be entered in Theme panel->Custom CSS

.td-header-style-1 .td-header-sp-logo {
margin: 0;
}

Thanks

Post count: 83

Hi Simion,

The customer simply wants a header like this: https://nrc.nl

So a narrow band with the logo, and below that a narrow band with the menu, separated by black lines.

There should be no space for an ad. Despite the code, the header stays rather high when you opt for header style 1. Is this also because of the height of the menu? Can this be adjusted with code too?

How can we achieve this?

I’ve emailed a screenshot.

Regards, Martin

Post count: 187

Simion… having a similar problem with style 10.

Figured it out!

Post count: 187

Seashore,

I found this code here in the forum and worked great for me for style 10 and might work for style 1 with an adjustment. You can also try changing heights. good luck!

.td-header-style-10 .td-logo-wrap-full {
min-height: 75px;
line-height: 75px;
}
.td-header-style-10 .td-logo-wrap-full .td-logo {
line-height: 75px;
}

Post count: 20685

@Seashore With that code there will be no margin around the logo
https://www.screencast.com/t/0J4tkeEOCAmO
You could remove the gradient below the header menu, also add some borders similar to those
https://www.screencast.com/t/kgvY2SMCG
This is the whole code code used in the example (including the one from above), modify it further or add to it more. It is meant for header style 1

.td-header-style-1 .td-header-sp-logo {
margin: 0;
}
.td-header-style-1 .td-header-gradient:before {
display: none;
}
.td-header-style-1 .td-header-main-menu {
border-bottom: 1px solid #b9b9b9;
border-top: 2px solid #000;
}

Post count: 83

Hi Simion,

This works perfect! Thanks, that’s how we want it, the ad space is smaller too now. Very happy now! You guys are great!

Regards,

Martin.

Post count: 83

Hi BobbyMC,

Dit not work exactly like I wanted it, but maybe I did something wrong. But thanks for your reply. Simion meanwhile crated some code that works how we want it.

Regards,

Martin.

Post count: 20685

Hi,

Glad you worked it out eventually. The result should have been like in my example. Let us know if you have more questions.

Thanks

Viewing 9 posts - 1 through 9 (of 9 total)
You must be logged in to reply to this topic.