Problem with Widget in Header Area

Thanks for the reply. It looks better using your code and also using the following code:

@media screen and (max-width: 1024px) { #header_main .widget { display: none !important; } }

On a related note, I noticed that if I make the header “sticky” and “shrinking” that the contents of the header widget don’t shift up when the header shrinks, so they end up overlapping the main menu bar. Is there any CSS code to handle the behavior of the header widget when the header shrinks, such that it does the following:

1) Have the buttons move up horizontally to match the same vertical height as the logo; and
2) Have the buttons shrink in size (just like the logo does). I could always create a separate set of buttons that are smaller just for that shrunken view only if there is a way to accomplish what I want to do (e.g., show the big buttons when in regular view and show the smaller buttons when in shrunken view).

Please advise.

Hi Andy,

Thanks. That looks great when the header shrinks, but I don’t want for the widget to bee so close to the top menu prior to shrinking (e.g., when the header is displayed in the normal full size state). It looks off balanced, since there is so much white space below the header widget.

Is there any way for the widget to only move to that higher position (margin-top: -32px) when the header shrinks, but for it to stay centered vertically when the header is in its normal full size state?

Please advise. Thanks!

You can close this ticket. Thanks.