Add Vertical Navigation on Dawn Theme – Sidebar Navigation

In this video, you will learn how to add vertical navigation on the Dawn theme. This is a great way to improve the usability of your website and make it more user-friendly.

Adding vertical navigation to your Dawn theme website is a great way to improve the user experience and help users find what they are looking for quickly and easily. In this video, I show you how to add vertical navigation using the Dawn theme options panel.

Add Code in theme.liquid file

Add the following code in theme.liquid file under <head> tag

<style>
@media screen and (min-width: 990px) {
    header-drawer {
      display: block !important;
      order: 2 !important;
    }
      .header__inline-menu{
        display: none !important;
      }
    .header{
      display: flex !important;
    }
}
</style>

Add code in base.css file

Add margin-left:auto; under .header__icons class in base.css file. After adding it should look like following:

.header__icons {
  display: flex;
  grid-area: icons;
  justify-self: end;
  margin-left: auto;
}