# How can i make a full window sized navbar by toggeling

**URL:** <https://forum.bootstrapstudio.io/t/how-can-i-make-a-full-window-sized-navbar-by-toggeling/7865>\
**Category:** Webdesign Help\
**Created:** [September 27, 2021, 7:46am UTC](https://forum.bootstrapstudio.io/t/how-can-i-make-a-full-window-sized-navbar-by-toggeling/7865 "2021-09-27T07:46:37Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![rumede](https://forum.bootstrapstudio.io/letter_avatar_proxy/v4/letter/r/a6a055/32.png) [@rumede](https://forum.bootstrapstudio.io/u/rumede)\
**Post date:** [September 27, 2021, 7:46am UTC](https://forum.bootstrapstudio.io/t/how-can-i-make-a-full-window-sized-navbar-by-toggeling/7865/1 "2021-09-27T07:46:38Z")

</div>

Hy all

I would like the navigation to be full width and height when the toggle icon (hamburger) is visible. You can find an example here:  
www.younity.ch

With my solution I can only do it if I use the nav-block twice. But I want to avoid this. Also I want to avoid that when displaying the navigation in full width and height no scrolling down is possible.

Can someone help me here? how to implement something clean?

---

<div class="post-metadata">

**Author:** ![richards](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/richards/32/3163_2.png) [@richards](https://forum.bootstrapstudio.io/u/richards)\
**Post date:** [September 27, 2021, 10:06am UTC](https://forum.bootstrapstudio.io/t/how-can-i-make-a-full-window-sized-navbar-by-toggeling/7865/2 "2021-09-27T10:06:18Z")

</div>

Try adding this to your css:

```auto
.navbar-collapse.show, .navbar-collapse.collapsing {
  text-align: center;
  font-size: 2rem;
  transition: height 0s ease;
}

.navbar-collapse.show {
  height: calc(100vh - 56px);
  transition: height .35s ease;
}

```

---

<div class="post-metadata">

**Author:** ![rumede](https://forum.bootstrapstudio.io/letter_avatar_proxy/v4/letter/r/a6a055/32.png) [@rumede](https://forum.bootstrapstudio.io/u/rumede)\
**Post date:** [September 27, 2021, 11:50am UTC](https://forum.bootstrapstudio.io/t/how-can-i-make-a-full-window-sized-navbar-by-toggeling/7865/3 "2021-09-27T11:50:34Z")

</div>

Not bad, here is the result:  
https://codepen.io/rumede/embed/preview/dyRQgXK?default-tabs=html%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=dyRQgXK

But now, i don’t want that scroll down is possible… Is it correct, that in this case i have to hidden the following content with display:none?

---

<div class="post-metadata">

**Author:** ![richards](https://forum.bootstrapstudio.io/user_avatar/forum.bootstrapstudio.io/richards/32/3163_2.png) [@richards](https://forum.bootstrapstudio.io/u/richards)\
**Post date:** [September 27, 2021, 1:10pm UTC](https://forum.bootstrapstudio.io/t/how-can-i-make-a-full-window-sized-navbar-by-toggeling/7865/4 "2021-09-27T13:10:15Z")

</div>

Just delete the second transition, it will still scroll but won’t be seen