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?
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.
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.
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.
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!
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.
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
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.
here some pictures to communicate my issues
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.
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.
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.
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.
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.
works like a charm.
Thank you!