# Floating Header Full Width

**URL:** <https://forum.bubble.io/t/floating-header-full-width/4579>\
**Category:** Uncategorized\
**Created:** [July 22, 2016, 2:16am UTC](https://forum.bubble.io/t/floating-header-full-width/4579 "2016-07-22T02:16:13Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![john.casano](https://avatars.discourse-cdn.com/v4/letter/j/d07c76/32.png) [@john.casano](https://forum.bubble.io/u/john.casano)\
**Post date:** [July 22, 2016, 2:16am UTC](https://forum.bubble.io/t/floating-header-full-width/4579/1 "2016-07-22T02:16:13Z")

</div>

Hello,

How does one create a floating header the full width of a page?

Thanks,  
Joh

---

<div class="post-metadata">

**Author:** ![dylan.phillipslevine](https://avatars.discourse-cdn.com/v4/letter/d/8baadc/32.png) [@dylan.phillipslevine](https://forum.bubble.io/u/dylan.phillipslevine)\
**Post date:** [July 22, 2016, 2:30am UTC](https://forum.bubble.io/t/floating-header-full-width/4579/2 "2016-07-22T02:30:45Z")

</div>

Hey John,

I may be out of my element (pun intended) but just set the floating group to 1200 and the use the responsive browser to adjust the elements inside appropriately.

Stay Bubbly,

Dylan

---

<div class="post-metadata">

**Author:** ![john.casano](https://avatars.discourse-cdn.com/v4/letter/j/d07c76/32.png) [@john.casano](https://forum.bubble.io/u/john.casano)\
**Post date:** [July 22, 2016, 3:12am UTC](https://forum.bubble.io/t/floating-header-full-width/4579/3 "2016-07-22T03:12:09Z")

</div>

Ok, I will try this tomorrow. Stuck on other problems now.

---

<div class="post-metadata">

**Author:** ![john.casano](https://avatars.discourse-cdn.com/v4/letter/j/d07c76/32.png) [@john.casano](https://forum.bubble.io/u/john.casano)\
**Post date:** [July 24, 2016, 1:09am UTC](https://forum.bubble.io/t/floating-header-full-width/4579/4 "2016-07-24T01:09:55Z")

</div>

No luck thus far…

See below.

 ![](https://us1.discourse-cdn.com/bubble/original/2X/b/b9345f9d133c789f3307472a6c02f200cec43e85.png)

Hera are the settings I am using…

On the header:

 ![](https://us1.discourse-cdn.com/bubble/original/2X/7/7005ad7be1d57abe80f031c4affdbd2dac50e921.png)

On a page:

 ![](https://us1.discourse-cdn.com/bubble/original/2X/8/88863407b6b92c9b2d8aa419f003f505b5ae3bc1.png)  
 ![](https://us1.discourse-cdn.com/bubble/original/2X/c/c9cc1dc623ee7d692d6065394f23bd99d3c1edf9.png)

---

<div class="post-metadata">

**Author:** ![dylan.phillipslevine](https://avatars.discourse-cdn.com/v4/letter/d/8baadc/32.png) [@dylan.phillipslevine](https://forum.bubble.io/u/dylan.phillipslevine)\
**Post date:** [July 24, 2016, 1:18am UTC](https://forum.bubble.io/t/floating-header-full-width/4579/5 "2016-07-24T01:18:50Z")

</div>

Make sure to change your header width to 1200 as well. I poked around in there and saw it was only 973.

---

<div class="post-metadata">

**Author:** ![fayewatson](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/fayewatson/32/2686_2.png) [@fayewatson](https://forum.bubble.io/u/fayewatson)\
**Post date:** [July 24, 2016, 1:22am UTC](https://forum.bubble.io/t/floating-header-full-width/4579/6 "2016-07-24T01:22:31Z")

</div>

Hi John, in the Header Reusable Element (first screenshot), check to make sure the group (containing your logo and the buttons) doesn’t have a max width and the header itself also doesn’t have a max width. Then it should be responsive to the width of the page.

---

<div class="post-metadata">

**Author:** ![john.casano](https://avatars.discourse-cdn.com/v4/letter/j/d07c76/32.png) [@john.casano](https://forum.bubble.io/u/john.casano)\
**Post date:** [July 24, 2016, 1:23am UTC](https://forum.bubble.io/t/floating-header-full-width/4579/7 "2016-07-24T01:23:10Z")

</div>

Awesome - I will give it a shot.

---

<div class="post-metadata">

**Author:** ![john.casano](https://avatars.discourse-cdn.com/v4/letter/j/d07c76/32.png) [@john.casano](https://forum.bubble.io/u/john.casano)\
**Post date:** [July 24, 2016, 1:36am UTC](https://forum.bubble.io/t/floating-header-full-width/4579/8 "2016-07-24T01:36:11Z")

</div>

Ok, its getting better. Thanks for your help. Now the header _almost_ goes the entire width of the screen, and the items on the header are not centered, so the items are pushed to the left of the screen.

**Image of the Current Header**

 ![](https://us1.discourse-cdn.com/bubble/original/2X/4/4c4c4e88faf32f44c7373bf1a246624da8df4cc2.png)

**Properties of the header**

 ![](https://us1.discourse-cdn.com/bubble/original/2X/e/e2ad3f5c524ed8be32042c82bc3a5eec4c8c9ac0.png)

**Properties of boxes inside the header**

 ![](https://us1.discourse-cdn.com/bubble/original/2X/f/f40e46c3a539a8795c46110502b04fd020c39e1b.png)

 ![](https://us1.discourse-cdn.com/bubble/original/2X/4/45127ac8fe4fd47b9b9b80086465d3133cbd4371.png)

**Properties of the header from another page**

 ![](https://us1.discourse-cdn.com/bubble/original/2X/0/0f5eac72584bddf997ab66b8292845c42e94510b.png)

---

<div class="post-metadata">

**Author:** ![raymond](https://avatars.discourse-cdn.com/v4/letter/r/c57346/32.png) [@raymond](https://forum.bubble.io/u/raymond)\
**Post date:** [July 24, 2016, 7:36am UTC](https://forum.bubble.io/t/floating-header-full-width/4579/9 "2016-07-24T07:36:01Z")

</div>

@john.casano have you had a look at the responsive video yet? It will help you a lot

> [@Announcing launch of the Widgets site! Showcase your work and see how widgets are built](http://forum.bubble.io/t/announcing-launch-of-the-widgets-site-showcase-your-work-and-see-how-widgets-are-built/3985):
>
> Hey Bubble forum! We’d like to announce a tool we made that should enable Bubblers to share the widgets we’ve built and how we built them. You can find it at the link below: [widgets.airdev.co](http://widgets.airdev.co) This tool is enabled by the “read-only” functionality that was recently released by the Bubble team. That means that you can look at the logic behind all of the widgets and not worry about breaking anything. You can even copy and paste widgets (with or without workflows) into your own apps. We intend…
