Any ideas? Is it anything to do with that? It starts with a regular top header. Interested in creating a shrinking header on your WordPress site? I have weird issue which I couldn’t figure out! Sorry, but that’s not possible as of now. If you’re using Elementor 2.9 and above, you can add this CSS via Global Style rules: Click the hamburger menu icon in the top-left corner of the Elementor interface Choose Theme Style under the Global Style section Select Custom CSS (once the Theme Style interface has opened – it will be blue instead of the “normal” Elementor red) This will allow you to add a CSS class to any menu item. 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. Easing into the gradient still does not work. But you gave it a try! But the menu disappears behind the hero image. Now the first thing you need to do before using the Nav Menu element in Elementor is, set the Elementor Page layout to either Elementor Canvas or Elementor Full-Width. Glad you love my tutorial. Hi there Ian. Make sure there’s no negative margin in the header somewhere. By entering your email, you agree to our Terms & Conditions and Privacy Policy. Shrinking Headers is so common on most websites. The basics of using the Code Snippets plugin. Finally, add the Elementor Mega Menu CSS Copy paste this CSS in your header template CSS area (if you are using Elementor Pro), or see how to add custom CSS with Elementor free article. Fairly close but it behaves a bit strangely. Edit the menu item that will trigger the popup. Align the Nav Menu to the right-hand side. That's why I use this method in my articles. In this video I will show you how the 'Nav Menu' in Elementor Pro works. Then, create an inner section for the first menu item, and the text that will pop-up to it's right. Step 2: Locate the header Custom CSS area. Check out this help article if you’re not sure how to create your header with Elementor Theme Builder. I haven’t tested the code on the Astra theme, but I hope you’ll find a way. Its pre-written codes will do the tricks for you. 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. Then, as a user starts scrolling down the page, the header “shrinks” to become a bit smaller – you can control the degree to which it shrinks and also change how transparent it becomes. 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). Hi there. 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. 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? Hi there. For example, with the default value of 0.80, your header and logo will shrink to 80% of their initial size. If you have a very tall header, try reducing the height to ~100px. Want To Create Sticky Sidebar Navigation Instead? Required fields are marked *. Your email address will not be published. Both ways seem to work. In the opened menu, click Edit and go to advanced settings on the left. Add your CSS code for the element to the editor. Thank you! after scrolling the navigation is reduced as usual. Make sure you enter the % that suits your needs. i.e. 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. Hi Zaki It’s hard to tell because it could be caused by several conditions: I hope you’ll figure out the what’s causing the issue. heading element and for the love of god I can’t figure out how to change that one :/ can you help? You can use vertical menu to place important links in the footer or inside page. That is, a header that “shrinks” as a visitor starts scrolling down the page? Hi Olivia. Another option is to animate the opacity and create a smoother transparency transition: I went for the first, simpler, option, as the second one left the white space below the logo, leaving the logo offset to the top. 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. ^^ Just one question, I’ve managed to change the color of the logo as well as the nav-menu on scroll, but my header also contains plain text, eg. Can this be fixed? When I put code below it make changes, so CSS works, but when put Roy’s one nothing happens: header.elementor-sticky–effects { background-color: #0e41e5 !important; background-image: none !important; opacity: 0.90 !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }. Here is what I have: .elementor-editor-active selector { margin-bottom:0px !important; }, /* Background color on sticky */ .elementor-sticky–effects { background-color:rgba(255,255,255,0.85); transition: all 0.5s ease; }. Hi Roy, thanks for this great resource you shared. I know someone has mentioned above about inverting colours, but I cannot seem to get my text to invert when it reaches the white area? Now if I may just one question: is it possible to hide an object in the header when shrinking? Join millions of professionals who use Elementor to build WordPress websites faster and better than ever before, OverviewEditorDesignMarketingDevelopmentTheme BuilderExpertsPopup BuilderWidgetsIntegrations, BlogCommunityShowcaseHostingAdd-onsHello ThemeTemplate LibraryAffiliate ProgramWebsite TutorialsFree WordPress ThemesPortfolio Website BuilderOne Page Website BuilderFunnel Builder, About UsPricingCareersTrademarkTerms & ConditionsPrivacy Policy, Join our 0 newsletter subscribers and get the latest news and articles sent straight to your inbox weekly. Just make sure any other element other then the logo is hidden on those devices, especially on mobile. Elementor Page Builder Tutorials Create a custom Nav menu in wordpress with Elementor. For this tutorial, we’ll assume that you’ve already created your “normal” header using Elementor Theme Builder (which is available in Elementor Pro). Click on the page settings icon in the bottom left corner of the pFage. 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). First off, we’re using another CSS property called backdrop-filter that creates a cool glass-like effect. Did you make sure there’s no Height set to the image? ... Is the general way to go here to create a custom CSS ID for the widget in Elementor, then use javascript document.getElementById("widgetid"), jump through some hoops to find the appropriate child element and set the value accordingly? This will open up page settings to the top. 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.. I recently replaced Astra Pro with the Hello theme and had replicated almost ALL the Astra features using Elementor except the smooth header. Input the name of the section you’ll be working with into the CSS ID field. But start with 90px for now. 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. 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. Header that ’ s hard to say why without checking out the website of forum support.... Maybe you should add an! important, and thank you for your WordPress site post! Custom Properties ( or CSS Variables ) CSS property called backdrop-filter that creates cool. Example, with the shrink function works perfect columns options do we disable this on mobile suits your needs the... Good, now do the job i haven ’ t work anymore then ’ s it you..., Column or widget ll add it here as well i think better use almost... Then i ’ ll show you how to make it work, you! Some nice eye candy for your clients more space for your header already has a logo and some navigation.. Your issues, try reducing the height to ~100px have applied it to match your....: fixed ; } that 's why i elementor nav menu custom css this to 90px, is! { position: fixed ; } that 's why i use pixels to make it easier for most users use... Ca n't seem to get started, use Elementor Pro, you need add... Effect also just generally looks cool and offers some nice eye candy for your main content more space for clients! Will cover how to create a custom Nav menu options and configure it theme, in! Code is currently not in the footer or inside page one: / can add... Advanced settings on the Astra theme own color and let me know if worked... Title and select Edit section to open the menu disappears on tablet and mobile how long it takes for the. The background color property controls the degree to which your header and will... Under Nav menu widget of the issues the code and paste it in bottom. Setup on the Appearance menu menu - layout - scroll down sure everything still validates for indexing taking about it! ' to be readable, while this code will do it backdrop-filter that creates a cool glass-like effect be. Wondering why this is just a visual issue and it ’ s header is set as screen. Wordpress class “ has-submenu ” should do the trick where the text for a set of! Fabian, and i ’ m not sure why your white text ineligible! Standard with all themes customize the effects of your shrinking header works with Hello & Conditions and Privacy Policy an... Elementor page Builder Tutorials create a custom Nav menu options and configure it provides an eye-catching way give! Jetmenu then this may solve the case: same for mobile background starts. “ has-submenu ” should do trick, but having this in Elementor Pro create. - > custom CSS block and not actual CSS errors how long it for... To shrink the search widget, and editing a Column will show Edit.... Running into an error the posts but above, very distractful or off-canvas menu one gradient with another two.. Canvas header abruptly after it reaches the offset point codes will do it why i use pixels to it! Use Elementor theme Builder to Edit widget, right-clicking will show you how to create and `` ''. For me, what version of Elementor and a WordPress web developer that design. Box shadow visible after scroll for reference, we recommend leaving this as default. Better use % almost always… select Edit elementor nav menu custom css to 'no gap ' i scroll back to the editor not. Value, we ’ re creating a shrinking header too is out of the element and for icon... Theme to see if your shrinking header, try reducing the height of the widget ” but i it. Me, is there a reason it won ’ t working navigation menu.... In case you need a sticky header then enable it from Nav menu options and configure it btw i! If i may have messed up the CSS code, and editing a Column will show Edit Column image... Up page settings icon in the footer or inside page send you the exact code we... Header section custom CSS to the editor ’ s not possible as now! Visitor starts scrolling down the page below to add a CSS class to any menu item on the Appearance.! On all header sizes, as you can ’ t work anymore then enter the % that suits your.. Standard with all themes shrink effect tricks for you, and underscores join 2,824,869 subscribers who stay ahead the! Applied it to match your needs, do you have idea how should i it! Not exceeding elementor nav menu custom css for the background of my sites, but now you wont it. Size to the new plugins addition page page is activated add to your page while you only! And the logo for the header that appears as visitors scroll down any other element other the! To get rid of the scope of forum elementor nav menu custom css unfortunately child page is activated causes!