Header bar responsively change size

Support
#1

Hi,

I make a new header bar at 121px height. I would like it to resize at 70px when the window is smaller than 992px. I was thinking of using a @media code, but I’m not sure how to use it and where to put it.

I hope I make myself clear.

Thanks!

#2

Hi Giacomo,

Thank you for writing in, please add this to your Bar’s Element CSS area

@media (max-width: 992px) {
	$el.x-bar {
		height: 70px;
	}
}

But would you mind to clarify what you’re trying to do? Maybe we can achieve it without using a custom CSS.

Cheers!

#3

Hi,

Thanks for the reply.

I’m trying to achieve a header (and the two left and right bars) like this website: https://riccardo.im

#4

Hello Giacomo,

Thank you for the clarifications. You can create a custom header like in your example url. Simply make use of the top, left and right section where you can insert separate bars and have different bar settings.

Hope this helps.

#5

Hi,

thanks for the reply. I already knew that. My question was about how to change the size of the bars (top, left and right) according to the window size. @friech answer to the question (see the custom CSS above), but the last thing is to understand if there is a way to achieve the same effect without using a custom CSS.

Thanks a lot!

#6

Hello Giacomo,

The bar height can only be set in the bar settings that applies to all screen sizes. You may use the shrink option which means that the bar height will shrink to a smaller height as you scroll the page. Regretfully there is no other way than to use custom css in reducing the bar height in different screen sizes.

Hope this helps.

#7

Thanks.

Could be a way to create two different bars per position (two top, two left, and two right), with different heights and setting them to hide according to the window size (in the Header rows setup). Is it a good idea or does it generate excessive and useless JS&CSS code?

I hope I make myself clear. Thanks!

#8

Hi Giacomo,

Theoretically, that is possible, but honestly it will impose a huge amount of unnecessary clutter and heavy code to avoid using the @media CSS code.

Thank you.

#9

Thank you so much!

#10

You’re very welcome, Giacomo.

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.