I agree. A Rivmedia Community Brand . i’m using crocoblock jet mega menu widget so the code in this comment isn’t working https://elementor.com/blog/shrinking-sticky-header/#comment-88938 can you help me? For this guide, we’re creating a simple header. If you really want your custom header to dazzle users, you can add some transparency to it by changing the opacity to a number like 0.5 with some custom CSS and Elementor’s CSS class. So far i have managed to create and "underline" hover effect that I'm happy with using CSS Hero. You can change the background image property and replace none with your background image, I’d like to add this as it will fix the background not being responsive with the transition, header.sticky-header.elementor-sticky–effects >(–transition) .elementor-container { min-height: calc(var(–header-height) * var(–shrink-me))!important; height: calc(var(–header-height) * var(–shrink-me)); }. is it possible to only have box shadow visible after scroll? Then, set your logo image’s CSS Classes field equal to logo: To make sure your header sticks to the top as users start scrolling, you can use Elementor’s Motion Effects feature. I haven’t tested it, but instead of the code I wrote the previous time, use this code: I don’t know if this will do the job, but hopefully it will. The pro version of Elementor comes with a theme builder feature that allows you to create a custom header for your WordPress site. Go to Custom CSS add this CSS I’m glad my code serves you well. Method 2: Elementor free custom CSS via the Code Snippet Plugin Step 1: Open plugins tab of your WordPress website. Glad you solved it! Maybe adding this code should do the trick: Hey, there this code is really helpful. Open the Screen Option tab located in the upper right corner. Open the Custom CSS collapsible and add the CSS to the text below. There are a lot of things in store for next versions of Elementor, but in the meantime you’re more than welcome to take advantage of my article. These are the steps I would use: I don’t know if it’s the best solution, but it’s the simplest I could come up with. It does not works for me, what version of elementor are you using? I do have a question, though: My sticky nav menu is a section with my logo above and the nav menu directly below. Drag and drop this option in your desired page section, let’s say we want it for “Our Clients” menu button Specify the menu anchoring link for the section you want to be scrolled upon after scrolling the navigation is reduced as usual. Hi Olivia. Designing and customizing menus is a huge pain, and we are now introducing a whole new way to make it easy and fun.. We are thrilled to be introducing the much expected Nav Menu widget.. to this:.elementor-nav-menu--dropdown-mobile. Glad to know you liked my article ☺️. You can however target the .jet-menu .jet-menu-item .top-level-link class. As for the CSS code, try to use the code the way I used it if possible. After a quick search, you could maybe try this CSS:.elementor-location-header { display: none; } .elementor-location-header.show-me { display: none; } Then this javascript: Creating a custom header template using Elementor, … Select your header section and go to the Advanced tab -> Custom CSS area. Make the Elementor nav-menu widget stick and float as you scroll a page. Interested in creating a shrinking header on your WordPress site? Thanks. Glad you found the article useful. Hi there, I’m trying to change the ‘frame’ pointer on scroll from white to black, but just can’t figure it out. I hope you’ll figure this one out! Click on the page settings icon in the bottom left corner of the pFage. Hey There, how can adapt the same functions in other devices, table and mobile? You wrote “reducing the height of the widget” but I don’t know which widget you’re taking about. Hi Shane This piece of code will change the text color on scroll regardless of which Pointer Type you chose: Just make sure to choose the color needed. Hope this helps, Roy, This is brilliant, Roy. If you’re using an Elementor add-on such as Ultimate Add-ons you may to add “!important” to one of the lines: I have been trying to change the color of the text on scroll to no avail. We have to copy the shown code and paste it in the custom css section of our Menu item. And that’s it — you just created a shrinking sticky header with Elementor! Pastebin.com is the number one paste tool since 2002. Final Thought. My code is using CSS Variables, which the CSS editor still doesn’t recognize, so you can ignore these red warning signs. Disclaimer: Elementorforum.com is an unofficial support and help forum, we are in no way endorsed, sponsored or affiliated with Elementor.com. Easing into the gradient still does not work. It has Mega Menu with One Page, Sticky Nav Menu, Smart Hide, Mobile Menu and many more… You can design your own custom made comment form via elementor. Here’s an example of what you’ll be able to create by following this tutorial: As you saw in the short animation above, a shrinking header does pretty much exactly what the name suggests. You can change the height if you want, just make sure to change the height for both the CSS property and the header section’s settings. In the meantime, you can also use a plugin that does this. About the author: Roy Eyal, Elementorist @ Elementor. You know the step after that To do this, you need to apply the style with the ‘EAC Custom CSS’ widget to the page. The only thing is that the gradient doesn’t fade / ease in with the logo / text. Open the email on your desktop, download Elementor and start working. Any ideas on how I could fix this? I am using a great plugin for this, but having this in Elementor would be great. Hi there. OverviewEditorDesignMarketingDevelopmentTheme BuilderExpertsPopup BuilderWidgetsIntegrations, BlogCommunityShowcaseHostingAdd-onsHello ThemeTemplate LibraryAffiliate ProgramWebsite TutorialsFree WordPress ThemesPortfolio Website BuilderOne Page Website BuilderFunnel Builder, About UsPricingCareersTrademarkTerms & ConditionsPrivacy Policy, Join our 2,824,869 newsletter subscribers and get the latest news and articles sent straight to your inbox weekly. You can set in right in Elementor on the header under Advanced, or add this bit of code: I used a really big number, so that it’ll be the top-most positioned element, hopefully. In total, there are five variables that you can customize. Nav Menu Widget in Elementor. Glad you liked! Site’s in Hebrew, but you could have similar effect. Do you have any ideas that might help me? I discovered the solution was to add a z-index on the menu as it was being hidden on the mobile view by the pages first section. Works with Hello and Elementor Pro just perfectly. Add your CSS code for the element to the editor. Open the settings for the section that contains your header. Make it 2 columns, and set the left one to 21% Column Width, under the columns options. This plugin will not add any new widget. Σ Sigma Hosting is mainly a video tutorial website. Go to the advanced tab. The menu on the secondary pages is built differently. This plugin will not add any new widget. For this tutorial, we’ll assume that you’ve already created your “normal” header using Elementor Theme Builder (which is available in Elementor Pro). Second, while this code should work for all WordPress themes, your specific theme might be causing issues. I would take a different approach; I would a a hidden logo on the side of the menu that would show up on scroll. At the same time, though, you’re still able to give users access to your full navigation menu at all times, which you wouldn’t be able to do if you completely hide the header when a user scrolls down. Thanks in advance. Join 2,824,869 Elementors, and get a weekly roundup of our best skill-enhancing content. For example: Try following my article with your own color and let me know if it worked. Now if I may just one question: is it possible to hide an object in the header when shrinking? It’s hard to tell why the menu disappears on tablet and mobile. Nice catch Klaus! Elementor Menu Ripple Effect Tutorial Nothing beats a video for that kind of tutorials, so just watch the video here above. Finally, this effect also just generally looks cool and offers some nice eye candy for your visitors as they interact with your website. Here’s an example: https://bandplay.co.il. You can use vertical menu to place important links in the footer or inside page. it’s perfectly working btw can i change my nav menu text on scroll ? All we need to do is add in this bit of css:.elementor-sticky--active {background-color: rgba(0, 0, 0, 0.70);} You can change the background-color to be anything you want the header’s background to turn … – checked php7.4, apache2 etc, – checked error logs, – deactivate all plugings, – changed theme from original (Hello) to others – read your tutorial many times with comments, – check on different devices and browsers, – check if WordPress, Woocommerce and Elementors are up-to-date, – insert your code in Header’s CSS or in Global Custom CSS – start over again few times already. First, you need to open the page for editing with Elementor. Here are the five CSS variables, as well as the default values in our example code: You’ll see these listed at the top of our example code – the custom properties are the items that come after the double dash “–“. This hasn’t got to do with CSS. You can try and switch this, Mine shinks alright, but it never goes back to the normal size lol. can I switch the color var to the image background? If you are a non-coder, don’t get worried Elementor itself gives you a lot of custom drag and drop controls to customize your site. I ended up building a totally off canvas header. Great Tutorial! It has Mega Menu with One Page, Sticky Nav Menu, Smart Hide, Mobile Menu and many more… You can design your own custom made comment form via elementor. Elementor; Elementor Pro; Simple Custom CSS. By clicking the Add Template button, you can choose from one of 20 pre-designed templates to add to your page. For example, if you want to change the header height to 100px, here’s how it would look before and after: Let’s go through your options for the five variables: Values accepted: Color names (i.e. First, drag an Image widget into a column, and go to Image > Advanced > Custom CSS. I also saw you implemented it on your website. In my case I could make the same header stick shrinking but only with scrolling effects, the tutorial could have a simple video showing the final result. Here’s the deal. Hi Martin. Hi Roy, Thanks so much for this tutorial! Head over to Nav menu widget (only available for Elementor pro user) Then click the Nav menu widget Advanced tab; Under Advanced tab – Choose CSS id/ Classes (You prefer). Make sure you enter the % that suits your needs. Please also note that some user-supplied custom CSS code may interfere or conflict with Elementor and cause issues such as being unable to use Elementor to edit fonts, or other styling options. Hi there. http://rimademo.artstudioworks.net/paloma/. Unfortunately, I can’t manage the following … I want change after shrinking from video to one color header or just remove the video after shrinking, scrolling. Question – how do we disable this on mobile? Custom javascript is hard, and a not really within the scope of forum support unfortunately. Note: If editing a Widget, right-clicking will show the option to Edit Widget, and editing a Column will show Edit Column. Hi Rudy. i.e. In your WordPress dashboard, go to Templates → Theme Builder and click Edit With Elementor for your header template. Make sure there’s no negative margin in the header somewhere. Red crosses at line 2,3,4,5,6 and warnings at various lines. In Page settings / Advanced / Custom CSS is a good place. Heey, thanks heaps for this! When I start with a large screen, the menu is displayed correctly. Here’s my take on the logo transition: I’m having an issue where the menu completely disappears on tablet and mobile. Then, you can combine it with the sticky header feature, so that as the user scrolls, the Elementor transparent header will reveal the page behind it. Is it possible to “unshrink” the Header instantly when stopping to scroll, or after scrolling a few pixel backwards to the top? Good, now do the trick where the text changes color on scroll, you know something that comes standard with ALL themes. From this tutorial, you’ll learn how to how to edit menu in Elementor with JetMenu. If you have a very tall header, try reducing the height to ~100px. Did you add the .logo class the image? Cheers. Best, Roy, The Header is not shrinking for me , is there any video tutorial. I haven’t checked it yet, but I’ll give it a spin. This will be our sticky logo on scroll, On both the sticky logo and nav menu: Advanced –> Positioning –> Width: Inline, Edit the column and the Horizontal Align set to Center, Have a full height (100vh) hero as the first section (with huge logo, and maybe a non-sticky menu), 2nd section will be another header, set as sticky (top), which when scrolled to, it will stick. Hello, Thanks for this great article, as a beginner in website development, Elementor and CSS I’ve learned a lot in the past weeks. I am using the retina image widget instead of normal image widget. I see you wrote your own transition, so I’ll add it here as well. A while ago, I made a tutorial showing you how to build your own custom header with Elementor.. That tutorial relied on a 3rd party plugin to handle the navigation menu.It wasn’t a bad solution… but at the time, it’s all we had.. Until now, Elementor has been purely focused on … One of which, it has no capability to create a mega menu or off-canvas menu. Glad you worked it out. Good luck! Step 10: Get the id or class of each element below to add custom style to each other. The images continue rolling across, not behind the all the posts but above, very distractful. So I’ve added the page-specific class to the code. Hi there Lorena! 4.1 i) Drag and drop Site logo & Nav menu widget - 4.2 ii) Add CSS Class to Site Logo – 4.3 iii) Add CSS Class to Nav menu widget-5 Steps#5 - How to Shrink logo and Navigation Menu in Elementor with CSS Well, There’s no easy way to switch the logo with another image, however you can invert the image from white to black (or vice-versa) using the CSS Filter property when scrolling by adding the additional line: I managed to change the logo completely rather than shrinking it by adding the following code: content:url(‘https://yourdomainurl.com/yourlogo.png’); So the full code will be: header.sticky-header.elementor-sticky–effects .logo img { max-width: calc(100% * var(–shrink-me)); content:url(‘https://yourdomainurl.com/yourlogo.png’); The logo here is a different color logo and should be the same size as your initial logo. Much appreciated. I needed to increase the z-index of the section that includes the menu. Then, you can combine it with the sticky header feature, so that as the user scrolls, the Elementor transparent header will reveal the page behind it. But wouldn’t it make much more sense that you can do this yourself without code in Elementor? following problem in mobile and tablet view. Best, Roy. If you want to shrink the search widget, use the following code. Before you might need to write custom CSS to do such things, but now you wont! It just appears abruptly after it reaches the offset point. Please note: When targeting your specific element, add `selector` before the tags and classes you want to exclusively target, i.e: selector a { color: red;}. Ps: I don’t understand why use px in header, I think better use % almost always…. However, I’m having trouble reducing the height of the widget before the scrolling happens. While you can edit the CSS directly in the Elementor interface, we’d recommend using a proper code editor such as Visual Studio Code or Atom. I’m using this code to shrink the size of my logo that is in my header, it’s working well when I’m scrolling, but when I’m coming back up, it’s growing back without any transition, I would like the smoothness when I come back up too. Just make sure you set the correct size for the icon, and they should all be the same value. Adding the native WordPress class “has-submenu” should do the trick. Thanks, Elementor for the Blog. To make sure your header works with the CSS code that you’ll use in the next sections, you’ll want to perform a little housekeeping. Choose the horizontal layout. This site made by the community for the community. However, we’ll give you the exact code that you need and walk you through customizing it to match your site. I am not a newbie. The Nav Menu widget lets you use menus that you’ve created in WordPress and design them in whatever way you want. But the menu disappears behind the hero image. Earlier in the tutorial, we had you set this to 90px, which is a good starting value. Hope this helps, Roy. If you have Elementor free, see How to easily add custom CSS with Elementor … Nice work! Now, in the Custom CSS tab, enter the following: selector { border: 5px solid red; } Because you are editing the Image widget, you might be surprised to discover that the border does not surround the image at … First off, the header won’t shrink if its content is too big. Hi there. For JavaScript, when it is short, placing it inline (in between