Create a Sleek Scroll Shrink Header with FREE Elementor! Ssshhh!!!

everyone this is natalie welcome to my youtube channel in today's video i'll show you how to create a professional sticky navigation menu with the free version of elementor usually the navigation menu option only exists in the pro elementor version however i will show you a simple solution with the help of two free plugins i will be creating a beautiful professional navigation manual unscrew the header shrinks and the background color changes let's go i have this home page already set up to the left hand side i have my logo my menu items sit to the right as for the theme i'm using the free version of astra we need two plugins head over to the plugins tab i have already installed elementor click click on the add new button to installing the two new plugins to help us do a quick search for elementor header and footer builder by brainstorm which is the same company behind the assert theme it has over 1 million active installations click on the button to install and once it's done click again to activate now search for sticky header effects for elementor this is a plugin to make beautiful sticky header effects in my navigation menu it's responsive meaning it will work on all browsers as well as tablets and mobile devices first install the elementor header and footer builder plugin you get this new tab inside your wordpress admin click on that we first need to make our menu template for the website i name it header i select the type of the design i want to display from this drop down list i also select the display location and the user roles i select the entire website and to visible to all users to keep it simple you have plenty of options to choose from this list and publish click on edits and edit with elementor to start editing inside elementor a free elementor users only get these basic widgets let's create our beautiful navigation menu click on this plus sign to select the structure layouts i want these two columns layouts if you scroll down you easily find out the plugins widgets i select the navigation menu item dragging to the right column and then i select my menu name i'm closing all these by clicking on this arrow so we get more empty space to work around i want to head my site logo this is easily done by selecting and drag it to the empty column there we go update and click on this little icon to bring in all the elementor tools i always like to check the elementor page settings for this content click on the gear icon at the bottom within the page layout i set the page to full width now comes the magic of the header effects click on the events tab and now select the sticky header effects tab toggle on the feature we have just enabled cool you will get this warning message but don't worry it will work on any websites with elementor free version below you need to determine the devices you want to display click inside the window to select desktop and tablet only the scroll distance below is to choose the scroll distance to enable the sticky header effects this means that the sticky effects will only be applied after someone scrolls the distance set above i set mine to 80 pixels so the effect only takes place after a height is scrolling distance i also enable the transparent header option the background color option this is where you set up the background color to change after the scrolling distance i select my color this blue color works fine to me then i adjust the color tone to bring in some transparency i also activate the button border with one pixel border and now comes the shrink header options i set mine to 50 pixels my header will shrink to this high after the scrolling distance i also want to shrink the logo to the same amounts enable the blur background color up this enables you to have a modern blur effect with my transparent other color scrolling updates let's check now boom there you go after the 80 pixel distance i get my light blue background color with my one pixel border now let's come back to elementor i want to make some adjustments click on the advanced tab sticky header effects under the scroll decent distance i want to test it so i change the distance to 150 pixels that's testing now as you can see the effects now are only after a 150 pixel distance and it stays sticky to the top boom beautiful now i want to tweak the header background color after scrolling so i come back to elementor under the background color section i tweak the color to a light orange i also increase the bottom border to 2 pixels and let's check now boom we have successfully set up the header menu it stays fixed at the top and we control the scrolling distance cool now you have a clear idea on how you actually can implement this attractive sticky menu on your own website with elementor free version if you found this video useful make sure to subscribe to this channel leave a like down below or leave a comment below have a great day wherever you are i see you in my next video thank you for watching

Channel: Sites with Natalie

Views: 1,653

Keywords: how to shrink menu header on scroll using free elementor, how to shrink menu header on scoll using free elementor, how to shrink menu header on scroll useing free elementor, how to make elementor shrink header on scroll, how to make logo shrink on scroll in elementor, elementor shrink header on scroll, shrink logo on scroll elementor, elementor shrinking header, elementor sticky header shrink, elementor tutorial, elementor wordpress, sites with natalie channel, elementor header

Id: jZfoZb3WJbc

Length: 7min 34sec (454 seconds)

Published: Wed Sep 15 2021