You're feeling great about the overall look and feel of your site. It just seems to be lacking one thing: easy-to-spot navigation.
In this article, you'll learn how to edit your site's header.
Introduction
A site header is the top section of your website that appears on most (or all) pages. It’s one of the most important parts of your site because it helps visitors quickly understand where they are, what you offer, and what they can do next.
On most websites, the header is used to:
Show your brand: It includes your logo or site name, helping visitors recognize your business.
Help people navigate: Headers can contain the main menu, with links like Home, About, Products, Blog, or Contact, so visitors can easily move around your site.
Guide visitors to take action: You can often place important buttons like Sign up, Buy now, Log in, or Get started to encourage next steps.
Your site header will look the same on every page, creating a familiar and easy-to-use experience for visitors.
Podia’s responsive design automatically adjusts your site header for different screen sizes, so it looks and works great on any device.
On tablets and phones, for example, visitors will see a mobile-optimized version of your header that’s easier to use and visually consistent with the rest of your site.
Editing your site's header
Here's how to edit your site's header
From your Podia dashboard, click on Website in the sidebar menu and then select Edit Site.
Once inside the Site builder, click directly on the header or use the pen icon at the right to make changes (The site header is the first section of your site!)
Use the left-hand menu to make modifications to your site's header, such as adding a logo, links, or show/hide the Login button.
Here's what you'll be able to customize by editing your site's header:
Adding a site logo
Adding a logo to your site can be done directly from your Settings.
If you want your site logo to be different (or use a different version) than the one you uploaded, simply follow the steps below:
From the left-hand menu, click on the logo field to upload a file from your computer, choose from your media library or search from Unsplash.
Enter an Alt text using the available field if you want!
Adding header links
Adding links to your header is a perfect way to create a navigation menu that directs users to other pages/areas of your Podia site!
Here's how to set it up:
From the left-hand menu, click on “New link”.
Enter a label for your link, which is the name that will show up on your site's header.
Enter a URL or select one of the quick links available options to link people to other site pages, products & more!
The new link will automatically be added to your site's header
Repeat the process to add as many links as you'd like. - After setting up links, test them thoroughly to confirm functionality, especially after making domain changes or site updates.
Please note: If you are using the URL option, make sure you include the full url, including the https:// and subdomain (such as www, store, courses, etc).
Example 1: Add https://store.podia.com/10-step-product-bootcamp instead of store.podia.com/10-step-product-bootcamp
Example 2: podia.com alone would not suffice; you'd need to include https://www.podia.com in order for it to work (both the https:// and the www would be key here).
Otherwise, customers may be redirected to your homepage or be given an error page depending on the page they're clicking it from.
Hiding the login button
By default, Podia shows a Login button across all of your site pages; this is how your customers will log in to access their purchased products.
If the Login button doesn't suit your needs, you can easily remove it from your site pages.
This action will remove the Login button across all of your site pages.
Simply turn off the option that says Show login button from the left-hand menu.
The login button will be removed from your site pages.
Customers will still be able to access their products by visiting the login page located at yoursite.com/login
Changing your site's header design
You can also customize your site header’s design by adjusting things like colors, spacing, the layout of items, and other visual details to match your site’s style.
To edit your site's header design:
Click on your site's header to bring up its editing options in the left-hand menu
Click on the "Design" tab to open up its options.
Use the available options to modify header options, such as:
Image: This will adjust the width, aspect ratio, and look of your logo image.
Layout: Adjust the alignment of the items in your header by choosing left, right, or center alignment, including a mobile view. You can also modify the header’s width, gap, and padding settings
Appearance: Customize the color of your header’s background and text, and apply borders. You can select from predefined colors or create your own custom color combination.
Note: Your header menu's font is controlled by the navigation font chosen on the Fonts tab.
FAQs
Can I remove the site header from my pages?
Can I remove the site header from my pages?
Yes. It is possible to remove the site header from specific pages of your site.
Can I change the layout and sizing of my logo for mobile view?
Can I change the layout and sizing of my logo for mobile view?
Right now, there is no way to adjust the appearance specifically for mobile-view. We recommend designing your logo to be suitable for both desktop and mobile versions of your website.
We recommend a minimum size of 200x600px. Landscape-style formatting is preferred, as portrait or square images can appear small on mobile devices.
Why is it redirecting me to the homepage when I click on one or more of my header links?
Why is it redirecting me to the homepage when I click on one or more of my header links?
If a site page URL is invalid or left blank, clicking that link in your header will automatically redirect visitors to your homepage.
Go through the instructions above to edit and review your links to ensure they're accurate and complete.
Open your site editor and navigate to the header section.
Click each navigation item (e.g., "About" or "Courses") and check the URL.
Ensure each link points to the correct internal page.
If you are linking to a page that you've created inside Podia, use quick links, as it avoids issues with hard-coded or outdated links.
Still need help?
If you have any questions, send an email to hello@podia.com or click the purple help icon to send us a message 😄