I am moving from Elementor to Gutemberg for my website and for Blockonomics pages, there are design issues. For the first page, the buttons for choosing between Bitcoin and Bitcoin Cash are not centered and they are partially hidden under the transparent menu. For the second page with the bitcoin address, the text is centered but again going in the middle of the transparent menu. I have tried to modify the crypto page in gutemberg (like centering the text or changing for this page only to a non transparent menu but that did not change anything). I have also tried to use custom CSS (as suggested on this page: Customizing/Branding checkout page appreance : Blockonomics
That did not work either. I would be grateful if you could help me. Thanks
To address the design issues on your Blockonomics pages when moving from Elementor to Gutenberg, you can follow these steps to fix the centering of buttons and the issue with the transparent menu. Here’s a detailed solution:
1. Centering the Buttons
To ensure the buttons are centered and not hidden under the transparent menu, you can use custom CSS. Add the following CSS to your WordPress Customizer or your theme’s style.css file:
/* Centering the buttons */
.blockonomics-buttons {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px; /* Adjust as needed */
}
/* Adding padding to avoid the menu overlapping */
.blockonomics-buttons-container {
padding-top: 60px; /* Adjust according to your menu height */
}
2. Addressing the Transparent Menu Overlap
For the issue where the text and buttons are hidden under the transparent menu, you can add some top padding or margin to the main container of the page to push the content down. Here’s the CSS to do that:
/* Adding top padding to the main container */
.blockonomics-main-container {
padding-top: 60px; /* Adjust according to your menu height */
}
/* Ensuring text does not overlap with the menu */
.blockonomics-text {
margin-top: 20px; /* Adjust as needed */
text-align: center; /* Centering the text */
}
3. Applying Non-Transparent Menu for Specific Pages
If you want to change the menu to a non-transparent one for specific pages, you can target those pages with a specific class or ID. Add a class or ID to the body tag of the specific pages, and then write CSS to change the menu style for those pages only. Here’s an example:
Add a body class to the specific pages:
In the Gutenberg editor, you can add a custom class to the body of the page under the “Advanced” settings of the page.
Apply CSS for the non-transparent menu:
/* Custom menu style for specific pages */
.page-non-transparent-menu .your-menu-class {
background-color: #ffffff; /* Change to your desired color */
opacity: 1; /* Remove transparency */
}
4. Adding Custom CSS in WordPress
To add custom CSS in WordPress, you can use the built-in customizer or a plugin:
Using the WordPress Customizer:
Go to Appearance > Customize > Additional CSS.
Paste the custom CSS code provided above.
Publish the changes.
Using a Plugin:
Install and activate a plugin like Simple Custom CSS or Custom CSS and JS.
Add the custom CSS code provided above and save the changes.
Final Steps
Clear Cache: After making these changes, clear your site cache if you’re using a caching plugin. Also, clear your browser cache to ensure you’re seeing the latest changes.
Test Responsiveness: Ensure the changes look good on all device sizes (desktop, tablet, mobile).
By following these steps, you should be able to resolve the design issues on your Blockonomics pages and ensure that your buttons and text are correctly centered and not hidden under the transparent menu.
Still have doubt, here are some top-notch learning platforms for programming languages you can explore:
Hi @user40 , were you able to debug it. We have not seen checkout issue with gutenberg at our end. It could be a theme compatibility issue. Let us know if you need help.