How to make a responsive header with Elementor

Summary

This tutorial guides viewers on creating a responsive Elementor header using flexbox technology. It incorporates Untitled UI, a comprehensive UI kit, to design a mobile and tablet-friendly sticky header. The video demonstrates setting up a child theme, activating flexbox, and using Elementor's team builder to add and style menu widgets, buttons, and a site logo. It also covers creating a WordPress menu, adjusting typography, colors, and hover effects to match the UI kit's design. Finally, it ensures the header is sticky on scroll and responsive across devices.

Takeaways

• 😀 The tutorial focuses on creating a responsive Elementor header using flexbox technology.
• 📱 It ensures the header is mobile, tablet-friendly, and sticky to the top of the screen.
• 🛠️ The tutorial utilizes the Untitled UI kit, which is a comprehensive resource for UI design elements.
• 🔗 A link to the Untitled UI kit is provided in the video description for those interested in the pro version.
• 🎨 The tutorial demonstrates how to activate flexbox container in Elementor's settings and features.
• 🏗️ It guides viewers through the process of building the header structure using Elementor's team Builder and header options.
• 🔧 The video shows how to add and style menu widgets, buttons, and the site logo within the header.
• 🖌️ It covers the process of customizing the typography, colors, and hover effects to match the Untitled UI kit's design.
• 📊 The tutorial explains how to adjust the header's layout for different screen sizes, ensuring a responsive design.
• 🔄 It demonstrates techniques for fixing alignment and spacing issues to achieve a clean and polished header design.

Q & A

What is the main focus of the video tutorial?

The main focus of the video tutorial is to create a responsive Elementor header that works on mobile, tablet, and desktop, using flexbox technology and incorporating a UI kit called Untitled UI.

Which UI kit is recommended for enhancing the design of the Elementor header?

The video recommends using the Untitled UI kit for enhancing the design of the Elementor header. It offers a variety of design elements that can be used for projects.

What is the first step in creating the header using Elementor?

The first step is to access the Elementor's Template Builder and then select 'Header' to start adding elements to create the header structure.

How does one add a new header in Elementor?

To add a new header in Elementor, click the plus button and then select 'Add New'. After that, you can start adding elements to your header.

What widget is used to create the menu in the Elementor header?

The 'Menu' widget is used to create the menu in the Elementor header. It is added by searching for it and then dragging and dropping it into the desired container.

How can you ensure that the header is sticky on scroll?

To make the header sticky on scroll, you need to select the main container, go to the 'Style' tab, and then choose the 'Sticky' motion effect, setting it to 'Stick to the top'.

What is the process to add a logo to the Elementor header?

To add a logo, you first upload the logo image in the WordPress admin panel under 'Appearance' > 'Customize' > 'Site Identity'. Then, in Elementor, you drag and drop the 'Site Logo' widget into the header and adjust its size and alignment as needed.

How does one change the text of the buttons in the Elementor header?

To change the text of the buttons, select the button widget and edit the text directly in the 'Content' tab or by clicking on the text and typing the new text.

What is the role of the 'Navigator' in Elementor when building the header?

The 'Navigator' in Elementor provides a visual structure of the elements on the page, making it easier to select and edit specific parts of the header without having to manually click through layers.

How can you adjust the alignment and width of elements within the header?

You can adjust the alignment and width of elements within the header by selecting the container or element, then using the 'Layout' and 'Style' tabs to modify properties such as 'Align Items', 'Justify Content', and 'Width'.

What is the purpose of disabling default colors and fonts in the Elementor settings?

Disabling default colors and fonts in the Elementor settings allows for a clean slate when starting a new design, enabling full control over the aesthetics without being influenced by pre-set styles.

Outlines

00:00

🛠️ Setting Up a Responsive Elementor Header

