How to center tablet/mobile icon in header w/ 2 rows?
Hello! We want a banner at the top of the page to highlight a new piece of content and provide a direct link to it. The best way I can figure out how to do that is to add a row above the normal navigation row, which works fine on desktop. On tablet/mobile, however, it looks like it's calculating 'center' for the icon based off the entire section, not the row—I can't click the icon and get any controls for centering on the row, and I don't get any centering options on the row itself. Is there some other way to do this that doesn't make the nav menu items look like garbage?
Pinging this to see if I can get some more eyes on it, thanks everyone :)0
Hi @alexevans - I'm taking a closer look with a team member. I'll follow-up!1
Thanks @ScottyStrehlow ! My workaround for now was to create a regular flex section BELOW the header for tablet/mobile, but that obviously isn't sticky in the same way when the user scrolls. This might be a nice official Duda widget, that sits one level higher than even the header and means we don't have to do sneaky workarounds in the header itself!0
Thanks for your patience - I checked with my team and I think I have a solution for you!
If the row is hidden on desktop, there is a code available, please see below:
position:fixed !important; top:10% !important; z-index:9999 !important; width:100% !important;
And it should be able to be added to the CSS tab for the row (classic editor, flex won't be able to be used for this). Here's a screenshot.
This code is taking the row out of where it would normally live and fixing it to where you're placing it. The top:10% is telling it to be 10% from the top of the screen, so if the header is larger, the 10% will need to be increased to accommodate the additional height of the header.
I hope that makes sense, please let me know if it works!0
- 665 All Categories
- 2 Getting Started
- 48 Announcements
- 587 Ask a Question
- 15 Going Live & Publishing
- 82 Website Builder
- 5 App Store
- Custom Branding & Client Management
- 4 Team Collaboration
- 14 eCommerce
- 35 Conversations
- 2 Industry News
- 3 Website Design Feedback
- 2 Random
- 7 Idea Board
- Duda Experts
- 4 Events