Having each secondary menu items in different rows

[Makan]

Hi,
I would like to put each item of my secondary menu in different rows. Each item in a row,
I have checked the link bellow,
https://generatepress.com/forums/topic/css-line-break-menu/#post-202661
but this one is adding breaker to one menu item,
what I need to add is having each menu item in a row.

https://prnt.sc/p9g5hl

this is a sample of what I need.
Could you please guide me through this issue.

[David]

Hi there,

try this CSS:

@media (min-width: 769px) {
    .secondary-navigation ul {
        display: flex;
        flex-direction: column;
    }
    
    .secondary-navigation .main-nav ul li.nav-button a {
        margin-right: 10px;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Makan]

Thanks for the code.
It works.

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts