Header with 2 absolute stacking bars

[Lyser]

Hello,
I have 2 absolutes bars in a header and i’ve put a 80px margin top to the second to be displayed below the first one. Gap between the 2 bars is ok.

For XL preview size :

When it goes LG preview size the gap between the 2 bars is too much because first bar lost height and margin top is still 80px for the second bar (margin top should be lower than 80px :

And for XS preview size, margin top should be higher than 80 because first bar goes 3 lines :

Is there a way to control the gap between the 2 bars to be the same for each website width ? I saw we can change px to calc for margin-top, is it the way to do it ?

[prakash_s]

Hello @Lyser,

Thanks for writing to us.

To change the margin unit into calc, click on the px it would give you an option to select calc. You can select calc from the list.

For the bar gap, it might be an issue of any custom CSS or plugin conflict. I would suggest you troubleshoot with a few of the common issues before we investigate your settings.

1. Testing for Plugin Conflict
2. CSS/JS Customization
3. Version Compatibility
4. Disabling Cache

If it doesn’t work for you, please share your details in a secure note. Please provide the following details

• WordPress Login URL
• Admin level username and password

You can find the Secure Note button at the bottom of your posts

Thanks

[Lyser]

Hello prakash,
sorry for misunderstanding, i was talking about this margin top of second absolute header where you can choose only px or calc

Actually it is 80px height on all sizes, is it possible to change this height depending of the responsive size ?

[ruenel]

Hello @Lyser,

Thanks for the clarifications. Regretfully the top margin settings will be applied throughout the screen sizes. If you want to customize it, you will need a custom inline CSS added to the bar settings in the “Customize” tab.

See the secure notes.

And then you may add something like:

@media(max-width: 1200px){
  $el {
    margin-top: 60px;
  }
}

@media(max-width: 979px){
  $el {
    margin-top: 50px;
  }
}

@media(max-width: 767px){
  $el {
    margin-top: 40px;
  }
}

@media(max-width: 480px){
  $el {
    margin-top: 30px;
  }
}

Please be advised that this is just an example code and will not work out of the box. You may need to add or adjust the values to make it work for your header.

Note: We are unable to provide support for customizations under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One or Care service for further assistance.

Best Regards.