Shrinking Header

  • Shrinking Header
  • Duda Support > Responsive Website Builder > Getting Started
  • Responsive Website Builder

Overview

The Shrinking Header is a smaller version of the site header, enabling you to keep important navigation information fixed without distracting users as they scroll down a page and without taking up too much space. It acts as a sticky header feature but condenses the size of the logos and other widgets in your header. It is particularly useful in sites that have large headers and sites that are designed for long scrolling. 

shrinkingheader1_en-US.gif

Design

To edit the design of the shrinking header:

  1. To open the header design editor, click the header icon and select Edit Design.
  2. Enable the shrinking header by clicking the toggle.
    shrinkingheader2_en-US.png
  3. You have the following options:
    • Only Show Navigation Row. Only display the row with navigation when the header shrinks. This feature is only applicable if there is more than one row in the header.
    • Logo Size. Change the size that the logo or image shrinks to when the header shrinks (default = 66%).
    • Background color. Change the background color of the shrinking header. Note that the row background color overrides the shrinking header background color. 
    • Change logo on scroll. Select a logo to display on scroll. 
    • Header spacing. Adjust the top and bottom padding of the shrinking header. You can change the header spacing per device. 

What happens when the shrinking header is activated?

When the shrinking header is activated:

  • The site scrolls down in order to display the shrinking header effects.
  • The sticky header feature is automatically applied to the header.
  • The header spacing changes the top/bottom padding, and margins to 0.
    Note that this changes the padding and margins of the header, not the rows inside of the header. 
  • Images in the header shrink to the percentage in the logo size bar (default = 66%).
    Note that all images in the header shrink to the logo size.
  • Switching the header layout does not change the shrinking header settings.
  • Not all widgets are compatible and appear in the shrinking header. The following widgets display in a shrinking header:
    • Navigation
    • Multi-Language widget
    • Social Icons
    • Click to Call button
    • OpenTable button
    • Click to Email button
    • vCita
    • PayPal button
    • FaceBook Like button
    • Images and Logos
    • Store Cart
    • Paragraph widgets
    • Title widgets
    • Buttons

What are some effects of a shrunk header?

Once the user scrolls passed the header height, the header shrinks. When the header is shrunk:

  • If columns have one visible widget, the widget is centered inside the column vertically and the top/bottom padding and margins will be set to 0.
  • If columns have more than one visible widget, the widgets are not aligned vertically and the top/bottom padding and margins will be set to 10px.
  • If there are empty rows with columns, the columns span the entire space of the row. 
  • To handle templates with a minimum height value in the header, the min-height of the header is set to auto.

Considerations

Can I edit widgets when the header is shrunk?

No. Scroll up to the top of the site in order to make edits to the header.

On what views and settings is the shrinking header available?

The shrinking header is available on Desktop and Tablet views. Shrinking headers can only be toggled when the header is turned into a row. If the header is not a row and the template has a fixed header, the shrinking header option is not available.

Does the shrinking header change the padding and margin spacing applied to rows inside the header?

No, the shrinking header shrinks the header by setting the top/bottom padding and margins to 0. However, if there is spacing applied to the rows within the header, it does not change the padding and margins of these rows. 

Will the design properties of the shrinking header override the row properties (ex: background color)? 

No, the row design properties override the shrinking header properties. For example, if you set a row background in the header, the row background displays over the shrinking header background.  

What if you have a widget in the header that does appear in the shrinking header?

If you have a widget placed in your header that is not compatible with the shrinking header, then an empty column appears in place of the widget when the shrinking header is triggered. 

Are empty rows displayed in the shrinking header?

Yes. Even if you remove the widget from a row to create an empty row, the padding and margins of the row do not disappear and display on the shrinking header.

What if I add a middle logo to the navigation or change the logo?

The middle logo decreases in size like the regular logo, but if you change the logo, you must redefine the logo size.

Will widgets be aligned to the row or the column?

Widgets are aligned vertically to the middle of the column.

I can't see my shrinking header! What happened?

If the page length is the size of the view port, you will not see the shrinking header. You must have enough rows on your site to be able to scroll down on the site and trigger the shrinking header. If you only have one row on the page, the site will not scroll and the shrinking header will not trigger.

 

 

 

Was this article helpful?
0 out of 0 found this helpful

Comments

2 comments

  • teebourque

    Hey Dudes,
    I am struggling to find where i can Change logo on scroll in the shrinking header. 
    Can someone show me where it is?
    Thanks!

    0
    Comment actions Permalink
  • kia

    Hi! Good question. Under the Design heading in this topic, you can enable the shrinking header by clicking the toggle (step 2). 

    0
    Comment actions Permalink

Please sign in to leave a comment.

×

Please Log in as a Pro

Priority Phone Support is available exclusively to Pros. Log in to your Pro account now to see our international support numbers.

Log In
Not a Pro? Purchase a Pro plan!