How to increase or decrease the Header Area in Newspaper theme? I an using header style 1 default.
Hello mystudent,
If you want to increase the height of your header area you have to use a bit of CSS code.
The code is ->
.td-header-style-1 .td-banner-wrap-full{
height:400px;
}
Thanks.
Thanks.
Hi
I’ve tried using the code above to decrease the Header Area height on the Newspaper theme, but it doesn’t seem to work. Please advise.
Thanks
Hello kfx,
Please notice that the above code will be applied only for header style 1. So, if you are using another header style, please change the number of it with your header style used by you.
Thanks.
Hi, I’ve done that, but still no changes.
Thanks
Hello kfx,
Please try to use the !important tag to give more important for your code, like this -> https://www.smashingmagazine.com/2010/11/the-important-css-declaration-how-and-when-to-use-it/
If you have no success, please provide your website URL so I can inspect it closer.
Thanks.
Hi Catalin
Unfortunately it doesn’t help.
Just to make sure we’re on the same page, I’m using Style 7 and I’d ideally like the header/menu area (which contains the logo & menu) to be the same height as the sticky menu when you scroll down.
Thanks
Hello kfx,
You can try the code below and place in in Theme panel->Custom CSS area.
The code is ->
.td-header-style-7 .td-header-menu-wrap-full, .td-header-style-7 .td-header-menu-wrap {
height: 48px !important;
}
.td-header-style-7 .td-header-sp-logo {
height: 48px;
}
.td-header-style-7 .td-header-sp-logo a {
line-height: 48px;
}
.td-header-style-7 .td-header-sp-logo img {
max-height: 48px;
line-height: 48px;
}
.td-header-style-7 .sf-menu > li > a {
line-height: 48px;
}
.td-header-style-7 .sf-menu {
margin-top: 0;
}
.td-header-style-7 #td-top-search {
bottom: 0;
}
Here you can see the result -> http://screencast.com/t/nTcSU7Qy2
Thanks.
Thank you – works perfectly…just two glitches:
1) The sticky logo is larger than the original menu logo
2) The Search Icon isn’t in line with the original menu (around 30px below the menu), but then goes inline with the sticky menu once you scroll down.
Thanks again for the help!
Thanks it worked for me too, i was about to ask this question.
Still 1 Question:
How can we shift menu closer to LOGO as there is much gap between LOGO and Menu?
Hello sir,
How can we add Social Icons to the right of Menu?
Hello all,
Please replace the above code with the below code.
.td-header-style-7 .td-header-menu-wrap-full, .td-header-style-7 .td-header-menu-wrap {
height: 48px !important;
}
.td-header-style-7 .td-header-sp-logo {
height: 48px;
}
.td-header-style-7 .td-header-sp-logo a {
line-height: 48px;
}
.td-header-style-7 .td-header-sp-logo img {
max-height: 48px;
line-height: 48px;
}
.td-header-style-7 .sf-menu > li > a {
line-height: 48px;
}
.td-header-style-7 .sf-menu {
margin-top: 0;
}
.td-header-style-7 #td-top-search {
bottom: auto;
top:0;
}
@mystudent, if you want to decrease the space between the logo and the menu, please try the code below.
.td-header-style-7 .sf-menu {
float: none;
}
For your second request, moving to the right of Menu for Social Icons involve custom work and we cannot provide this type of services.
Thanks for your understanding!
Hi Catalin
Thank you again for your help.
The updated code fixed the search icon, but the logo size still increases for the sticky version of the menu.
Thanks
