Third Level Navigation Open to the Right in Mobile - Dawn Theme

Technical Q&A
1

Hello,

I’m trying to figure out how to get the third level drop down to open to the right of the second level drop down. Currently, it is opening underneath the second level. Anyone have any ideas?

This is what I’m looking for:

file-UZOE5iBZbT.png
file-UZOE5iBZbT.png2250×1098 451 KB

Thank you!

2

You’d need to alter the css to make it open out to the right. Are you comfortable editing the code for the site?

If so, go to edit code, Assets folder, and open base.css, and at the bottom you want to add:

.header__submenu li{
  position:relative;
}
.header__submenu li .icon-caret{
  transform: rotate(270deg);
}
.header__submenu details[open]>.header__menu-item .icon-caret{
  transform: rotate(270deg);
}
.header__submenu li .header__submenu{
    left: 100%;
    background: var(--gradient-background);
    border-radius: var(--popup-corner-radius);
    border-color: rgba(var(--color-foreground),var(--popup-border-opacity));
    border-style: solid;
    border-width: var(--popup-border-width);
    box-shadow: var(--popup-shadow-horizontal-offset) var(--popup-shadow-vertical-offset) var(--popup-shadow-blur-radius) rgba(var(--color-shadow),var(--popup-shadow-opacity));
    margin-top: 0;
    width: max-content;
    top: -1px;
    position: absolute;
}

and that sould get you most of the way there.