Let's Build A New Flex Header

Talia · June 2022

Hi everyone! I’m @Talia, a product designer in the Editor team at Duda. We’re planning a new header in Flex in order to provide you the best responsive solution for your site, and we would love to hear your perspective on what can be better or different than the header solution we currently have.

Not sure where to start? May I suggest:

What’s your least favorite thing about our current header
What’s great but could be better
What should we keep and what shouldn’t we

I’m looking forward to your feedback!

Bruce_McCaughan · June 2022

Hi Talia,

I don't have any issues with the header as far as functionality goes. It does what it's supposed to do. Display the logo, navigation, and a few other links and buttons.

What bothers me is the clunkiness of the transitions. Every other website on the Net has nice, soft transitions when the header shrinks or sticks. But Duda just jerks itself into place suddenly. (This also applies to the Accordion Widget. Same transition problem.)

Also, I don't know if this is a header issue, but I also despise that navigation/pages cannot be hidden on DT without also hiding on Tablet (when site is set to "Responsive").

Thanks for asking.

Justin_Collins · June 2022

I'll second what Bruce said about the jittery-ness, though it's only on occasion that I notice it. Also showing/ hiding items.

For the most part, Flex should solve a lot of the spacing & sizing issues; like using "vw" or % for spacing between Nav items will be a welcomed improvement. As it stands, when you change the browser size, some items drop down to the second row even if there's plenty of space.

Also would be great to have more individual options for what disappears on scroll.

Aj_Cre8 · June 2022

I agree.

Smoother transitions for sticky headers. I actually believe we need transition controls on all widgets that have hover effects or scrolling effects.

Need to be able to use different headers on different pages (if we want to. It can still sync, but I should have an option to displayed a different header on different pages if I want to).

I like that we can change colors for the sticky headers (when utilizing a transparent background and then the background color changes) the ability to change colors could be a little better! Right now it doesn't always work right.

I would also like the ability to change the sticky header when scrolling to a completely differently designed row! So we could have

This header when the site loads and then when we scroll we could have

this header when we scroll! (hope that makes sense)

Eva_Pettifor · June 2022

Glad to hear you will upgrade the header design options.

I agree with all comments above. Here's mine:

What’s your least favorite thing about our current header - being restricted to the column sizes, this makes detailed designs somewhat impossible (unless you are a master at html/css). For example I often like to have icons and buttons on the one row, but then this can get ugly when I stretch the column to fit them as it only snaps to one or two possible positions. So that makes buttons/icons wrap around or makes the nav wrap around even though there is enough space if the column was at a custom size. And then of course you have the challenge of tablet view .... The other thing I generally find the header buggy sometimes, it might disappear completely in the editor when I'm designing, or turn a pale blue turquoise colour! And other times you turn a header off to be hidden, and it keeps reappearing out of the blue!
What’s great but could be better - general ease of building is great - what could be better? Fix the above :) Adding some new design/layout options similar to sections would be good especially for more complex layouts like having 2 navs on the one header, search box, phone number, icons etc.
What should we keep and what shouldn’t we - keep the ease of use, ditch the bad things I've mentioned above :)

Bryon_McCartney · June 2022

Things I’d like to see…

Better control of overlay colors, especially for gradients over the header image block. (Should be available universality)

Ability to design header and footer at the same time or to easily transfer layouts/settings from one to the other.

More options for Nav and subfolder layouts, e.g. spacing between main Nav and sub folders.

More options for shrinking header control, e.g. keeping logo left-aligned on shrink or rearranging logo and tagline to side by side from stacked on shrink.

Maybe the ability to periodically animate or flash a call to action button when in the header, or a personalization feature where the header changes on revisits.

FloridaPam · June 2022

Loving the display of 2 different headers as mentioned by @Aj_Cre8 and upvoted that one.

I of course will welcome the spacing issues that will be fixed using Flex.

My wish list is with the navigation. I'd like to have the same navigation option that Duda itself uses! More hamburger menu options. More wow factor navigations. The ability to use an image as a page "name" in nav (like a home .svg instead of the word Home). Or use all symbols that when hovered over reveal the page name. Ability to choose different fonts or colors etc. for individual nav page names. You get the idea!

Luke · June 2022

Could be better...

Current header can have a shadow, but you cannot remove it on scroll. So if you have a blank header background (pre-scroll) the shadow is impossible

It's super hard to add in a language selector without breaking everything

It's impossible to centre content when you have 4 columns

I would love to use a background-blur effect as this is something my designer adds to nearly all our figma designs but we remove in Duda 😥

You can have a hamburger or a menu, but you cannot have a hamburger and a menu with main items. This is a shame because hiding items behind a hamburger menu means people will not see them. But at the same time you don't have enough space to put every menu item in the menu.

Parts I like

Ability to have multiple rows

Shrinking header

Out of the box variations