The video tutorial begins by introducing the process of creating a responsive Elementor header that works across mobile, tablet, and desktop devices. The presenter plans to utilize flexbox technology and a UI kit called 'Untitled UI' for design elements. The tutorial focuses on using a child theme of the 'Hello Elementor' theme and activating the flexbox container in the theme settings. The presenter guides viewers on how to add a new header using Elementor's template builder, and then proceeds to structure the header by adding containers and widgets such as the menu widget and buttons. The process involves duplicating containers, adjusting their layout, and organizing the elements using the Navigator tool for better visibility and control.

05:02

🎨 Customizing the Header with UI Kit and Menu Setup

In this segment, the presenter demonstrates how to customize the header's appearance using the 'Untitled UI' kit, which includes a variety of design elements. The focus is on styling the menu, buttons, and other elements according to the UI kit's specifications. The tutorial covers changing the text, adjusting typography, and applying colors to match the design. The presenter also shows how to create and add a menu in WordPress, which will be integrated into the Elementor header. This includes publishing the page, adding conditions, and saving the menu. The tutorial also covers how to edit the header template in Elementor, add a site logo widget, and style it according to the design requirements.

10:04

🔧 Adjusting Logo and Buttons for Consistency

The video continues with the presenter adjusting the logo and buttons within the header to ensure they match the design from the 'Untitled UI' kit. This includes changing the order of elements, updating the template, and uploading a logo that fits the design. The presenter also discusses adjusting the logo's size and alignment, as well as modifying the button's border radius and padding to closely resemble the design from the UI kit. The tutorial emphasizes the importance of previewing the design and making necessary adjustments to achieve a consistent look across different devices.

15:04

📱 Optimizing for Mobile and Tablet Views

This part of the tutorial focuses on optimizing the header for mobile and tablet views. The presenter shows how to adjust the menu and logo for smaller screens, ensuring that they are appropriately sized and aligned. The tutorial includes steps for hiding certain elements on mobile and tablet views, adjusting the width of containers, and ensuring that the menu items are full-width for better readability on smaller screens. The presenter also demonstrates how to change the menu icon for mobile views and ensure that the menu functions correctly on all devices.

20:05

🔄 Final Touches and Sticky Header Effect

The final part of the tutorial involves making final adjustments to the header, such as cleaning up default spacing in Elementor containers and ensuring that elements are correctly aligned and sized. The presenter also adds a sticky header effect, which keeps the header at the top of the screen when scrolling down the page. The tutorial concludes with a demonstration of the header's appearance and functionality on desktop, tablet, and mobile views, highlighting the responsive nature of the design. The presenter encourages viewers to perfect their design to match the UI kit closely and thanks them for watching the tutorial.

Keywords

💡Elementor

Elementor is a popular page builder plugin for WordPress that allows users to create and customize their websites without needing to write code. In the video, the presenter uses Elementor to create a responsive header, demonstrating how to utilize its features like the Team Builder and header editing tools. This showcases Elementor's role in facilitating website design and customization.

💡Responsive

Responsive design refers to the ability of a website to adjust its layout and elements to fit different screen sizes and devices, ensuring a consistent user experience. The video tutorial focuses on creating a responsive header that adapts to mobile, tablet, and desktop views, highlighting the importance of responsive design in modern web development.

💡Flexbox

Flexbox is a CSS layout module that makes it easier to design flexible and responsive layouts. The video script mentions using Flexbox technology to create a flexible and responsive header. Flexbox is utilized to align and distribute space among items in the header, demonstrating its utility in achieving complex layouts with ease.

💡UI Kit

A UI (User Interface) kit is a collection of design elements and components that can be used to create a consistent look and feel across a website or application. The video references 'Untitled UI,' a UI kit that the presenter uses to style the header, showcasing how UI kits can streamline the design process and ensure visual consistency.

💡Sticky Header

A sticky header is a website design feature where the header remains visible at the top of the screen as the user scrolls down the page. The tutorial demonstrates how to make the header sticky using Elementor's features, which enhances user navigation and maintains accessibility throughout the site.

