How to make a responsive header with Elementor

00:23:36
https://www.youtube.com/watch?v=KZ55zNjfEU4

Summary

TLDRThe video tutorial demonstrates how to create a responsive header in Elementor using Flexbox and the Untitled UI kit. It meticulously guides viewers through building a sticky header that adapts beautifully on mobile, tablet, and desktop platforms. Utilizing a child theme of WordPress's Hello theme, the tutorial emphasizes activating the flexbox container, customizing default colors and fonts, and crafting a bespoke header via Elementor's Team Builder. Key processes include widget selection from a menu to buttons, setting mobile responsiveness, tweaking typography and color settings, and orderly nesting of UI elements. The video also explores the inclusion of site logos and dynamic menu items, showcasing how to utilize Figma for adjusting UI elements such as buttons and text alignment. Solutions for maintaining aesthetic consistency, like fixing the sticky menu bug and tailoring button dimensions, are demonstrated. The collective aim is to ensure a seamless design flow and interactive user experience. Essential techniques for optimizing width and border settings ensure a wrapped, visually-appealing header that aligns with professional web standards.

Takeaways

  • 📱 Ensure Elementor header is responsive on mobile and tablet.
  • 🔧 Utilize flexbox for flexible, adaptable layouts.
  • 🎨 Customize colors and fonts to match theme style.
  • 🛠️ Use Untitled UI kit for efficient UI design.
  • 📐 Adjust alignment and spacing for clean layout.
  • 🔄 Make header sticky to enhance navigation.
  • 👨‍💻 Work with Hello theme for WordPress compatibility.
  • 🔍 Pay attention to menu alignment and button styling.
  • 📦 Import icons and logos adequately for all devices.
  • 💡 Leverage Figma for design consistency.

Timeline

  • 00:00:00 - 00:05:00

    In the tutorial, the video creator begins by introducing the task of making a responsive Elementor header using flexbox technology and a UI kit called Untitled UI. They set up the project by choosing the Hello theme and adjusting basic settings like disabling default colors and fonts. They proceed to add a header by clicking through different settings, making use of tools like the Navigator to efficiently layout the components.

  • 00:05:00 - 00:10:00

    The video continues with duplicating containers, setting widget orientations, and changing elements like button texts. The creator shows step-by-step how to set up WordPress menus by adding menu items and linking them. They emphasize publishing changes to see updates on the site, ensuring that everything looks correct before proceeding to further customization, which involves adding elements like logos and adjusting styles for consistency.

  • 00:10:00 - 00:15:00

    The creator focuses on styling adjustments using the Untitled UI kit. They change elements' styles such as typography, colors, background, and button hover effects, referencing design elements from Figma for accuracy. They demonstrate adjustments one component at a time, like typography and border settings, ensuring these match the provided design blueprint. Ensuring functionality like mouse hover effects on buttons enhances interactivity, while saving changes regularly updates the work.

  • 00:15:00 - 00:23:36

    In the final segment, the creator handles mobile responsiveness, addressing layout issues by adjusting element sizes and visibilities for different screen sizes, ensuring that the design remains coherent across devices. Sticky menu behavior is also implemented to ensure user-friendly navigation. Finalizing tweaks includes modifying HTML/CSS details to perfect alignment and spacing. Once all elements are optimized for mobile and desktop, the project is saved with the design fully functional and responsive.

Show more

Mind Map

Video Q&A

  • What is this video tutorial about?

    The video covers creating a responsive Elementor header with Flexbox technology and customization with Untitled UI kit.

  • What is the Untitled UI kit mentioned in the video?

    The Untitled UI kit is a design resource that includes various elements for creating UI designs, and it integrates with Figma.

  • What type of device compatibility is ensured in the video?

    The tutorial is for creating an Elementor header that works on mobile, tablet, and desktop.

  • What theme is recommended for use in this tutorial?

    The video mentions using a child theme of the Hello theme in WordPress.

  • What technology does the video use for the header layout?

    Flexbox technology is used to arrange the header elements responsively.

  • What customization options are demonstrated in the tutorial?

    The video shows how to align text, add a logo, and adjust colors and font settings for styling.

  • What common issues are resolved in the header design process?

    Issues addressed include menu alignment, styling buttons, and correcting spacing using the flexbox alignment options.

  • Can the header created in the video be made sticky?

    Yes, the video guides on making the header sticky so it remains in view while scrolling.

