- Knowledge Base
- Responsive Website Builder
- Headers In Duda Responsive Builder
- Duda Support > Responsive Website Builder > Editing a Site
The header is the part of your site that contains the logo and navigation. There are a lot of different ways to control the style of your header, which help you in creating an appealing header for your site.
In the responsive builder, there are three types of headers available. These types are fixed, flexible and sticky headers.
Headers can be set to be flexible by turning the header into a row. By doing this, the header can act like a row that can take in widgets from the Widgets section. For more information on turning the header into a row, click here.
Please keep in mind that if you have turned your header into a flexible row and later decide that you want your header to be fixed, you will not be able to change the header back.
In some of our older templates, headers are fixed. This means that the header contains the logo, navigation, social icons and text, but is locked and will not be customizable by adding widgets from the Widgets section.
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. For more information about shrinking headers, see our support article here.
In the Design options for the navigation, you can switch your header into one of the several predesigned layouts for the header. Switching to one of these layouts will change fixed headers into flexible headers. Using these predesigned headers will help save time in designing your site. You can always select a layout and then modify it afterward. Layouts are a great starting place for designing your header.
Note: Selecting one of these layouts will remove any existing content from the header section, so be sure to have a backup before selecting these options. Also when using one of these layouts the header will become flexible and you will not be able to switch back to a fixed header.
Click the Header tab in the Editor to open the menu options for the header. Select the option Set As Sticky Header to turn your header into a static header that will stay in place when you scrolls your pages in your site.
Hide header on page
Click the Header tab to open the menu options for the header. The option "Hide on this Page" will appear where you can hide the header in desktop, tablet, or mobile.
Other header options
There are other header options available in the design menu, which will let you further customize the look of your header on your site. Access the header design menu by left-clicking the header to open up the Editor, then click the Design tab.
How do I have more control over the header?
In order to customize the header further, it must be turned into a "flexible" header. Please see this article here for turning the header into a row.
I deleted my logo, how do I get it back?
If you deleted your logo, you can get it back by simply dragging an image element back into the header. You can then set the link to go back to the homepage.
You can also check the design menu to see options for revealing your logo.
Can I keep my logo when switching header layouts?
If the header contains one image, the logo of the site will be kept when moving between header layouts. In case there’s more than one image or the logo is textual, the logo image is kept as in the layout.
Can I keep my social icons when switching header layouts?
When switching to a new header layout that contains social icons, the icons are displayed as defined in the content library. If there are no social links, the social icons are kept generic as in the layout.
I can't add widgets or delete things in the mobile header
If you're trying to add content to the mobile version of the header, unfortunately, the mobile header has a fixed design and isn't open to customization (outside of the settings that are already there).
You can change the content of your mobile header by:
- Going to the mobile view
- Clicking the content contained there
- Clicking edit
I can't change the logo size (mobile only)
If you can't change the logo size, try changing the logo style in the "Design" section (see "Header section" above) to see if you can toggle it back and forth.
Also, there is a maximum width of the logo in some views due to the hamburger men. You can try swapping the navigation layout to change your navigation's style.