💡Menu Widget

In the context of the video, a menu widget is a component used to create a navigation menu within the Elementor interface. The presenter adds a menu widget to the header and customizes it, illustrating how menu widgets can be integrated into a website's header to provide site navigation.

💡Child Theme

A child theme in WordPress is a theme that inherits the functionality and styling of a parent theme but allows for modifications without affecting the parent theme's files. The script mentions using a child theme of 'Hello Theme,' emphasizing the practice of using child themes to customize websites while preserving original theme integrity.

💡Typography

Typography in web design refers to the art and technique of arranging type to make written language legible and appealing. The video script discusses changing the typography of the menu items, such as font size and weight, to match the design from the UI kit, demonstrating the importance of typography in achieving a polished and professional look.

💡Hover Effect

A hover effect is a visual change that occurs when a user points their cursor at an element on a webpage. The video tutorial shows how to create a hover effect for the menu and buttons, enhancing interactivity and providing visual feedback to users as they navigate the header.

💡Padding

Padding in web design is the space between the content of an element and its border. The script describes adjusting the padding of buttons and other elements to refine the layout and improve the aesthetic appeal. Proper padding ensures that elements are not cramped and are visually comfortable.

💡Border Radius

Border radius is a CSS property that defines the degree to which the corners of an element are rounded. In the video, the presenter changes the border radius of buttons to give them a more modern and smooth appearance, illustrating how border radius can be used to create custom shapes and styles for design elements.

Highlights

Introduction to creating a responsive Elementor header using flexbox technology.

Utilization of Untitled UI kit for design elements.

Enabling flexbox container in Elementor settings for better layout control.

Adding a new header using Elementor's template builder.

Using the Navigator for efficient widget management in Elementor.

Creating a menu widget and organizing it within the header structure.

Duplicating and managing container widgets for header elements.

Adding and styling button widgets for the header.

Adjusting the layout direction and content justification in the header.

Creating and assigning a WordPress menu to the Elementor header.

Incorporating the site logo widget and aligning it within the header.

Customizing the header's design using Untitled UI kit elements.

Styling the menu and buttons with specific typography and colors.

Previewing and adjusting the header for desktop, tablet, and mobile views.

Making the header sticky on scroll for improved user experience.

Troubleshooting and fixing alignment issues in responsive views.

Finalizing the header design with proper padding, alignment, and spacing adjustments.

Conclusion and a call to action for viewers to follow along with the tutorial.

Transcripts

hi everyone and welcome in this new

video tutorial today we are going to

create an Elementor header in a

responsive way so it will be a mobile

tablet it will be sticky and we are

going to use flexbox technology and the

best thing is that we are going to use

this cool UI kit called Untitled UI you

will find the link in the description if

you want to get the pro version of this

big figma UI kit there is a ton of

things that you can use for your project

and looks pretty awesome so let's start

with the video

hi everyone so I'm going to show you

what I'm using as a team I'm using a

child theme of the hello team you can

also use only the hello team if you

prefer then on the settings and features

make sure you have flexbox container

activated

on General I usually disable the default

colors and font

click on team Builder and then on header

click the plus button to add a new

header

so I will close this pop-up and then

create my own Header by clicking the

plus button and clicking this little

arrow here so here we are going to add

our elements so click on the plus button

then select the container widget add it

here and as you can see I'm using the

Navigator right click here and then

navigator to show the Navigator if you

don't know what I'm using just check the

Navigator every time it's very useful

so follow along here click on the plus

button

search for a widget in this case the

menu widget

perfect

so now we have the menu widget here

right we are going to click on this

container and then duplicate it so now

we have two containers select the main

container on the top

and then select the direction right

select the the menu widget here and

delete it

right click delete and we're going to

add our buttons here

so search for button

drag and drop the button widget

click on the button widget right click

duplicate and now we have two button

widgets select the container of those

buttons you can select it from here from

