How to manage header shrinkage with inner row in the header?

Stresor
Stresor Member Posts: 5
in Ask a Question

Hello,

I have my header that includes inner rows. When I enable header shrinkage, all data that is in an inner row moves down as the page scrolls, as you can see on the capture. Any idea what to do to solve this please?

The link of the site to see in real time : https://digicommunicate.dudasites.com/

digi.png

Thank you

Best Answers

  • Aj_Cre8
    Aj_Cre8 Member Posts: 677 MVP
    Answer ✓

    Nice observation.

    On the live site, the header is not sticky so it wont shrink.. If you want it to shrink you need to enable sticky header from the content section of your "Header" tab.

    image.png
    image.png
    image.png

    You can to make sure only your NAVIGATION row is sticky in the header to avoid the top row from moving down with the header and shrinking.

    image.png

    Also, I would add, you shouldn't need to use Inner Rows for the navigation you have built. It can be done with just columns inside the row. Am curious to know what your thought process behind the inner rows was?

  • visioncraft
    visioncraft Member Posts: 162 Learner
    Answer ✓

    Hey, @Stresor , is it the 'shrinking header' effect that is causing the issue? If so, does it stop if you turn it off? You can still have a sticky header, even if you're not using the 'shrinking effect'.

    Also, if you're NOT using the 'shrink effect' on the header - if all you want is for the header to stay fixed - then you might be able to achieve more complex layouts even more easily if you use a flex section. I'm a Duda newbie, and I've found the old 'row' way of doing layouts very fiddly - flex is actually much simpler. If you feel the same way, then you can simply add a flex section to the header, and add the widgets you need - eg., navigation, image for the logo, etc. - and use that as the main navigation menu on your site.

Answers

  • Stresor
    Stresor Member Posts: 5

    Thanks @Aj_Cre8 for your answer.

    Shrinking Header is actually enabled as you can see here.

    capture.png

    You didn’t see it online because I had to disable header shrinkage first.

    Also, unlike your screenshot, at home I don’t have a sticky header in CONTENT.

    capture1.png

    "Also, I would add, you shouldn't need to use Inner Rows for the navigation you have built. It can be done with just columns inside the row. Am curious to know what your thought process behind the inner rows was?"

    I actually placed the Inner Rows to have cells for each of the social media icons and also to have a cell for the logo and another for the slogan.

    capture2.jpg

    I am a beginner on Duda, so if there is a more adequate way to do this, thank you for helping me.

    Thanks.

Categories