menu text alignment in vertical menu

mmpaija replied

4 years ago

Customer Reply

works like a charm.

Thank you!

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

About the spacing, you can replace it with this code:

.penci-menu-hbg .menu li a, #sidebar-nav .menu li a {
    padding: 0 35px;
    line-height: 35px;
    margin-bottom: 35px;
}

Change 35px of each property by the custom value.

Regards,
PenciDesign.

mmpaija replied

4 years ago

Customer Reply

Great, now the menu text is aligned in the middle.

When it comes to the space between the text lines, it still only gives only two options. The one as it is now (yes, it is almost no space between the texts and it's different from the original that was too loose, but still not what I am looking for) and no matter what px I change, it only stays the same.

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

Ok. Please remove all the CSS code and replace it with this:

.penci-menu-hbg .menu, #sidebar-nav .menu {
    text-align: center;
}

The menu spacing still uses this code:

.penci-menu-hbg .menu li a, #sidebar-nav .menu li a {
    padding: 0 13px;
}

You can modify 13px to any px you want. Example:

.penci-menu-hbg .menu li a, #sidebar-nav .menu li a {
    padding: 0 31px;
}

Regards,
PenciDesign.

mmpaija replied

4 years ago

Customer Reply

It was not the problem of the logo. It stayed where it was supposed to as well as the menu just after it. But it didn't fix what I wanted :D

Here is a picture what I'm looking for. The codes you have provided here, are not working on this particular issues. That's why I'm asking further help.

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

Please add the CSS code I've sent you here: https://pencidesign.ticksy.com/ticket/2930850/#comment-15584724, click the Publish button on the top screen, then clear all the site cache & check again.

Regards,
PenciDesign.

mmpaija replied

4 years ago

Customer Reply

here some pictures to communicate my issues

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

Please add this CSS code if you want to make the logo always on the top:

.penci-menu-hbg-inner {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    height: 100%;
}

Regards,
PenciDesign.

mmpaija replied

4 years ago

Customer Reply

Hi,

1. The code you provided aligns the logo and the menu centered in vertical manner. Me I'm looking for to get the menu texts centrally aligned under the logo. In the way that the logo stays up on the page.

2. This code takes off the space between the texts, but cannot be adjusted and this 13px is a bit too much close to each other.

Help :D

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

1. Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:

.penci-menu-hbg.penci-vernav-show.penci-menu-hbg-left {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
}

This code will align all the menu content to the center.

2. If you want to increase the spacing of each item, please add this code:

.penci-menu-hbg .menu li a, #sidebar-nav .menu li a {
    padding: 0 13px;
}

Change 13px to the customs value.

Regards,
PenciDesign.

mmpaija started the conversation

4 years ago

Conversation Start

Hello,

I have two questions regarding to vertical menu (soledad theme, originally built on demo "painter blog"). I have attached a pic to demonstrate what I mean here.

1. How can I get my vertical menu texts aligned in the center? I could see many options to align widget items but none when it comes to the menu. I hope it is still possible.

2. The same menu in the vertical navigation, how can I get the space between the texts reduced?

Thank you a lot in advance!