How can i make a full window sized navbar by toggeling

Webdesign Help
1

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?

1 Like
2

Try adding this to your css:

.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;
}
3

Not bad, here is the result:

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?

1 Like
4

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