Header responsive with desktop screens - sticky icon box

Alexandra Mayer

• February 17, 2022 13:44

Hi!

May I ask you for your help!?

I need to have a sticky box on the top right corner to display text + phone number anytime in a prominent way.

First I tried to place it in my (sticky) header - but here I have an issue with responsiveness and different screensizes from 1300 px to mobile breakpoint at 990 px.

I have 3 sections (logo, menue, icon box)

I didn't manage the icon box staying in same size and not get cut off or break out of section.

So I considered to have an overlay - So that I won't need to place it in an icon box in the header.

I found your tutorial video about fixed content, so I managed to place my iconbox on the right side. Can I add any background or border to the iconbox?

Or an other idea: Can I place it in the top right corner lying OVER the header (changing the z-index from my iconbox to be above the header)

And one question concerning the header:

2. When I configured my header as I need it, how can I duplicate it identically to use it as sticky header when scrolling down (so that I dont have to configure everything again until it is looking equally)

Thank you in advance!

Best regards Alexandra

0

• 

  KC George

  • February 17, 2022 15:48
  • Edited

  Hi Alexandra

  It should not be difficult to place the logo, menu and an icon box on a sticky header for desktops, tablets and mobiles. You may not need to use fixed or absolute position to do this. 

  In Brizy unfortunately we do not have a way to make the sticky header by duplicating the primary header. We have to make it two times.

  Do you want us to help you with the header? You will need to give us access to your project. 

  0
• 

  Alexandra Mayer

  • February 17, 2022 15:57
  • Edited

  Thanks for your fast reply! Yes please - I would appreciate your help!

  Is there a possibility to share a private link not visible here in the forum? The project is in coming soon mode so far - until it's finished.

  0
• 

  Doina P

  • February 17, 2022 19:09

  Hello Alexandra,

  Thank you for your message!

  Please feel free to send the details here as the messages first comes into our work dashboard and we are the ones who make them public. I can assure you that no private information will be exposed. Hope to hear from you soon!

  Kind regards,

  Doina

  0
• 

  Alexandra Mayer

  • February 17, 2022 19:22

  Ok - thanks, here are the login details:

  [deleted for confidentiality]

  kind regards, Alexandra

  0
• 

  KC George

  • February 18, 2022 05:56
  • Edited

  Hi Alexandra

  I have added an icon box with two telephone numbers on your header. I have also made the sticky header for you. Please take a look.

  To make the telephone numbers clickable, I have added a number to it. Please edit those numbers according to your need

  0
• 

  Alexandra Mayer

  • February 18, 2022 09:17

  Hi George,

  Thanks a lot for your help!!! I think it works that way.

  I additionally colored the box to make it more prominent - so I can keep the phone number smaller :)

  best regards, Alexandra

  0

Please sign in to leave a comment.