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