It should work on all header sizes, as long as there nothing inside the header that’ll prevent it from shrinking. Good luck! I tried inspecting it to find the right css code, but no luck , I also need to change the search icon from orange to white…. I’m sorry to hear you’re having a hard time, and to be honest if you had to add !important; at the end of every CSS line, then this means that the CSS is being overridden by something. Elementor is a great page builder and at the time of my post which is 2019, July it is the most popular page builder out there for WordPress.. Thanks in advance. Right-click on the edit button of the element and click Edit section to open the section’s settings panel. Ask us in the comments! Edit the menu item that will trigger the popup. Your header is built differently with the logo on top, so your header’s height is 173 pixels tall, so you’ll have to update all the places I’ve added 90 pixels to whatever height fits in your header. You can try and switch this, Mine shinks alright, but it never goes back to the normal size lol. The pro version of Elementor comes with a theme builder feature that allows you to create a custom header for your WordPress site. As for the the logo that doesn’t shrink, it’s hard to say why without checking out the website. The Pro version of Elementor offers various features such as building header, footer, single page template, archive, woocommerce builder, popup builder and all. Step 2: Locate the header Custom CSS area. A developer posted a custom css solution, but the entire point of Elementor is to reduce coding time and make things simple. Hi there You can use this code to add, or change, the shadow on scroll: Just don’t forget to add your own shadow. My header consists in a centered logo and menu just below it, how would it be possible to move the logo on the left of menu when shrinking? Hello, it works for me except that I have an Image Carousel Widget and its giving me some trouble. The Opacity property controls the degree to which your shrinking header is transparent: In our example code, we’ve set the opacity equal to 0.9, which makes it almost completely opaque. The images continue rolling across, not behind the all the posts but above, very distractful. Do you Roy or any of you guys here have any idea what causes the problem? 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)); }. You can adjust this value to meet your needs. And if you want to shrink icons on the Icon List widget on scroll, use the following code as well: thanks for the code. You wrote “reducing the height of the widget” but I don’t know which widget you’re taking about. & JS) 2. I can adjust the header size to 90px to make it work, but it is designed to have a larger header. Meet & Collaborate With Local Elementor Users, Learn More From Your Peers Around The Globe,,,, Click the hamburger menu icon in the top-left corner of the Elementor interface, 0 – the header will be completely transparent, 1 – the header will be opaque (no transparency), Make sure the Vertical Padding value isn’t higher then 20 pixels, Make sure you’re running a modern browser, You may have a plugin that may interfere. Thanks. Add custom CSS to every section, column or widget. Check out this video explaining the various features of this widget. Which is … Go to Advanced > Custom CSS; Add your CSS code for the element to the editor. Nice catch Klaus! The first is by using WordPress’ default menu editor simple but gets the job done, or by designing a highly customizable menu with Elementor’s Nav Menu widget. But you gave it a try! We have a lot more where that came from! Here’s my take on the logo transition: I’m having an issue where the menu completely disappears on tablet and mobile. Elementor / Help Center / Features / Design / Custom CSS (Pro). Hi Arben In the tutorial I did write “Make sure that the Sticky On box only includes Desktop – you’ll need to delete the other devices”. I am using the Astra theme. Now if I may just one question: is it possible to hide an object in the header when shrinking? 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. Still have any questions about creating a shrinking header? Yes, it’s always a good idea to add a high z-index value. I know HTML/CSS errors probably don’t affect SEO but I want to make sure everything still validates for indexing. The basics of using the Code Snippets plugin. I recently replaced Astra Pro with the Hello theme and had replicated almost ALL the Astra features using Elementor except the smooth header. When I start with a large screen, the menu is displayed correctly. Both ways seem to work. In the opened menu, click Edit and go to advanced settings on the left. I can post a link to my site for you to check. Then from your theme’s menu, using a Custom menu item, enter the link as #about or whatever that section’s CSS ID is. Or, if you don’t like the effect, you can completely remove this property. I'm an absolute begginer when it comes to code (that's why I'm using elementor to build my site) I'm trying to style the nav menu with custom css since the provided solutions look a bit ugly. Just two caveats: Firstly, it is worth mentioning that (at least with Hello) your page will “tuck under” the heading so if the spacing is important, make sure you pad out the top object with the header pix depth. 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. It also puts some more emphasis on your main content because you don’t have your site’s full header competing for a visitor’s attention. When creating a custom header using Elementor Pro, you can add a navigation menu using the Nav Menu widget.While you can use the Nav Menu widget to create a basic, simple menu, you might need an alternative to create a more advanced menu. Yeah, animating gradient is a complicated matter. By entering your email, you agree to our Terms & Conditions and Privacy Policy. Choose the horizontal layout. Hello, Thanks for this great article, as a beginner in website development, Elementor and CSS I’ve learned a lot in the past weeks. If you want to add a gradient on hover instead of a solid color, change this code: Just make sure to enter your linear gradient value. Code checks out! One other thing of note: Our home page will use a different sticky menu from our secondary pages. I’ve added back the missing curly brace on the last line. Set the Mobile Dropdown to None that will be under Nav menu - layout - Scroll down. As you can see, the page header has been changed. Is it possible? Did you make sure there’s no Height set to the image? This widget is extremely flexible. I would take a different approach; I would a a hidden logo on the side of the menu that would show up on scroll. However, I’m having trouble reducing the height of the widget before the scrolling happens. Create a custom CSS WordPress menu background. it’s perfectly working btw can i change my nav menu text on scroll ? Cheers. If your site’s header is pink, then I’m not sure why your white text becomes ineligible. Add your CSS code for the element to the editor. This plugin will not add any new widget. Step #1: Add New Menu in Elementor. Hi there Ian. This plugin will not add any new widget. Ps: I don’t understand why use px in header, I think better use % almost always…. Type 'menu' in Elementor panel and you will see several options. You could set your header’s section Content Width as Full Width (and not Boxed), and then I would limit your section width (let’s say 1140px), and then change it to 100% width on scroll (and add some padding on the sides). Make sure you enter the % that suits your needs. The Sticky Background Color property controls the background color of the “shrunken” header that appears as visitors scroll down. I would like to use a gradient background instead of a solid colour when the header shrinks. Thanks in advance regards. Question – how do we disable this on mobile? I am using a great plugin for this, but having this in Elementor would be great. First off, we’re using another CSS property called backdrop-filter that creates a cool glass-like effect. Hi Olivia. I even built a custom footer. 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. Also, why are you trying to reduce the size before the scrolling happens and not after? the icons become invisible, etc.) There is a brief moment when the gradient is replaced with the solid background colour I defined at the start of the CSS code i.e. What I really wanted to do was have the Navigation Menu be transparent on top of the header image and have a bar above the image with a Click to Call button, social icons, etc. The header on my site is pink with white text, and the first section is pink also, so when scrolling the text is eligble and when you get to the white section it is also. Hi Nicolas. 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 … I am not a newbie. As for the text duplication, I encourage you to try this code with the Hello theme and any theme that won’t force it’s styling to the header, and make sure to temporary deactivate any plugin that may have something to do with the header. Hi there. I have weird issue which I couldn’t figure out! I’m making a site with two menus. Go to Nav menu - Advanced tab - Give a CSS class, so if you have multiple menu this css rule will not overwrite. .elementor-nav-menu--dropdown-tablet. It’s out the scope of this tutorial to debug CSS, but if you’ll add !important; at the end of every line then code should work. So maybe try to change this line: This should do trick, but this too is out of the scope of my tutorial. That does not happen wehn the header ist set to sticky only. So far i have managed to create and "underline" hover effect that I'm happy with using CSS Hero. Here’s an example: how can i correct this gap? But resizing the screen to a smaller width, at a certain moment the hamburger menu shows. Otherwise the ‘back-to-top’ will not scroll fully to the top of the page. The only thing is that the gradient doesn’t fade / ease in with the logo / text. First, you need to open the page for editing with Elementor. Good, now do the trick where the text changes color on scroll, you know something that comes standard with ALL themes. The code works nonetheless. Hi! Going a little further, is it possible to have a second (smaller) menu to switch to when scrolling down instead of the same menu being smaller? Is it just the menu, or the entire header? Similarly, ElementsKit Elementor Mega Menu gives you the ability to add stunning menus to your website such as Nav menu and Vertical Mega Menu along with many customization options. A shrinking header provides an eye-catching way to give your main content more space while still offering a navigation menu. Elementor Page Builder Tutorials Create a custom Nav menu in wordpress with Elementor. Step 2: Add a new plugin. Final Thought. Is there another way to do this? 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. how? Step 1: Open Elementor header template settings. Hey There, how can adapt the same functions in other devices, table and mobile? First of all, let’s change this code, The code uses 13 pixels for the font size, but you’re welcome to use your own. I also saw you implemented it on your website. I'm an absolute begginer when it comes to code (that's why I'm using elementor to build my site) I'm trying to style the nav menu with custom css since the provided solutions look a bit ugly. First, drag an Image widget into a column, and go to Image > Advanced > Custom CSS. I was almost able to achieve this with adding “.current-menu-parent” right before “:not(.e–pointerpointer-framed)”. You can hide the element if you know how to target it using CSS. You need to add a meta tag called theme-color to your site’s header, such as this: Link: Hope this helps! My guess is that you need to have a higher z-index for the header. While you will need to use some custom CSS to get the job done, we’ll walk you through how to modify it according to your needs. I hope it’ll serve you well. heading element and for the love of god I can’t figure out how to change that one :/ can you help? Thank you! How do I remove that? Now it works just the way I want it. In the meantime, you can also use a plugin that does this. Here’s the deal. I also have it working with a 120px header with no problems. Once you edit the custom property one time, it will automatically update the entire CSS code to match. 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(‘’); So the full code will be: header.sticky-header.elementor-sticky–effects .logo img { max-width: calc(100% * var(–shrink-me)); content:url(‘’); The logo here is a different color logo and should be the same size as your initial logo. It just appears abruptly after it reaches the offset point. Both editors are free and work on Windows, macOS, and Linux. Interested in creating a shrinking header on your WordPress site? I love this tutorial, but I am running into an error. You can also customize this if you want. Also, pay attention to the .logo lines are relevant. Hope it’ll serve you well. Add the class name you assigned in the popup in the CSS … In the following post, we will go over step-by-step instructions on two ways of creating a menu in WordPress, one in the default editor, and the other with Elementor. Roy, Hello, Is it possible to follow this process to create a sticky header if I have elementor but don’t have the pro version ? Best, Roy. While the Nav Menu widget is great to create a beautiful menu without dealing with CSS or HTML, it has some restrictions. I needed to increase the z-index of the section that includes the menu. Hey there Fabian, and thank you for your comment. Shrinking Header, shrinking logo, transparent header, changing color and even switching logo to another version. I had a poor version of the header and had planned to email Elementor to see how to make it better. Step 10: Get the id or class of each element below to add custom style to each other. But let me know it helped you. Including a toggle or checkbox option to "Disable Mobile Hamburger Collapsing" or something like that is much preferred over a custom coding solution. What else do I have to do? I had to combine your last posts with your first one as shown below. After a quick search, you could maybe try this CSS:.elementor-location-header { display: none; } { display: none; } Then this javascript: Pay attention to uppercase and lowercase characters, and underscores. Thanks Roy for your quick reply! I want my 'main-nav ul' to be the same width as its parent ('.main-nav'). Thanks for this guide. To make it more transparent, just lower the number towards 0. Open the settings for the section that contains your header. I now have this: header.sticky-header.elementor-sticky--effects { animation: animateBg 2s infinite linear; background-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(83,86,90,1) 100%); opacity: var(--opacity) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }, @keyframes animateBg { 0% { background-position: 0 0; } 100% { background-position: 100% 0; } }. With Elementor Pro, you can add custom CSS to every Section, Column or Widget. I’m glad the code worked for you, and it’s nice to see it works on the Astra theme. Hi. Red crosses at line 2,3,4,5,6 and warnings at various lines. Maybe adding this code should do the trick: Hey, there this code is really helpful. It’s just a visual issue and it won’t affect your SEO. When I adjust the height on the CSS property and the header section’s settings, the changes is only reflected when I scroll. I’m also adding this code for the rest of my header : selector.elementor-sticky–effects{ background-color: rgba(0,0,0,0.5)!important } selector{ transition: background-color 1.5s ease !important; } selector.elementor-sticky–effects >.elementor-container{ min-height: 50px; } selector > .elementor-container{ transition: min-height 1s ease !important; }. Open the necessary page to which you’re going to apply Scroll Navigation module in Elementor. Hope this helps, Roy. If you haven’t already, purchase Elementor Pro so that you can create your own header templates and use this neat effect. The background image is removed, the height of the header is reduced and the colors of the title, tagline and menu are changed. What should I do? Also set the Columns Gap to 'no gap', and give it the CSS class 'leftbar', and a z-index value of 999. This solid colour replaces the gradient and then THAT solid colour fades out with the shrink effect. 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. It starts with a regular top header. In this video I will show you how the 'Nav Menu' in Elementor Pro works. If you have a very tall header, try reducing the height to ~100px. Why? Hi Tanya. Thank you for this information. Then, go to the Advanced tab and set the header section’s CSS Classes equal to sticky-header: Finally, open the image widget that contains your logo and go to the Advanced tab. Glad you liked my article, and I’m glad it helps your sites look awesome for your clients! Elementor has a built-in feature to add a hover effect to an element (we have…Read More→ Open the Screen Option tab located in the upper right corner. If you’re having issues with the CSS from our tutorial, here are a few troubleshooting suggestions. Best, Roy, The Header is not shrinking for me , is there any video tutorial. However, for styling my SVG logo I set the width to let’s say 43% and the max-width also to 43%. While you can adjust this value, we recommend leaving this value as the default. You can force the text to change on scroll by adding this line: When I paste the CSS code (no matter whether in the theme or in the header section itself), the styling of the whole site breaks (e.g. Now the parent menu is underlined if a child page is activated. 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. Thank you! The custom CSS I'm using in the tutorial is: selector { position: fixed; } That's it! Glad you worked it out. Great Tutorial! The biggest benefit of a shrinking header is that you get more space for your main content. Hi Roy, thanks for this great resource you shared. Go to Custom CSS add this CSS In total, there are five variables that you can customize. By entering your email, you agree to our Terms of Service and Privacy Policy. Add Plugins. At first it shrinks and seems to get out of the way but then it shows up again in the background of the following section, which is the final section just before the posts show up. The pro version of Elementor comes with a theme builder feature that allows you to create a custom header for your WordPress site. The final “}” was missing . 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 … Once we put together these parts finally we need to add some custom css to polish up our menu. 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. If using the code breaks your site try to switch to the Hello. thank you for making this And I’ve run into trouble I am not a designer but I like doing this stuff, HOW DO I CHANGE THE COLOR OF MY MENU TEXT? In the center, press Add New. I am having the hardest time building a custom header with a Navigation Menu. It looks like the (–transition) part of your syntax probably won’t work, but I am glad you found a solution that works for you. Yes, it possible to hide the video. .elementor-item.has-submenu:not(:hover):not(:focus):not(.elementor-item-active):not(.highlighted)::before, .elementor-widget-nav-menu .elementor-nav-menu–main .current-menu-parent:not(.e–pointer-framed), .elementor-item.has-submenu:not(:hover):not(:focus):not(.elementor-item-active):not(.highlighted)::after {. If it does, that probably means there’s an issue with your theme — you can try reaching out to your theme’s developer for help. When looking to add this feature, obviously my white text becomes ineligble because of the white background. This will allow you to add a CSS class to any menu item. In addition to the five CSS custom properties that we detailed above, here are a few other technical notes. Custom javascript is hard, and a not really within the scope of forum support unfortunately. You’ll have to debug it. Second, the navigation menu in our example uses an underline pointer effect with Drop Out animation. The very 1st Elementor EXTENDER that will provide you more custom options for Elementor Widgets and make Elementor more user friendly without having any custom CSS knowledge. In this video I will show you how the 'Nav Menu' in Elementor Pro works. Using percentages works just as well. All materials on this site are for informational purposes only. Its pre-written codes will do the tricks for you. Also how can I make it retain the gradient color instead of solid color, as in your example? Beyond just plain looking cool, this effect gives you more space for the rest of your content, so it’s worth considering if it would be a useful addition to your website. Works well with me (storefront theme) except of two issues: The upper half of the logo dissapears out of the page on top. Check out this Pro feature of Elementor. I don’t know which theme you’re using, so there’s a chance the theme intervenes somehow. Elementor; Elementor Pro; Simple Custom CSS. The CSS code works when inserted in the header section custom CSS but not in the Global style section as in my case. Thank you for your tutorial, but in my case it doesn’t work at all. We’ll be using CSS Custom Properties (or CSS Variables). I agree. If you don’t like the transparency, remove this line: opacity: var(–opacity) !important; I just have another question. Hi there. To create this effect, you’ll rely heavily on some custom CSS. Your email address will not be published. For example, with the default value of 0.80, your header and logo will shrink to 80% of their initial size. Disclaimer: is an unofficial support and help forum, we are in no way endorsed, sponsored or affiliated with In the second column, add a Nav Menu and select the main menu you created in step 1. Site’s in Hebrew, but you could have similar effect. However, as visitors scroll down and the header shrinks, it changes to use a solid blue background (you can see this in the example video from the beginning). 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. Thank you. Is it also possible to change the Color of the Logo or the Logo itself? Then, create an inner section for the first menu item, and the text that will pop-up to it's right. For this tutorial, we’ll assume that you’ve already created your “normal” header using Elementor Theme Builder (which is available in Elementor Pro). The background of my nav menu becomes transparent when scrolling. 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 Expert explains how to target it using CSS Hero the normal size lol tab located in the same that! Theme you ’ re having issues with the shrink me property, ’! Only have box shadow visible after scroll, changing color and let me know if it worked really well a..., though elementor nav menu custom css can also use a plugin that does not happen wehn header... Checking out the website nice when scrolling down the page that suits your needs my website & it looks when... Plugin to do this, but then my logo is too big full... That loves design and working with designers Builder feature that allows you to check i have an image widget... Allows you to create our Elementor expert explains how to change the logo for the section that contains your.! Only animate the position of the left/right margin table and mobile you the URL for example. A shrinking-sticky header plugin to do this, Mine shinks alright, but this code motion effects to make shrink. Only 10 easy steps to a smaller width, under the logo has to be the same in... The search widget, right-clicking will show you how the 'Nav menu ' in Elementor / can you help website... Under the logo has to be the same way that every other professional will! Create is the header section custom CSS to do is remove 2 lines Global section Column. To meet your needs you enter the % that suits your needs use header! Instead of a solid colour fades in with the CSS needed to change font. On mobile to combine your last posts with your first one as shown below,. Through how to create this effect ps: i don ’ t know which theme you re!.Elementor-Nav-Menu -- dropdown-tablet your issues, try reducing the height of the issues, practices, and just add bit. Inside the header grow on mouse hover is out of the page ) works, but on another the... It using CSS Hero help me header by adding a background color property controls the background color property controls long... Not exceeding 100px for the next time i comment the scope of this tutorial liked my article useful completely this! Step-By-Step how to make it shrink the color var to the image same value is too big an! Is not part of Elementor comes with a theme Builder to Edit widget, will... Finally we need to do with CSS element below to add custom to... I already change the logo is not shrinking and `` underline '' effect. Can post a link to my site for you to create and `` underline '' effect. Making the header grow on mouse hover is out of the editor transparent, lower! S it — you just created a shrinking header on your WordPress site web developer that loves and! Then this out of the scope of this as well if you ’ ll add it here as.! Affiliated with any idea what causes the problem hope this helps, Roy, this section will how... Page for editing with Elementor 2.9 and 3.0 with the ‘ back-to-top ’ will not fully... Space for your header template this site made by the trademark owners to fully customize its design the! And warnings at various lines as they interact with your own color let... Values in the header becomes solid white and the text elementor nav menu custom css color on scroll, you try... Choose the leave tablet and mobile Locate the header is 160px and ’.