the Navigator as you can see and then

again

Direction horizontal on the right and

then we are going to put the Justified

content on the end in this case we have

our structure right now so here we put

on the start by selecting this container

and now let's change the text of the

buttons

so select the buttons and change the

text very easily

great now we have to change the menu

right we don't have a menu on WordPress

so let's create it publish the page add

a condition and select entire site save

and close

perfect

so let's get back to the WordPress admin

panel so I usually select this and WP

dashboard and apply so every time I exit

from this I get here and then I'm going

to appearance menus and I will start

adding my menu so in this case I will

call it main menu or let's call it a

main one okay

great so now I'm going to add all the

the pages in this case I'm going to add

custom links because I don't have pages

in your case you can use pages instead

as you can see now I'm adding all my

pages

okay so I added everything save the menu

and now we should go back to our um you

know header

make sure the menu is saved okay we have

saved it so we are going now Elementor

sorry templates team Builder and you

know Elementor header here is it

click on it

and then edit

great so now click on this little icon

and change the name of this template

header template I will call it menu one

and as you can see anyway we have added

our menu and it's displaying right here

so let's go and add also the logo click

on this container here click on this

icon and select the site log widget drag

and drop it here and now we are going to

style it I'm going to select the pixel

instead of percentage and then give here

give him a width

in this case we're going to select again

the container and then we are going to

select the direction again on the right

and now we are going to change the order

of it so very easily from the Navigator

as you can see we can select the site

logo drag and drop it on the top and now

the order is correct so let's see the

preview

great looks like the structure is done

select the main container and then you

can play with the width if you want so

you can select the the width you want

here I will keep it like this for now I

will change it later and here you can

have it also full weight if you want and

as you can see it's taking the full

weight of the of the whole website

great

so now we are going to try and style

everything

for the design I'm using

um Untitled UI as you can see I'm

putting the link in the description to

get this big UI kit I'm saving now the

logo because I want to add a logo here

I'm using the the UI kit logo so first

update this template and let's

um edit the menu by changing the styling

of the menu so basically I get here on

the design and the UI kit settings and I

check like

um you know the font size and everything

so

with this clicked go on Style

check typography and of course start

adding the typography in this case I'm

going to use enter and the size will be

16 pixel

the weight will be

um let's see semi bolt 600 okay and

we'll also need to change the color

right so let's see what is the color

here

so I'm going to copy the the code color

code right here wait uh where is it

um okay not here sorry but here in the

text color

here is it and now the um the menu items

looks like the design right we don't

have drop downs but anyway let's go to

the buttons and again select the main

color of the button

copy the code and let me go first of all

on the hover because I want to make the

color hovering effect here on this menu

as you can see now the text is changing

the color and I'm going also to remove

the underline because I don't like it

very much so I'm going to remove it so

no

and now as you can see everything is

working fine Mouse over effect and now

is the turn of the buttons click on the

buttons here and start styling it so the

first one actually doesn't have like a

background right it's just looks like a

simple menu item so I select here I

select it here on the design and then I

just keep you know adding The Styling so

style it very quickly

on style change the color of the text

perfect

and then we also need to change the

background color right so the background

type it's basically on the bottom uh

here is it if you want you can disable

it but if you disable it I see usually

that the color doesn't change so I

usually enable it select a white color

as background or you can even make it

transparent so you're sure that there is

no background so I usually do this and

then you can change the typography to

enter of course I usually use

um you know

a general setting for the fonts and

everything but in this tutorial we are

going to basically set up each item so

it's faster

great so here is it and the design looks

the same let me try to check the font

size and everything

um yeah so everything is correct great

so I'm going to copy right click and

paste the style also on the sign in

um button and then

you know change the background by

clicking here we are going to paste the

color so I'm going to get this the color

from the design again

if I remember here is it and okay so we

have this color here

and is the normal

color perfect we need to make the test

why the text sorry White and the hover

effect we need to change it to

