Hi,
Maybe you've done something went wrong. Our header builder supports both layouts: Desktop & Mobile/Tablet.
You should click the Tablet/Phone button, then drag & drop the mobile element you want to display here:
You can view the demo video tutorial here:
Regards,
PenciDesign.
Hi,
A Merry Christmas to you!
1. I did create the custom header through the theme's header builder. But it does not reflect on the mobile view. Again, I have used the same html code in another theme where it works on all views.
2. I understand you cannot help with the HTML code but I have now created a normal header with just the logo and menu through the theme's header builder for my single post page which is again not reflecting in the mobile view. Can you help resolve this issue? Why is the header not reflecting on the mobile view? Isn't it automatically supposed to appear on the mobile view too? Please clarify.
Thanks and regards
Hi,
1. If you want to build a custom header, you need to go to dashboard → Penci Builder → Add new.
2. You've totally changed the default header structure of Soledad by customizing HTML/CSS, so about this problem, you need contact to the developer who customizes it for you. Sorry, we can't fix the issue we don't create.
Thank you for your understanding.
Regards,
PenciDesign.
Hi,
1. The CSS changes are taking some time to reflect on the site. It is reflecting now. Thank you.
2. I have issues with the header and footer I created using custom html code in the theme's header/penci blocks builder .
2.1. The services drop down menu is not working in the theme though it is working on the pillar website which was built using the same code.
2.2. Header does not show up on the mobile and tab view.
2.3. The bottom portion of the footer is getting cut off in the mobile view.
Contacted my developer who said there is no problem with the code since the it is the same that was used on the pillar website where it is working fine on all views. Please help.
The link for the pillar website: https://profitcast.com/
Header code
<nav class="navbar navbar-expand-lg navbar-light fixed-top">
<div class="container">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="modal" data-bs-target="#exampleModal">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
Home" class="redactor-linkify-object">http://blog.profitcast.com/">Home
</li>
<li class="nav-item">
About" class="redactor-linkify-object">https://profitcast.com/about-us">About us
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle me-4" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Services
</a>
<ul class="dropdown-menu services-dropdown" aria-labelledby="navbarDropdown">
</ul>
</li>
<li>
<button type="button" class="btn or-btn" style="padding: 6px 12px !important;"><a href="#cus" style="color: white; text-decoration: none !important;">Subscribe</a></button>
</li>
</ul>
</div>
</div>
<div class="container" style="width: 100vw;" id="services-dropdown">
<div class="animate_animated animate_slideInDown">
<div class="row mb-2">
<div class="col">
<a class="dropdown-item" href="./services/social-media-advertisement">Social Media Advertising</a>
</div>
<div class="col">
<a class="dropdown-item" href="./services/email-marketing">Email marketing</a>
</div>
<div class="col">
<a class="dropdown-item" href="./services/social-media-management">Social Media Management</a>
</div>
<div class="col">
<a class="dropdown-item" href="./services/google-ads">Google Ads</a>
</div>
</div>
<div class="row">
<div class="col">
<a class="dropdown-item" href="./services/seo">Search Engine Optimization</a>
</div>
<div class="col">
<a class="dropdown-item" href="./services/content-marketing">Content Marketing</a>
</div>
<div class="col">
<a class="dropdown-item" href="./services/web-design">Web Design</a>
</div>
</div>
</div>
</div>
</nav>
Thanks and regards
Hi,
1. All the code I've tested correctly before replying to you,
2. I've checked your site code render by the browser. You've added the wrong CSS syntax, please check and edit it correctly:
Regards,
PenciDesign.
Hi,
I added the CSS codes and cleared the cache too but the changes are not reflecting. Please help.
Thanks and regards
Hi,
1. You can use this CSS to set the custom width for the single post:
body.single .inner-post-entry.entry-content {
max-width: 767px;
margin-left: auto;
margin-right: auto;
}2. Use this CSS to set the background image:
body.single .container-single .single-post-title {
padding: 30px;
background-color: #f1f1f1;
background-image: url(image-link-here);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}After adding this CSS code, you need to clear all the site cache to apply the new change.
Regards,
PenciDesign.
Hi,
1. So there is no way of changing it globally for the single post page alone? Because when I tried with Elementor the width changed for the homepage as well.
2. The CSS is not reflecting. Please help. Also, the same way can I apply a background image instead of color using background-image syntax?
Thanks and Regards
Hi,
1. Almost all your post content was built with the Elementor plugin, so please change the content width with Elementor.
2. If you want to set a background for the post title, please go to Appearance → Customize → Custom CSS then add the following custom CSS code:
body.single .container-single .single-post-title {
padding: 30px;
background-color: #f1f1f1;
}Modify the background color and spacing as you want.
Regards,
PenciDesign.
Hi,
1. I would like to reduce the width of the text area alone on the single post page and add a background for the title section above the featured image. Please guide me as to how to do it. Couldn't find options for these on the customize page.
2. Done. Thank you.
Regards
Hi,
1. Please go to Appearance → Customize → Single Posts: you can customize & modify all options of the single post page here.
2. Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:
.elementor-widget-container .widget .tagcloud a {
font-size: 22px !important;
}Change 22px with the font size you want to dipslay.
Regards,
PenciDesign.
Also, please help me with how to increase the font size of the penci category sidebar on my homepage.
The link for my page
Thanks and regards
Hi,
How do I edit the single post page template?
Regards
Want to join this conversation or access attachments? Sign in first.
Open your ticket archive, review validated licenses, and continue product support conversations from one customer portal.