View more video summaries

Get instant access to free YouTube video summaries powered by AI!
Subtitles
en
Auto Scroll:
  • 00:00:00
    hi everyone and welcome in this new
  • 00:00:02
    video tutorial today we are going to
  • 00:00:03
    create an Elementor header in a
  • 00:00:06
    responsive way so it will be a mobile
  • 00:00:08
    tablet it will be sticky and we are
  • 00:00:11
    going to use flexbox technology and the
  • 00:00:14
    best thing is that we are going to use
  • 00:00:15
    this cool UI kit called Untitled UI you
  • 00:00:20
    will find the link in the description if
  • 00:00:21
    you want to get the pro version of this
  • 00:00:23
    big figma UI kit there is a ton of
  • 00:00:26
    things that you can use for your project
  • 00:00:28
    and looks pretty awesome so let's start
  • 00:00:30
    with the video
  • 00:00:31
    hi everyone so I'm going to show you
  • 00:00:33
    what I'm using as a team I'm using a
  • 00:00:35
    child theme of the hello team you can
  • 00:00:37
    also use only the hello team if you
  • 00:00:39
    prefer then on the settings and features
  • 00:00:42
    make sure you have flexbox container
  • 00:00:44
    activated
  • 00:00:48
    on General I usually disable the default
  • 00:00:51
    colors and font
  • 00:00:54
    click on team Builder and then on header
  • 00:00:57
    click the plus button to add a new
  • 00:00:59
    header
  • 00:01:01
    so I will close this pop-up and then
  • 00:01:04
    create my own Header by clicking the
  • 00:01:06
    plus button and clicking this little
  • 00:01:07
    arrow here so here we are going to add
  • 00:01:10
    our elements so click on the plus button
  • 00:01:12
    then select the container widget add it
  • 00:01:17
    here and as you can see I'm using the
  • 00:01:19
    Navigator right click here and then
  • 00:01:22
    navigator to show the Navigator if you
  • 00:01:25
    don't know what I'm using just check the
  • 00:01:27
    Navigator every time it's very useful
  • 00:01:30
    so follow along here click on the plus
  • 00:01:32
    button
  • 00:01:35
    search for a widget in this case the
  • 00:01:37
    menu widget
  • 00:01:39
    perfect
  • 00:01:40
    so now we have the menu widget here
  • 00:01:42
    right we are going to click on this
  • 00:01:44
    container and then duplicate it so now
  • 00:01:47
    we have two containers select the main
  • 00:01:50
    container on the top
  • 00:01:52
    and then select the direction right
  • 00:01:57
    select the the menu widget here and
  • 00:02:00
    delete it
  • 00:02:03
    right click delete and we're going to
  • 00:02:05
    add our buttons here
  • 00:02:08
    so search for button
  • 00:02:11
    drag and drop the button widget
  • 00:02:14
    click on the button widget right click
  • 00:02:17
    duplicate and now we have two button
  • 00:02:19
    widgets select the container of those
  • 00:02:21
    buttons you can select it from here from
  • 00:02:23
    the Navigator as you can see and then
  • 00:02:25
    again
  • 00:02:27
    Direction horizontal on the right and
  • 00:02:30
    then we are going to put the Justified
  • 00:02:31
    content on the end in this case we have
  • 00:02:35
    our structure right now so here we put
  • 00:02:38
    on the start by selecting this container
  • 00:02:41
    and now let's change the text of the
  • 00:02:43
    buttons
  • 00:02:50
    so select the buttons and change the
  • 00:02:52
    text very easily
  • 00:02:54
    great now we have to change the menu
  • 00:02:57
    right we don't have a menu on WordPress
  • 00:02:59
    so let's create it publish the page add
  • 00:03:02
    a condition and select entire site save
  • 00:03:05
    and close
  • 00:03:07
    perfect
  • 00:03:10
    so let's get back to the WordPress admin
  • 00:03:12
    panel so I usually select this and WP
  • 00:03:15
    dashboard and apply so every time I exit
  • 00:03:18
    from this I get here and then I'm going
  • 00:03:21
    to appearance menus and I will start
  • 00:03:25
    adding my menu so in this case I will
  • 00:03:26
    call it main menu or let's call it a
  • 00:03:31
    main one okay
  • 00:03:33
    great so now I'm going to add all the
  • 00:03:36
    the pages in this case I'm going to add
  • 00:03:39
    custom links because I don't have pages
  • 00:03:41
    in your case you can use pages instead
  • 00:03:44
    as you can see now I'm adding all my
  • 00:03:47
    pages
  • 00:03:54
    okay so I added everything save the menu
  • 00:03:58
    and now we should go back to our um you
  • 00:04:02
    know header
  • 00:04:04
    make sure the menu is saved okay we have
  • 00:04:06
    saved it so we are going now Elementor
  • 00:04:09
    sorry templates team Builder and you
  • 00:04:13
    know Elementor header here is it
  • 00:04:19
    click on it
  • 00:04:21
    and then edit
  • 00:04:23
    great so now click on this little icon
  • 00:04:25
    and change the name of this template
  • 00:04:28
    header template I will call it menu one
  • 00:04:31
    and as you can see anyway we have added
  • 00:04:33
    our menu and it's displaying right here
  • 00:04:35
    so let's go and add also the logo click
  • 00:04:38
    on this container here click on this
  • 00:04:41
    icon and select the site log widget drag
  • 00:04:44
    and drop it here and now we are going to
  • 00:04:47
    style it I'm going to select the pixel
  • 00:04:50
    instead of percentage and then give here
  • 00:04:52
    give him a width
  • 00:04:54
    in this case we're going to select again
  • 00:04:56
    the container and then we are going to
  • 00:04:59
    select the direction again on the right
  • 00:05:01
    and now we are going to change the order
  • 00:05:04
    of it so very easily from the Navigator
  • 00:05:07
    as you can see we can select the site
  • 00:05:09
    logo drag and drop it on the top and now
  • 00:05:12
    the order is correct so let's see the
  • 00:05:15
    preview
  • 00:05:17
    great looks like the structure is done
  • 00:05:21
    select the main container and then you
  • 00:05:25
    can play with the width if you want so
  • 00:05:27
    you can select the the width you want
  • 00:05:29
    here I will keep it like this for now I
  • 00:05:31
    will change it later and here you can
  • 00:05:33
    have it also full weight if you want and
  • 00:05:36
    as you can see it's taking the full
  • 00:05:37
    weight of the of the whole website
  • 00:05:43
    great
  • 00:05:45
    so now we are going to try and style
  • 00:05:48
    everything
  • 00:05:49
    for the design I'm using
  • 00:05:52
    um Untitled UI as you can see I'm
  • 00:05:55
    putting the link in the description to
  • 00:05:57
    get this big UI kit I'm saving now the
  • 00:06:01
    logo because I want to add a logo here
  • 00:06:04
    I'm using the the UI kit logo so first
  • 00:06:07
    update this template and let's
  • 00:06:11
    um edit the menu by changing the styling
  • 00:06:15
    of the menu so basically I get here on
  • 00:06:18
    the design and the UI kit settings and I
  • 00:06:21
    check like
  • 00:06:23
    um you know the font size and everything
  • 00:06:25
    so
  • 00:06:26
    with this clicked go on Style
  • 00:06:29
    check typography and of course start
  • 00:06:33
    adding the typography in this case I'm
  • 00:06:35
    going to use enter and the size will be
  • 00:06:37
    16 pixel
  • 00:06:40
    the weight will be
  • 00:06:42
    um let's see semi bolt 600 okay and
  • 00:06:48
    we'll also need to change the color
  • 00:06:49
    right so let's see what is the color
  • 00:06:52
    here
  • 00:06:53
    so I'm going to copy the the code color
  • 00:06:57
    code right here wait uh where is it
  • 00:07:01
    um okay not here sorry but here in the
  • 00:07:04
    text color
  • 00:07:05
    here is it and now the um the menu items
  • 00:07:09
    looks like the design right we don't
  • 00:07:11
    have drop downs but anyway let's go to
  • 00:07:13
    the buttons and again select the main
  • 00:07:16
    color of the button
  • 00:07:18
    copy the code and let me go first of all
  • 00:07:22
    on the hover because I want to make the
  • 00:07:25
    color hovering effect here on this menu
  • 00:07:28
    as you can see now the text is changing
  • 00:07:31
    the color and I'm going also to remove
  • 00:07:33
    the underline because I don't like it
  • 00:07:35
    very much so I'm going to remove it so
  • 00:07:38
    no
  • 00:07:39
    and now as you can see everything is
  • 00:07:41
    working fine Mouse over effect and now
  • 00:07:44
    is the turn of the buttons click on the
  • 00:07:46
    buttons here and start styling it so the
  • 00:07:49
    first one actually doesn't have like a
  • 00:07:52
    background right it's just looks like a
  • 00:07:54
    simple menu item so I select here I
  • 00:07:57
    select it here on the design and then I
  • 00:08:00
    just keep you know adding The Styling so
  • 00:08:03
    style it very quickly
  • 00:08:06
    on style change the color of the text
  • 00:08:12
    perfect
  • 00:08:13
    and then we also need to change the
  • 00:08:16
    background color right so the background
  • 00:08:18
    type it's basically on the bottom uh
  • 00:08:21
    here is it if you want you can disable
  • 00:08:24
    it but if you disable it I see usually
  • 00:08:28
    that the color doesn't change so I
  • 00:08:29
    usually enable it select a white color
  • 00:08:32
    as background or you can even make it
  • 00:08:35
    transparent so you're sure that there is
  • 00:08:37
    no background so I usually do this and
  • 00:08:40
    then you can change the typography to
  • 00:08:42
    enter of course I usually use
  • 00:08:46
    um you know
  • 00:08:47
    a general setting for the fonts and
  • 00:08:50
    everything but in this tutorial we are
  • 00:08:51
    going to basically set up each item so
  • 00:08:55
    it's faster
  • 00:08:56
    great so here is it and the design looks
  • 00:09:00
    the same let me try to check the font
  • 00:09:03
    size and everything
  • 00:09:05
    um yeah so everything is correct great
  • 00:09:08
    so I'm going to copy right click and
  • 00:09:10
    paste the style also on the sign in
  • 00:09:13
    um button and then
  • 00:09:17
    you know change the background by
  • 00:09:19
    clicking here we are going to paste the
  • 00:09:22
    color so I'm going to get this the color
  • 00:09:24
    from the design again
  • 00:09:26
    if I remember here is it and okay so we
  • 00:09:31
    have this color here
  • 00:09:33
    and is the normal
  • 00:09:35
    color perfect we need to make the test
  • 00:09:39
    why the text sorry White and the hover
  • 00:09:43
    effect we need to change it to
  • 00:09:46
    um darker color so I'm going to select
  • 00:09:48
    the color icon here and then on figma
  • 00:09:51
    this UI kit can also have
  • 00:09:55
    um the
  • 00:09:56
    um how can I call it
  • 00:09:58
    the state right so the state could be in
  • 00:10:01
    Hover and as you can see now it's darker
  • 00:10:03
    so I'm going to get this color here
  • 00:10:06
    and copy
  • 00:10:07
    and paste it
  • 00:10:10
    so you can play around here as you can
  • 00:10:12
    see there is a lot of option in this UI
  • 00:10:14
    kit anyway let's go back and paste the
  • 00:10:18
    darker color and now when I Mouse over
  • 00:10:21
    on the sign in Button as you can see
  • 00:10:23
    there is the mouse hover effect that's
  • 00:10:25
    great
  • 00:10:26
    so perfect let's see the preview and
  • 00:10:29
    everything looks really cool
  • 00:10:31
    maybe the design is not exactly the same
  • 00:10:34
    but we will fix that in a moment
  • 00:10:37
    so click on the first button
  • 00:10:40
    check the hover effect
  • 00:10:42
    I'm going to change the text color again
  • 00:10:44
    to the Violet so that you actually have
  • 00:10:47
    also the login Mouse hover effect and
  • 00:10:50
    then the logo let's change the logo now
  • 00:10:53
    so update the template and you need to
  • 00:10:56
    click on this little Burger menu here on
  • 00:10:58
    the left wait
  • 00:10:59
    click again and make sure it's boxed
  • 00:11:03
    let's say I want to make it box it right
  • 00:11:05
    away
  • 00:11:06
    so let's see what the figma has as width
  • 00:11:09
    right of the mini width so I'm selecting
  • 00:11:12
    the menu width and as you can see is it
  • 00:11:17
    1440 and I will do the same here so I
  • 00:11:21
    will add 1440.
  • 00:11:24
    and now I want to change the logo right
  • 00:11:27
    so save the template first
  • 00:11:29
    then go on the top left Burger menu site
  • 00:11:32
    settings and then you're going to change
  • 00:11:35
    the site identity and here site logo and
  • 00:11:39
    I'm going to upload my logo so I'm going
  • 00:11:42
    to use the Untitled logo
  • 00:11:44
    and then you need to click update to see
  • 00:11:47
    the change
  • 00:11:49
    close this with this x button so you get
  • 00:11:52
    back to the template and as you can see
  • 00:11:53
    now we have our logo right but the size
  • 00:11:56
    is not correct so let's click on the
  • 00:11:58
    container now and then I'm going to
  • 00:12:01
    check
  • 00:12:02
    the center right the Align Center so the
  • 00:12:06
    logo is now centered vertically then the
  • 00:12:08
    width of the logo we are going to set it
  • 00:12:10
    up let me check the design so if I
  • 00:12:13
    select the logo here it's giving me on
  • 00:12:16
    the top right the width and is 142 and
  • 00:12:20
    I'm going to add here 142 pixel as you
  • 00:12:24
    can see now the logo is correctly sized
  • 00:12:27
    and going to update again
  • 00:12:29
    now let's click on the button here and
  • 00:12:32
    go on style and Border radius we're
  • 00:12:34
    going to change it to 8. I don't
  • 00:12:37
    remember if it's actually eight but yep
  • 00:12:40
    it's actually eight and then we are
  • 00:12:43
    going to add the padding right I'm going
  • 00:12:46
    to try to add the same padding here
  • 00:12:49
    um as the design on figma as you can see
  • 00:12:51
    I unlocked
  • 00:12:53
    um the linked so I can change the values
  • 00:12:55
    for each input box again let me check
  • 00:12:59
    this
  • 00:13:03
    so I'm checking the font because doesn't
  • 00:13:05
    really look the same probably the pixel
  • 00:13:08
    padding on the web browser is not
  • 00:13:11
    actually looking the same anyway I think
  • 00:13:13
    the line height of the the font is the
  • 00:13:15
    problem here anyway I don't want to lose
  • 00:13:18
    time so I'm going to try and reproduce
  • 00:13:21
    this design
  • 00:13:22
    um by adding some some pixels so again
  • 00:13:25
    click the button and try to play around
  • 00:13:28
    with the padding
  • 00:13:42
    okay so uh I think I will set it like
  • 00:13:45
    this looks a little bit more like the
  • 00:13:46
    figma in this case
  • 00:13:48
    um and then
  • 00:13:50
    um I'm going to try and check again here
  • 00:13:51
    the font sizing everything is correct so
  • 00:13:54
    let's see the preview it looks a little
  • 00:13:56
    bit better okay take your time and make
  • 00:13:58
    it same as the design if you want to get
  • 00:14:00
    the same exact design so I'm going to
  • 00:14:02
    update this
  • 00:14:04
    and then
  • 00:14:05
    um I'm going to check now
  • 00:14:07
    um this little border here and a little
  • 00:14:10
    border is a gray color so I'm going to
  • 00:14:13
    click here and get the color code and
  • 00:14:16
    basically go back to Wordpress
  • 00:14:22
    and then select the main container and
  • 00:14:26
    you can go on style and add a border so
  • 00:14:28
    unlock the link here and add a one
  • 00:14:31
    border and then select solid border and
  • 00:14:35
    now we can change the color of that
  • 00:14:37
    solid Border in the color code we just
  • 00:14:39
    got the gray one so now if I check the
  • 00:14:42
    preview we have a little Gray Line here
  • 00:14:44
    at the bottom that looks really nice so
  • 00:14:46
    open again the option update here go on
  • 00:14:50
    the bottom left icon for the mobile and
  • 00:14:52
    tablet version and now you can select
  • 00:14:55
    this menu here and make it full weight
  • 00:14:59
    advanced
  • 00:15:00
    select the center to align itself
  • 00:15:03
    and that's great now if I click on it
  • 00:15:06
    the menu is coming down
  • 00:15:08
    here is the preview
  • 00:15:13
    great so now let's change the settings
  • 00:15:15
    click on this icon here okay right click
  • 00:15:20
    copy select the container the right
  • 00:15:23
    container and then right click paste now
  • 00:15:26
    we have our icon here our menu icon if
  • 00:15:29
    you click on it it's still working right
  • 00:15:31
    and it's still getting the same menu so
  • 00:15:33
    I'm going now to select uh here on text
  • 00:15:36
    align Center so that when I click on it
  • 00:15:39
    it should see you should see it in the
  • 00:15:41
    center right not sure why there is not
  • 00:15:44
    the right alignment but for now we're
  • 00:15:46
    going to use the center
  • 00:15:48
    click on this icon here go on the
  • 00:15:50
    advanced Tab and here on the responsive
  • 00:15:53
    make sure hide on mobile
  • 00:15:57
    and we also need to hide on tablet so
  • 00:16:01
    make sure this is on hide on tablet is
  • 00:16:03
    on perfect
  • 00:16:05
    now let's click on the mobile version
  • 00:16:07
    here on the top as you can see now we
  • 00:16:09
    need to click on the container the first
  • 00:16:11
    container make it full weight and then
  • 00:16:15
    um we are going to set a percentage but
  • 00:16:18
    first do this the same thing to the
  • 00:16:20
    second container here so now every the
  • 00:16:22
    both of them are full width and we can
  • 00:16:24
    set them to be on the same line so click
  • 00:16:27
    now this menu item Advanced uh
  • 00:16:30
    responsive and make sure this is not
  • 00:16:33
    hidden on mobile but hide it in the
  • 00:16:36
    desktop version only
  • 00:16:39
    like that so make sure this is on
  • 00:16:42
    perfect
  • 00:16:44
    so let's make sure this menu item here
  • 00:16:46
    is hidden correctly so again click on it
  • 00:16:49
    and go on Advanced responsive and make
  • 00:16:51
    sure tablet and mobile is hidden now
  • 00:16:54
    click on the first container and here
  • 00:16:57
    select percentage and change it to make
  • 00:17:01
    it fit on one line so first we will try
  • 00:17:05
    with 50 select the second one percentage
  • 00:17:08
    and again fifty percent okay so we need
  • 00:17:12
    to play around here a little bit because
  • 00:17:13
    it's a little bit complex so I'm trying
  • 00:17:15
    to change the values here by selecting
  • 00:17:18
    the first and the second container and
  • 00:17:20
    as you can see now we have everything on
  • 00:17:22
    the same line uh let me see the preview
  • 00:17:25
    we have still some problems because
  • 00:17:27
    looks like the content is too large and
  • 00:17:30
    we are going to change a few things so
  • 00:17:32
    first of all the the logo is too big so
  • 00:17:35
    I'm going to click the logo and I'm
  • 00:17:37
    going to figma to export only the icons
  • 00:17:40
    on the mobile version I can show only
  • 00:17:42
    the icon Xbox
  • 00:17:44
    PNG and select you know
  • 00:17:47
    the settings I'm going to export the
  • 00:17:50
    logo mark
  • 00:17:52
    back to Wordpress and I will be adding
  • 00:17:55
    an image widget just drag and drop it
  • 00:17:58
    here somewhere and go on the navigator
  • 00:18:00
    to make sure it's uh in the correct
  • 00:18:03
    order like this so now it's in the
  • 00:18:05
    correct order I'm going to click on it
  • 00:18:06
    and import my logo Mark select and now
  • 00:18:11
    same thing we need to change the pixel
  • 00:18:14
    sizing of this and make it a little bit
  • 00:18:16
    smaller
  • 00:18:18
    great I'm going to take the main logo
  • 00:18:21
    and hide it on the mobile version right
  • 00:18:23
    so hide it on the mobile version only
  • 00:18:26
    and then we are going to select the new
  • 00:18:29
    logo the logo Mark and hide it on
  • 00:18:32
    um responsive on the desktop and tablet
  • 00:18:36
    version okay so the preview will be this
  • 00:18:38
    as you can see now make sure the logo
  • 00:18:41
    has a link to the main site so click on
  • 00:18:44
    the logo link custom URL
  • 00:18:48
    and then click on Dynamic tag and site
  • 00:18:51
    URL so that when you click on the logo
  • 00:18:53
    here you get to the home page right
  • 00:18:55
    perfect so select the second container
  • 00:18:58
    and let's fix stuff here so as you can
  • 00:19:01
    see we played around a little bit with
  • 00:19:02
    the with the wheat and we still have
  • 00:19:05
    problems the problem is the item inside
  • 00:19:07
    of it so we are going to change the item
  • 00:19:09
    inside of it and make them a little bit
  • 00:19:12
    smaller again I'm trying you need to
  • 00:19:14
    test here and as you can see this is a
  • 00:19:17
    little it's already a lot smaller and um
  • 00:19:21
    in this case we are going to reduce the
  • 00:19:24
    buttons in it so click on the first
  • 00:19:25
    button
  • 00:19:27
    content
  • 00:19:29
    Style
  • 00:19:30
    and let's change the padding first right
  • 00:19:37
    so I'm reducing the padding
  • 00:19:39
    um on the top right left and bottom
  • 00:19:45
    oops this is too much
  • 00:19:49
    so you need to actually play around a
  • 00:19:51
    lot with this
  • 00:19:52
    to find the best sizing
  • 00:19:56
    okay so once you've found it
  • 00:20:00
    like this I'm going to remove for the
  • 00:20:03
    second button here the login button the
  • 00:20:05
    padding so add zero because there is no
  • 00:20:09
    you know no padding needed so we save
  • 00:20:11
    space
  • 00:20:14
    going to click on the first container
  • 00:20:16
    second container again playing with the
  • 00:20:19
    width
  • 00:20:23
    here is it
  • 00:20:26
    okay and now with the container selected
  • 00:20:29
    make sure the alignment is correct as
  • 00:20:33
    you can see from the preview the
  • 00:20:34
    alignment is not correct so container
  • 00:20:36
    selected go on align items and Center it
  • 00:20:38
    so now they are really nicely centered
  • 00:20:42
    as you can see now everything is
  • 00:20:43
    centered right so we had to play a lot
  • 00:20:46
    to to you know to get to this result but
  • 00:20:48
    I'm going to show you if you want
  • 00:20:50
    Perfection how to actually make it work
  • 00:20:53
    better because as you can see the
  • 00:20:56
    percentage doesn't really make sense
  • 00:20:58
    here because there is a lot of spacing
  • 00:21:00
    on the elements so we are going to clean
  • 00:21:03
    the space of the main container first so
  • 00:21:06
    click on the main container advance and
  • 00:21:09
    make sure there is no padding and here
  • 00:21:11
    now it's better because we don't have
  • 00:21:14
    padding of the main container we have
  • 00:21:16
    more space for our
  • 00:21:17
    container inside so now let me try to
  • 00:21:21
    reduce this there is some default
  • 00:21:24
    spacing still somewhere so click on the
  • 00:21:27
    main container and go on layout and make
  • 00:21:31
    zero gap between elements and now we are
  • 00:21:34
    removing all the gaps okay we need to
  • 00:21:37
    select the container now if I try to add
  • 00:21:40
    80 and here I try to add 20 it's
  • 00:21:44
    perfectly perfectly sorry fitting the
  • 00:21:48
    header this problem you just got is
  • 00:21:51
    because of the default spacing Elementor
  • 00:21:53
    adds to all the containers so you need
  • 00:21:55
    to clean them up like we just did so now
  • 00:21:58
    you've got on tablet everything looked
  • 00:21:59
    great on desktop everything looks great
  • 00:22:01
    again tablet mobile you can switch
  • 00:22:04
    between them and check it and looks
  • 00:22:06
    really nice
  • 00:22:07
    make sure you save the template and then
  • 00:22:10
    select the main container advance and go
  • 00:22:13
    on motion effect
  • 00:22:15
    sticky and put it to the top update the
  • 00:22:18
    template again make sure you have the
  • 00:22:21
    container selected on style change the
  • 00:22:24
    background color to white and update
  • 00:22:28
    great now you can view exit and view the
  • 00:22:32
    page so I'm going to do a test page I
  • 00:22:34
    made and as you can see I cannot scroll
  • 00:22:37
    much because I don't have enough content
  • 00:22:39
    but as you can see
  • 00:22:41
    um
  • 00:22:42
    it's it's sticky right it's following
  • 00:22:44
    you a problem that we are seeing right
  • 00:22:47
    now is this look like the menu it's a
  • 00:22:51
    little bit bugged so let's edit that
  • 00:22:53
    again
  • 00:22:54
    and select this container here change
  • 00:22:58
    the weight okay of it like that
  • 00:23:02
    um
  • 00:23:03
    then we need to select this other one
  • 00:23:06
    and make sure everything that is bigger
  • 00:23:09
    than the right one right so here I'm
  • 00:23:11
    going to add a 40 just to make things a
  • 00:23:14
    little bit more clear and 60 percent and
  • 00:23:18
    if I update and test this
  • 00:23:21
    everything now will work correctly let's
  • 00:23:24
    try it right away
  • 00:23:29
    and here you go now it's working thanks
  • 00:23:31
    a lot for watching this video and see
  • 00:23:34
    you in the next one bye
Tags
  • Elementor
  • Responsive Design
  • Flexbox
  • Untitled UI
  • Web Design
  • WordPress
  • UI Kit
  • Header Creation
  • Sticky Header
  • Mobile Optimization