Template Marta : From horizontal to vertical navigation menu

Hello everyone,

I'm trying to display my navigation menu vertically instead of horizontally on my website : https://coconut-bagpipe-9nzc.squarespace.com/home

I would highly appreciate your help as I've been trying for a few days to find this out !

Thank you 

Robin

Like this, or ?

On 12/5/2019 at 4:24 PM, tuanphan said:

Like this, or ?

Yes exactly :) 

@moretrobin Add to Home > Design > Custom CSS

.Header-nav-inner {
    height: unset !important;
    width: unset !important;
    display: flex !important;
    flex-direction: column;
}

I am actually having the same issue. I used this code and it didn’t work for me. Can you please help?

21 hours ago, JarConcept said:

I am actually having the same issue. I used this code and it didn’t work for me. Can you please help?

Can you share link to your site?

On 2/4/2020 at 12:07 PM, JarConcept said:

I am actually having the same issue. I used this code and it didn’t work for me. Can you please help?

same here! nothing happened.

Have you solved that problem? 

On 2/5/2020 at 9:17 AM, tuanphan said:

Can you share link to your site?

On 12/8/2019 at 11:10 AM, tuanphan said:

@moretrobin Add to Home > Design > Custom CSS

.Header-nav-inner {
    height: unset !important;
    width: unset !important;
    display: flex !important;
    flex-direction: column;
}

 

I tried with this code but it didn't work.  what should I do after adding that code and saving in custom css page? 

13 hours ago, RachelLee said:

 

I tried with this code but it didn't work.  what should I do after adding that code and saving in custom css page? 

Need link to your site to check...

I'm having the same issue.  here is the link to my site - https://www.johndavidlevy.com/

10 hours ago, beachtree said:

I'm having the same issue.  here is the link to my site - https://www.johndavidlevy.com/

Add to Design > Custom CSS

/* vertical menu */
ul.cf {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

Hello, I am also trying to get this vertical navigation but the codes listed here wont work for me. My site link is https://hannaleejewelry.com/

On 6/22/2021 at 11:13 PM, hannaleejewelry said:

Hello, I am also trying to get this vertical navigation but the codes listed here wont work for me. My site link is https://hannaleejewelry.com/

Add to Design > Custom CSS

/* Vertical nav */
.header-nav-list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

On 6/23/2021 at 9:38 PM, tuanphan said:

Add to Design > Custom CSS

/* Vertical nav */
.header-nav-list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

 

Thank you!! This worked but there is a lot of overhang on some of the navigation titles when selected. Is this fixable? 

On 7/2/2021 at 6:33 AM, hannaleejewelry said:

Thank you!! This worked but there is a lot of overhang on some of the navigation titles when selected. Is this fixable? 

Add to Custom CSS

/* nav active underline */
div.header-nav-item--active a {
    background-image: none !important;
}
div.header-nav-item--active a:after {
    content: "";
    background-color: black;
    height: 1px;
    width: 100%;
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 999;
}
div.header-nav-item--active a {
    display: inline-block;
    position: relative;
}

On 7/3/2021 at 12:23 AM, tuanphan said:

Add to Custom CSS

/* nav active underline */
div.header-nav-item--active a {
    background-image: none !important;
}
div.header-nav-item--active a:after {
    content: "";
    background-color: black;
    height: 1px;
    width: 100%;
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 999;
}
div.header-nav-item--active a {
    display: inline-block;
    position: relative;
}

 

This didn't work. The navigation went back to horizontal format.

14 hours ago, hannaleejewelry said:

This didn't work. The navigation went back to horizontal format.

Add above code & don't remove any code in your current code

14 hours ago, tuanphan said:

Add above code & don't remove any code in your current code

Oh! silly me, thank you so much! Works perfectly!