vertical nav menu

hello, 

I need help changing with CSS code to display the header nav parts vertically and the dropdown menus to the right of the nav, similar to the nav menu of this website: https://www.robertwun.com/ss21. I currently have the display at default. 

here's my website link: https://www.eduardo-ramos.com/

thank you to anyone who tries to help me. 

So 

logo (top arrow)

nav (middle, second arrow)

instagram (bottom arrow)

?

yes, that would be great, thank you for your help

12 hours ago, tuanphan said:

Add to Website Tools (under Not Linked) > Custom CSS

@media screen and (min-width:992px) {
  .header-title {
    position: fixed;
    top: 3vw;
    left: 5vw;
    z-index: 9999;
}
.header-nav {
    position: fixed;
    top: 10vw;
    left: 5vw;
    padding: 0 !important;
}
  nav {
    flex-direction: column;
  }
  div.header-nav-item {
    margin: 0 !important;
    text-align: left !important;
}
  div.header-nav-item  a{
   display: inline-block;
}
.header-actions.header-actions--right {
    position: fixed;
    left: 5vw;
    bottom: 2vw;
    justify-content: flex-start !important;
}
.header-actions--right .header-actions-action a {
    margin-left: 0 !important;
    margin-right: 2.5vw;
}
#page article section {
    max-width: 75%;
    margin-left: 25%;
    padding-top: 0 !important;
}
  body {
    background-color: #111;
}

.header-title-logo {
    text-align: left !important;
}
}

 

Thank you so much this works great. I would just like to ask you if you know how can i move the menu dropdown in collections to the right of the Nav menu so it's not covering the other menu items.

I'm also having problems with the active nav item, I'm using: 

 /* desktop*/

               .header-nav-item--active a {
                color: #808080 !important; }
  /* mobile */
               .header-menu-nav-item--active a {
                color: #808080 !important; }
  /* folder */
                  .header-nav-folder-item--active a {
                   color: #808080 !important; }

but it's not working with the "collections" folder I use to have a dropdown link to different pages. I hope my question is clear. 

I appreciate your help.

On 1/5/2024 at 3:09 AM, EduardoRamos said:

Thank you so much this works great. I would just like to ask you if you know how can i move the menu dropdown in collections to the right of the Nav menu so it's not covering the other menu items.

I'm also having problems with the active nav item, I'm using: 

 /* desktop*/

               .header-nav-item--active a {
                color: #808080 !important; }
  /* mobile */
               .header-menu-nav-item--active a {
                color: #808080 !important; }
  /* folder */
                  .header-nav-folder-item--active a {
                   color: #808080 !important; }

but it's not working with the "collections" folder I use to have a dropdown link to different pages. I hope my question is clear. 

I appreciate your help.

Hi,

I see you figured it out?

10 hours ago, tuanphan said:

Hi,

I see you figured it out?

Yes, I just set a margin, but need help with the "active nav colour"; it's not working when I'm on that page.

On 1/9/2024 at 1:36 AM, EduardoRamos said:

Yes, I just set a margin, but need help with the "active nav colour"; it's not working when I'm on that page.

Because your folder item is Link item, so SS won't enable active nav color on default

With SS24, edit SS24 page > Add a Block > Choose Code > Paste this code

<style>
  header#header [href="/collections/ss24"] {
    color: #f1f;
}
</style>

With FW23 page, do similar with this code

<style>
  header#header [href="/collections/fw23"] {
    color: #f1f;
}
</style>

Repeat similar with other pages

On 1/9/2024 at 11:39 PM, tuanphan said:

Because your folder item is Link item, so SS won't enable active nav color on default

With SS24, edit SS24 page > Add a Block > Choose Code > Paste this code

<style>
  header#header [href="/collections/ss24"] {
    color: #f1f;
}
</style>

With FW23 page, do similar with this code

<style>
  header#header [href="/collections/fw23"] {
    color: #f1f;
}
</style>

Repeat similar with other pages

That worked great thank you so much for your help