Hi,

Thank you so much!!! That helped a lot! :-)

I had to style it like this:

.header-scrolled .widget {
top: 23px !important;
}

.header-scrolled .widget img {
height: auto !important;
width: 50% !important;
}

#header .widget {
left: 50%;
padding-top: 0;
position: absolute;
top: 45px;
transform: translate(-50%);
}

.html_header_top.html_logo_center .logo { left: 250px; }

———————–

I think it’s because I also have enlarged the social icons with this CSS:

#top .social_bookmarks li a {
width: 40px;
line-height: 32px;
min-height: 40px;
font-size: 30px;
}

#top .social_bookmarks li {
height: 100%;
width: 40px;
}

So I added this CSS:

.header-scrolled .social_bookmarks {
top: 23px !important;
}

The only thing now, is the header height on tablet in landscape mode – it doesn’t shrink on scroll. Is there a way to fix that?

Hi Ismael,

No – sorry.

I had disabled the header shrink.

But I don’t think the header-widget is the best option – so now I’ve tried a different approach:

Now the logo is 1024px wide – and 160px high. I removed the header widget, and made the logo width 2 images instead – one to the far left, and one centered.

The menu and logo setting is: Logo centered, menu below with the following CSS:

.html_header_top.html_logo_center .logo { left: 500px; }

This is almost like I want it, but when the screen is resized – the menu and center logo don’t line up. (the header becomes to tall)

• This reply was modified 9 years, 9 months ago by AiConcept.

Thanx Rikard,

I’m now a step closer – but as you can see, the widget doesn’t scroll up width the rest of the header: http://intuitivmentor.dk/en/
Also, I would like to center the menu.

Im using custom pixel value in the header (200px) – and have used this CSS:

#header .widget {
left: 50%;
padding-top: 0;
position: absolute;
top: 71px;
transform: translate(-50%);
}