How to center tablet/mobile icon in header w/ 2 rows?

alexevans
alexevans Member Posts: 17
edited August 2023 in Ask a Question

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?

image.png


Tagged:

Answers

  • alexevans
    alexevans Member Posts: 17

    Pinging this to see if I can get some more eyes on it, thanks everyone :)

  • ScottyStrehlow
    ScottyStrehlow Member Posts: 307 Duda Staff

    Hi @alexevans - I'm taking a closer look with a team member. I'll follow-up!

  • alexevans
    alexevans Member Posts: 17

    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!

  • ScottyStrehlow
    ScottyStrehlow Member Posts: 307 Duda Staff

    Hi @alexevans,

    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.

    image (7).png

    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!

Categories