Responsive Tab in header

[odog (o)]

My menu works great, but I have a tab (button) that won’t behave. The top goes over the next section.

I want it to stay aligned right under my shopping cart icon directly beneath the black bar and move down when the menu get taller.

https://preview.webflow.com/preview/npi?preview=b93098fafc77f1cfb703ae4d523804eb

Auto position puts the button over a white background.

Thanks in advance for your help.
~:-)

[odog (o)]

@cyberdave would you mind sharing your madd geek skillz with me on this?
~:-)

[sabanna (Anna)]

Hi @odog!
Let me help you with this issue.

I would recommend to put that button inside the section, that goes right after navbar. Give the section position: relative, and button position: absolute, top,right. And sure remove top margins from the button

It will keep that button always stick to the bottom of navbar, no matter what screen size or device will be used.

Cheers,
Anna

[odog (o)]

Sabanna,
Thanks for you jumping in to help.
~:-)

The section below the navbar is going to change from page to page.
I think it makes best sense to keep it in the header.

But, I’m open to how it might work best.

[sabanna (Anna)]

Well, then put inside the nav, just position will be not top, but bottom left and -50px from bottom(for example)

[odog (o)]

Sabanna,

I attempted to follow your insight.
But, I missed something.
~:-)

[sabanna (Anna)]

You have to remember about relationship between Absolute and Relative positioned elements.

[odog (o)]

Thanks for the fancy diagram.
I mean that.
~:-)

I made the changes.
It didn’t appear to make a difference.

[sabanna (Anna)]

You did not do one very important change: section “black back” should have relative position

[odog (o)]

Eureka! It worked.

It works brilliantly from 1200px wide and lower. Thank you.

But, it continues to move right on wide screens. Is there a way to have the relative position constrained to the width of my 1200px container?

[sabanna (Anna)]

Well, then just put this “button” inside the container where is navbar sit and do the same relationship. Only this time Button will have negative positioning not only at the bottom but on the right side.

[odog (o)]

I moved the button all around in the header area and even in the Navbar.

It works nicely on smaller screens, but it still goes wide on the large screens.

I’m thinking I could create a div that is 1200 px wide and align my button to the right inside.
I would appreciate your continued insight.

[sabanna (Anna)]

Hi @odog,
you don’t really need to create any div, because you already has one with max-width = 1200px, it has class container.
So all you need is

1. move button inside that container

2. give that container position: relative (it will make button with position: absolute, aligning in reference to container)
   

   

3. Then you will just make final aligning as you wish
   

   

Regards,
Anna

[odog (o)]

Anna,
It worked. I really appreciate you showing and teaching me how to get this rocked.
Thanks You!
~:-)

[sabanna (Anna)]

That’s awesome that you learned! It is brightest part of my volunteering!