Confused on how non-console demo top nav works for mobile display

[NicoPowers]

Hi, I am trying to implement something very similar to the top navigation bar featured here: https://cloudscape.design/examples/react/non-console.html

However, I noticed that when the display is shrunk down to mobile, the hamburger menu icon seems to be pushed down below the header, to allow for the menu list to properly show below the top navigation bar.

Unfortunately, this does not work out-of-the box with the Top Navigation component, and I cannot find where or how to make this work like in the demo (i checked the base.scss and top-navigation.scss, but it is not clear how this is applied).

Here is the problem I am running into: https://www.youtube.com/watch?v=S29G3D53P7M

[taheramr]

Hello Nico, thanks for providing a lot of details about your problem and also a video! I have also passed your feedback about the demos code.

As far for the problem you are mentioning, the AppLayout component has a property called headerSelector, can you make sure that you are passing it the same selector applied to your top navigation?

[NicoPowers]

Thank you for the suggestion, sorry i have been busy these couple of weeks and have not got back to this yet, I will try sometime this week and let you know how it goes.

Thanks!

[NicoPowers]

Just confirmed this works, had to add headerSelector=".custom-main-header" to <AppLayout ... />

As this was my base.scss:

// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: MIT-0
@use "@cloudscape-design/design-tokens/index" as cs;

body {
  background: cs.$color-background-layout-main;
  position: relative;
}

.custom-main-header {
  display: block;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10011;
  margin: 0;
  background-color: #0f1b2a;
  font-family: cs.$font-family-base;
}

ul.menu-list {
  display: flex;
  align-items: center;
  height: 40px;
  margin: 0;
  padding: 0 40px;
  list-style: none;
  font-size: 14px;

  & > li {
    padding: 0;
    margin: 0;
    margin-right: 8px;

    > a {
      padding: 0 6px;
    }

    a,
    div,
    button,
    input,
    label {
      float: left;
      color: cs.$color-text-interactive-default;
      line-height: 16px;
    }

    #visual-refresh-toggle {
      margin-right: 5px;
      margin-top: 1px;
    }

    a,
    a:hover {
      cursor: pointer;
      text-decoration: none;
    }

    &.title {
      font-weight: bold;
    }
  }

  @media only screen and (max-width: 493px) {
    padding: 4px 20px;
    flex-wrap: wrap;
    height: fit-content;

    .title {
      flex: 1 1 100%;
      margin-bottom: 8px;
    }

    li {
      width: min-content;

      button,
      a {
        text-align: left;
      }

      a {
        padding: 0;
      }
    }
  }
}