um darker color so I'm going to select

the color icon here and then on figma

this UI kit can also have

um the

um how can I call it

the state right so the state could be in

Hover and as you can see now it's darker

so I'm going to get this color here

and copy

and paste it

so you can play around here as you can

see there is a lot of option in this UI

kit anyway let's go back and paste the

darker color and now when I Mouse over

on the sign in Button as you can see

there is the mouse hover effect that's

great

so perfect let's see the preview and

everything looks really cool

maybe the design is not exactly the same

but we will fix that in a moment

so click on the first button

check the hover effect

I'm going to change the text color again

to the Violet so that you actually have

also the login Mouse hover effect and

then the logo let's change the logo now

so update the template and you need to

click on this little Burger menu here on

the left wait

click again and make sure it's boxed

let's say I want to make it box it right

away

so let's see what the figma has as width

right of the mini width so I'm selecting

the menu width and as you can see is it

1440 and I will do the same here so I

will add 1440.

and now I want to change the logo right

so save the template first

then go on the top left Burger menu site

settings and then you're going to change

the site identity and here site logo and

I'm going to upload my logo so I'm going

to use the Untitled logo

and then you need to click update to see

the change

close this with this x button so you get

back to the template and as you can see

now we have our logo right but the size

is not correct so let's click on the

container now and then I'm going to

check

the center right the Align Center so the

logo is now centered vertically then the

width of the logo we are going to set it

up let me check the design so if I

select the logo here it's giving me on

the top right the width and is 142 and

I'm going to add here 142 pixel as you

can see now the logo is correctly sized

and going to update again

now let's click on the button here and

go on style and Border radius we're

going to change it to 8. I don't

remember if it's actually eight but yep

it's actually eight and then we are

going to add the padding right I'm going

to try to add the same padding here

um as the design on figma as you can see

I unlocked

um the linked so I can change the values

for each input box again let me check

this

so I'm checking the font because doesn't

really look the same probably the pixel

padding on the web browser is not

actually looking the same anyway I think

the line height of the the font is the

problem here anyway I don't want to lose

time so I'm going to try and reproduce

this design

um by adding some some pixels so again

click the button and try to play around

with the padding

okay so uh I think I will set it like

this looks a little bit more like the

figma in this case

um and then

um I'm going to try and check again here

the font sizing everything is correct so

let's see the preview it looks a little

bit better okay take your time and make

it same as the design if you want to get

the same exact design so I'm going to

update this

and then

um I'm going to check now

um this little border here and a little

border is a gray color so I'm going to

click here and get the color code and

basically go back to Wordpress

and then select the main container and

you can go on style and add a border so

unlock the link here and add a one

border and then select solid border and

now we can change the color of that

solid Border in the color code we just

got the gray one so now if I check the

preview we have a little Gray Line here

at the bottom that looks really nice so

open again the option update here go on

the bottom left icon for the mobile and

tablet version and now you can select

this menu here and make it full weight

advanced

select the center to align itself

and that's great now if I click on it

the menu is coming down

here is the preview

great so now let's change the settings

click on this icon here okay right click

copy select the container the right

container and then right click paste now

we have our icon here our menu icon if

you click on it it's still working right

and it's still getting the same menu so

I'm going now to select uh here on text

align Center so that when I click on it

it should see you should see it in the

center right not sure why there is not

the right alignment but for now we're

going to use the center

click on this icon here go on the

advanced Tab and here on the responsive

make sure hide on mobile

and we also need to hide on tablet so

make sure this is on hide on tablet is

on perfect

now let's click on the mobile version

here on the top as you can see now we

need to click on the container the first

container make it full weight and then

um we are going to set a percentage but

first do this the same thing to the

second container here so now every the

both of them are full width and we can

set them to be on the same line so click

now this menu item Advanced uh

responsive and make sure this is not

hidden on mobile but hide it in the

desktop version only

like that so make sure this is on

