Learn how to take full control of your website's navigation and branding using Grigora's powerful Header & Footer editor. Whether you're building a blog, portfolio, or business site, Grigora makes it easy to design pro-level headers and footers with no coding needed.
Creating Your Header Structure
Start by creating a header using containers and other elements to build a professional navigation area. Inside the container, add key elements like:
-
Site title for brand identity and recognition
-
Navigation element to house your menu structure
-
Menu within the navigation for organized link management
This creates a clean header structure that provides all the essential navigation elements your visitors need while maintaining a professional appearance.
Building Your Footer Layout
Similarly, create a footer that serves your site's needs by including elements like:
-
Newsletter subscription form for lead generation
-
Organized layout using containers and columns for structured content presentation
-
Contact information, social links, or other footer widgets as needed
This footer structure provides valuable functionality while maintaining visual consistency with your overall site design.
Converting to Site-Wide Components
To use your header and footer across your entire website, you need to convert them into components for consistent application and easy management.
Creating Header Component
Select the main container of your header that encompasses all header elements. Open its settings and click on "Components", then click "Create a Component".
Give it a descriptive name like "Header" and click the "Create a Component" button. Your header is now a component that you can use throughout your site with powerful benefits.
Benefits of Components
Any changes you make to this component will automatically reflect across your entire website, ensuring consistency and saving time on updates. You can access your components from the left panel where you'll see your newly created header component ready for use.
Creating Sticky Headers
You can create sticky headers in Grigora to improve user experience and navigation accessibility.
Enabling Sticky Behavior
To make your header stick to the top of the page:
-
Edit your header component by clicking "Edit Header" or accessing it from the left panel components section
-
Select the main container of your header. Go to "Settings," then "Advanced Settings". Find the option called "Sticky" and select "Top"
This will make your header always stay at the top of the page when users scroll, providing constant access to navigation and important elements.
Device-Specific Control
You can also disable the sticky behavior for tablet and mobile devices if needed for better mobile user experience. This flexibility allows you to optimize navigation behavior for different screen sizes.
Results and User Experience
As you can see, the header now stays fixed at the top while scrolling, creating perfect conditions for easy navigation. This sticky behavior keeps your brand, navigation, and calls-to-action visible at all times, potentially improving user engagement and conversion rates.
Site-Wide Consistency
This component system ensures consistent design across your entire website by allowing you to:
-
Create once, use everywhere for efficient design management
-
Update globally by modifying the component once
-
Maintain brand consistency across all pages automatically
-
Save time on repetitive design tasks