CODEWITHSUNDEEP
htmlangularangular-materialmaterial-design
user741825
user741825

Reputation: 89

material.angular.io responsive titlebar /toolbar

How did the material.angular.io achieved the effect where buttons from top toolbar (Component, CDK, Guide) comes to the next row as tabbar when you hit the lower breakpoint?

Upvotes: 1

Views: 212

Answers (1)

Mitch McCutchen
Mitch McCutchen

Reputation: 386

They use two separate <nav> elements and set display: none on the one with class .docs-navbar-show-small unless it is the smaller break point. They do the opposite for the top ones, displaying when the view is larger and hiding when it is smaller. So it ends up looking something like this:

HTML:

<nav class="docs-navbar-header">
  <!--nav options here-->
</nav>
<nav class="docs-navbar-show-small">
  <!--same nav options here-->
</nav>

CSS:

@media screen and (max-width: $breakpoint) {
  .docs-navbar-header {
    display: hidden;
  }
  .docs-navbar-show-small {
    display: flex;
    ...
  }
}
@meda screen and (min-width: $breakpoint) {
  .docs-navbar-header {
    display: flex;
    ...
  }
  .docs-navbar-show-small {
    display: hidden
  }
}

From devtools:

enter image description here

Upvotes: 1

Related Questions