perfect

so let's make sure this menu item here

is hidden correctly so again click on it

and go on Advanced responsive and make

sure tablet and mobile is hidden now

click on the first container and here

select percentage and change it to make

it fit on one line so first we will try

with 50 select the second one percentage

and again fifty percent okay so we need

to play around here a little bit because

it's a little bit complex so I'm trying

to change the values here by selecting

the first and the second container and

as you can see now we have everything on

the same line uh let me see the preview

we have still some problems because

looks like the content is too large and

we are going to change a few things so

first of all the the logo is too big so

I'm going to click the logo and I'm

going to figma to export only the icons

on the mobile version I can show only

the icon Xbox

PNG and select you know

the settings I'm going to export the

logo mark

back to Wordpress and I will be adding

an image widget just drag and drop it

here somewhere and go on the navigator

to make sure it's uh in the correct

order like this so now it's in the

correct order I'm going to click on it

and import my logo Mark select and now

same thing we need to change the pixel

sizing of this and make it a little bit

smaller

great I'm going to take the main logo

and hide it on the mobile version right

so hide it on the mobile version only

and then we are going to select the new

logo the logo Mark and hide it on

um responsive on the desktop and tablet

version okay so the preview will be this

as you can see now make sure the logo

has a link to the main site so click on

the logo link custom URL

and then click on Dynamic tag and site

URL so that when you click on the logo

here you get to the home page right

perfect so select the second container

and let's fix stuff here so as you can

see we played around a little bit with

the with the wheat and we still have

problems the problem is the item inside

of it so we are going to change the item

inside of it and make them a little bit

smaller again I'm trying you need to

test here and as you can see this is a

little it's already a lot smaller and um

in this case we are going to reduce the

buttons in it so click on the first

button

content

Style

and let's change the padding first right

so I'm reducing the padding

um on the top right left and bottom

oops this is too much

so you need to actually play around a

lot with this

to find the best sizing

okay so once you've found it

like this I'm going to remove for the

second button here the login button the

padding so add zero because there is no

you know no padding needed so we save

space

going to click on the first container

second container again playing with the

width

here is it

okay and now with the container selected

make sure the alignment is correct as

you can see from the preview the

alignment is not correct so container

selected go on align items and Center it

so now they are really nicely centered

as you can see now everything is

centered right so we had to play a lot

to to you know to get to this result but

I'm going to show you if you want

Perfection how to actually make it work

better because as you can see the

percentage doesn't really make sense

here because there is a lot of spacing

on the elements so we are going to clean

the space of the main container first so

click on the main container advance and

make sure there is no padding and here

now it's better because we don't have

padding of the main container we have

more space for our

container inside so now let me try to

reduce this there is some default

spacing still somewhere so click on the

main container and go on layout and make

zero gap between elements and now we are

removing all the gaps okay we need to

select the container now if I try to add

80 and here I try to add 20 it's

perfectly perfectly sorry fitting the

header this problem you just got is

because of the default spacing Elementor

adds to all the containers so you need

to clean them up like we just did so now

you've got on tablet everything looked

great on desktop everything looks great

again tablet mobile you can switch

between them and check it and looks

really nice

make sure you save the template and then

select the main container advance and go

on motion effect

sticky and put it to the top update the

template again make sure you have the

container selected on style change the

background color to white and update

great now you can view exit and view the

page so I'm going to do a test page I

made and as you can see I cannot scroll

much because I don't have enough content

but as you can see

um

it's it's sticky right it's following

you a problem that we are seeing right

now is this look like the menu it's a

little bit bugged so let's edit that

again

and select this container here change

the weight okay of it like that

um

then we need to select this other one

and make sure everything that is bigger

than the right one right so here I'm

going to add a 40 just to make things a

little bit more clear and 60 percent and

if I update and test this

everything now will work correctly let's

try it right away

and here you go now it's working thanks

a lot for watching this video and see

you in the next one bye