Twentig
Forum Replies Created
-
Twentig provides a custom page template to set the header transparent. When the user starts scrolling, the header becomes semi-opaque (using the CSS code above).
To change the template of a page:
- Open the page you want to edit.
- In the Settings sidebar, open the Page tab.
- In the Template panel, select the “Twentig – Transparent header” template.
- Update the page to apply the change.
I hope the above is useful to you.
Glad it works.
Twentig adds an Alternate Logo setting to display a white version of the logo for transparent header and footer with a dark background. It isn’t meant for the dark mode.
The Twenty Twenty-One theme includes a dark mode setting but only changes the contrast of the images when the mode is enabled. https://make.wordpress.org/core/2020/11/10/twenty-twenty-one-dark-mode-update/, “When Dark Mode is on, a dark grey background color is used. Images have a lower contrast.”
To display a different logo for the dark mode, you can add some custom CSS inside Customizer > Additional CSS (replace white-logo-url.png with your logo URL):
.respect-color-scheme-preference.is-dark-theme .site-logo { background-image: url(white-logo-url.png); background-size: cover; } .respect-color-scheme-preference.is-dark-theme .site-logo img { visibility: hidden; }I hope the above is useful to you.
If you enjoy Twentig, please leave a review. It would really help me out 🙂
TomHi Brad,
You can try adding the following CSS in the Customizer > Additional CSS panel (change the 0.75 opacity value as you like):
.tw-header-bg .site-header{ background-color: rgba(0, 0, 0, 0.75); }Hope that helps,
TomHi,
Inside the Customizer, open the Menus panel and locate the footer menu. Then click on the Add Items button and add a Custom Link. Enter your LinkedIn URL in the URL field and LinkedIn as the Link Text.
The theme will automatically display the icon in the menu. You can see here https://wordpress.org/support/article/twenty-twenty-one/#add-social-icons all the social media that are supported by the theme.
Hope that helps,
TomTry adding the following CSS (Customizer > Additional CSS) and adjust the 40px value as you like:
.tw-header-bg .site-content { padding-top: 40px; }Would you please send a screenshot to indicate which spacing you want to remove?
Thanks
Hi,
I’ve checked your page on Chrome/Android (on 2 phones and a tablet), it works fine for me (the white part is still white).
The issue doesn’t seem related to Twentig nor Twenty Twenty-One. It seems the issue occurs on a specific device/Chrome version. Have you tried on another device?
You can add some custom CSS (Customizer > Additionnal CSS) to decrease the header padding (adjust the 60px value as you like):
.site-header { padding-bottom: 60px }Please let me know if it works for you.
TomGlad it works. Unfortunately, Twentig can’t implement the feature you mentioned above due to the way the theme is coded.
Hi,
Would you please tell me which theme you are using (Twenty Twenty-One or Twenty Twenty), and if possible, share your page URL?
Thanks,
TomHi,
The thickness of the burger icon is the same as the close icon. While you can change the burger icon with CSS, it’s not possible to modify the close icon as it’s an SVG path included in the PHP code.
To make the burger thicker, you can add the following CSS (Customizer > Additional CSS)
.tw-menu-burger .nav-toggle .toggle-icon { height: 1.7rem; border-width: 3px; } .tw-menu-burger .nav-toggle .toggle-icon::after { top: 0.4rem; border-top: 3px solid; }Have a nice day,
TomHi,
Thanks for your feedback. This is a known issue with plugins that extend the block editor (e.g. Jetpack, Yoast, Coblocks). It only occurs when debug mode is on. We’ll try to fix it in a next release.
Have a nice day,
TomHi,
Yes, the Dakar demo includes some custom CSS that isn’t included in the import to prevent overriding user’s CSS. Adding the above CSS in the Customizer > Additional CSS panel is the way to do it.
I see that the fonts on your site are the same as on our demo (Space Grotesk for both Body and Heading). Did you need to change it yourself in the Customizer after the import, or were the fonts correctly imported?
Hi,
Twentig supports child themes of the Twenty Twenty theme, but there’s currently no filter to add support for other themes.
I don’t know if it’s possible to add filters for all the features. I’ll keep you updated if we find a solution.
Have a nice day.
Hi,
Twentig doesn’t include social share functionality. Maybe you can try a dedicated plugin: https://wordpress.org/plugins/search/social+share/
I’ve never used these plugins, so I can’t recommend one.
Tom