I am just building a page using the Soledad theme and have a few questions to make it look as desired:
1) How can I move the topbar menu items to the right instead of being displayed on the left?
2) When I look at the homepage in desktop view the Penci Custom Slider looks very nice, but when I look on my mobile the font is way too large, not all is displayed and the link buttons are missing (see attachment). How can I fix this?
3) How can I increase the logo height just for mobile view? It's way too small there - not the one when opening the hamburger menu, then it's fine, but on top of the usual page (also seen in attachment).
4) Is there a way to make a complete Penci Info Box (as used on the homepage) clickable instead of just some text elements?
1. Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:
.penci-headline .pctopbar-item {
float: right;
}
2. You can change the slider that appears on the mobile by editing your homepage with the Elementor plugin, then click the device selector near the Publish button:
Then select the device you want to edit on the top bar:
Now you can change the size of the text & button for the device you've selected only.
3. Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:
Dear Penci team,
I am just building a page using the Soledad theme and have a few questions to make it look as desired:
1) How can I move the topbar menu items to the right instead of being displayed on the left?
2) When I look at the homepage in desktop view the Penci Custom Slider looks very nice, but when I look on my mobile the font is way too large, not all is displayed and the link buttons are missing (see attachment). How can I fix this?
3) How can I increase the logo height just for mobile view? It's way too small there - not the one when opening the hamburger menu, then it's fine, but on top of the usual page (also seen in attachment).
4) Is there a way to make a complete Penci Info Box (as used on the homepage) clickable instead of just some text elements?
Thank you in advance for your answers!
Kind regards
Tobias
Hi,
1. Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:
.penci-headline .pctopbar-item { float: right; }2. You can change the slider that appears on the mobile by editing your homepage with the Elementor plugin, then click the device selector near the Publish button:
Then select the device you want to edit on the top bar:
Now you can change the size of the text & button for the device you've selected only.
3. Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:
@media only screen and (max-width: 960px) { #navigation { --cs-logo-height: 120px; } #navigation.header-6 #logo img { padding: 0; max-height: var(--cs-logo-height); } #navigation.header-6 { height: var(--cs-logo-height); } #navigation .button-menu-mobile { line-height: var(--cs-logo-height); } #navigation.header-6 .pcheader-icon > a { line-height: calc( var(--cs-logo-height) - 2px ); } }Change --cs-logo-height with the custom height of logo you want to display on mobile.
4. Yes. You can make the Penci Info Box clickable by enabling the Wrap Link for Whole Info Box? option on element settings.
Regards,
PenciDesign.
Hi there,
you guys rock! That was much quicker than I expected and all my issues are solved. Thanks so much!
Kind regards,
Tobias