Mobile menu - change distance between links and add lines

I want to achieve effect similar to this

Hi there,

Mobile menu item height can be adjusted here with the mobile toggle on:
https://docs.generatepress.com/article/menu-item-height-width/

Try this to add the border:

@media (max-width: 768px) {
    .main-navigation .main-nav ul li a {
        line-height: 50px;
        border-bottom: 1px solid #000;
        text-align: center;
    }
    .main-navigation .main-nav ul li:first-child a {
        border-top: 1px solid #000;
    }
    .main-navigation .main-nav ul li[class*="current-menu-"] > a {
        color: #fff;
        background-color: #000;
    }
    .main-navigation .main-nav ul li[class*="current-menu-"] > a:hover, 
    .main-navigation .main-nav ul li[class*="current-menu-"].sfHover > a {
        background-color: #000;
    }
    .main-navigation .main-nav ul li a:hover {
        background-color: #000;
    }
}

Thank You very much.

Mobile menu item height can be adjusted here with the mobile toggle on:
https://docs.generatepress.com/article/menu-item-height-width/
I now, but it change also size of logo and I dont want to change logo size, I want only decrease distance between links on mobile menu.

How can I add one more line above Start?

And one more questtion. How can I move links to the middle or to the right?

Best,
Arek Ignasiak

Adjusted the CSS above:
https://generatepress.com/forums/topic/mobile-menu-change-distance-between-links-and-add-lines/#post-626128

It should address all three questions :)

Thank You very much :-)

It looks almost perfect but there is no line above link Start.
How can I add line above link Start?

Best,
Arek Ignasiak

Within the code Leo provided, in this rule:

.main-navigation .main-nav ul li:first-child a {
    border-bottom: 1px solid #000;
}

add this property:

border-top: 1px solid #000;

Thank You very much

It works :-)

I have one more question. How can I change Background Current Color but only on mobile menu not desktop?

Best,
Arek Ignasiak

Adjusted my CSS above:
https://generatepress.com/forums/topic/mobile-menu-change-distance-between-links-and-add-lines/#post-626128

Fixed the previous mistake as well :)

Thank You :-)

Now it looks great but when I move mouse cursor over current link on mobile menu this change backgroungd color.
How can I block this action or setup the same backgroungd color when I move mouse cursor over current link but only on mobile menu?

Best,
Arek Ignasiak

Edited above: https://generatepress.com/forums/topic/mobile-menu-change-distance-between-links-and-add-lines/#post-626128

Although you shouldn't have to worry about that as there isn't hover on mobile.

Ok, Thank You very much :-)

and I hope the last for now question.
When I move mouse cursor over not current link on mobile menu, nothink happend.
How to achive effect changing backgroungd color when I move mouse cursor over not current link on mobile menu?

Best,
Arek Ignasiak

Added one more line above.

Again there isn't a cursor on touch screen so in my opinion that's just extra code.

Maybe You are right but on some devices it could be helpfuel, like on samsung note with pen.

Thank You very much for help. Now it looks and work perfect 🙂

No problem :)