- 10
- 52 698
CGS Web Designs
เข้าร่วมเมื่อ 7 ส.ค. 2013
Web Design, Tips & Tricks, Product Reviews
How to Make a Scroll to Top Button with Astra FREE - All CSS - No Plugin, No Pro, & No Page Builder
In this video you'll learn how to use Astra's customizer to add a scroll to top button which is normally only available in the Pro version of Astra.
There are a lot of great features to Astra Pro, but if you only need this one, then you can save yourself some money with these couple code snippets - and you can do it all right in the free version's Customizer.
You can head over to my blog to get the code: cgscomputer.com/astra-scroll-to-top-how-to-create-a-scroll-to-top-button-in-the-free-version-of-astra-video/
*****
The following are affiliate links - if you purchase through the links I may earn a commission. It costs you nothing extra and helps me to fund this channel and my blog.
Astra Pro current pricing: wpastra.com/pricing/?bsf=3903&campaign=youtube
Elementor Pro current pricing: cgscomputer.com/get-elementor-pricing
Rank Math SEO Pro current pricing: rankmath.com/pricing/?ref=cgsinvestmentsllc
There are a lot of great features to Astra Pro, but if you only need this one, then you can save yourself some money with these couple code snippets - and you can do it all right in the free version's Customizer.
You can head over to my blog to get the code: cgscomputer.com/astra-scroll-to-top-how-to-create-a-scroll-to-top-button-in-the-free-version-of-astra-video/
*****
The following are affiliate links - if you purchase through the links I may earn a commission. It costs you nothing extra and helps me to fund this channel and my blog.
Astra Pro current pricing: wpastra.com/pricing/?bsf=3903&campaign=youtube
Elementor Pro current pricing: cgscomputer.com/get-elementor-pricing
Rank Math SEO Pro current pricing: rankmath.com/pricing/?ref=cgsinvestmentsllc
มุมมอง: 2 558
วีดีโอ
How to Create a Header & Footer with Elementor Free (NO PRO)
มุมมอง 1.2K4 ปีที่แล้ว
In this video, I'll show you how to use the free version of Elementor to build custom headers and footers for your WordPress website. This is a great method if you don't want to pay for Elementor Pro or can't afford it. It does require an additional plugin, but it's free and gets the job done. My apologies ahead of time for missing the dropdown menus - I didn't realize that OBS doesn't see them...
Astra Theme Suspended from the WordPress Repository! Justified or not?
มุมมอง 1384 ปีที่แล้ว
Do my thoughts on this really matter? Probably not. But here they are anyway. On August 7, the very popular WordPress theme Astra was suspended from the official repository for violating the rules on affiliate links. Many think it was too harsh of a punishment. But the issue goes further than WordPress - the Internet is a wild west of rule and law violations.
How to Create a Scroll to Top Button with Elementor Pro in Just a Couple Minutes
มุมมอง 1.6K4 ปีที่แล้ว
In this video, I'll show you how to easily make a scroll to top button using Elementor Pro. This demo uses a ready-built template from the Astra Premium Sites plugin. I have a detailed post in my blog that shows you how to do this using a global widget instead of directly in the footer here: cgscomputer.com/how-to-make-a-scroll-to-top-button-with-elementor/ Elementor Pro is the most popular Wor...
Ridge Wallet Review & Unboxing - Minimalist Carbon Fiber - Is it Worth the Money?
มุมมอง 1.6K4 ปีที่แล้ว
June 24, 2020 Update: For those asking, yes I'm still using this wallet. I take it everywhere. I'm not one to say 'never', but I don't see any reason to go back to a tri-fold wallet any time in the foreseeable future. I bought this Ridge wallet to try to slim down what I carry - I usually keep my wallet in my back pocket which isn't good for your spine alignment. Since the wallet cost quite a b...
How to Create a Sticky Header in the Free Version of Astra with CSS (NO PRO, NO PLUGIN)
มุมมอง 42K4 ปีที่แล้ว
The free version of the Astra WordPress theme doesn't have a sticky header available. In this video, I show how to use custom CSS to achieve the effect without having to purchase the pro version of Astra. You can view & copy the code snippet in my blog here - I keep it updated with the latest copies of the code as Astra releases updates - INCLUDING the new 3.0 update: cgscomputer.com/how-to-cre...
How to Modify Fonts in WordPress using CSS (NO PLUGIN)
มุมมอง 3237 ปีที่แล้ว
This video shows you how to find the CSS in the stylesheet of a WordPress theme and copy/paste it into a child theme or CSS customizer/plugin so that you can modify the fonts from the defaults used in the themes. This is especially handy for free themes that normally don't have this level of customization readily available. cgscomputer.com WordPress Theme: Twenty Seventeen used for example. The...
Jelly Comb 2.4G Wireless Mouse with Nano Receiver Review
มุมมอง 3.2K7 ปีที่แล้ว
Cheap mouse review - check here before you buy it on Amazon to see if it fits your needs. Mouse is made in China, cheap electronics but definitely fair for the price tag on Amazon. Definitely a couple of items to take note of - specifically the scroll wheel (which isn't a ball even though it looks like it). The super quiet click some people might not like as well. Link as of August 2020: amzn.t...
How to Submit a Sitemap to Google Webmaster - Quick 'n Dirty Version
มุมมอง 487 ปีที่แล้ว
Very quick run through on how to submit a sitemap to Google Webmaster (Google Search Console). Very little commentary - just down to business. The following is an affiliate link - I'll earn a commission if you purchase through this link. It costs you no extra and helps fund what I do on this channel and in my blog. Astra Pro current pricing: wpastra.com/pricing/?bsf=3903&campaign=youtube Elemen...
How to Submit a Sitemap to Google Search Console 2017
มุมมอง 1407 ปีที่แล้ว
This video will show you how to find your sitemap URL and submit it to Google Search Console. We also show you how to process Google's site ownership verification process. cgscomputer.com In this specific example we're using a clean WordPress installation with a simple plugin for generating sitemaps. This method will also work for other types of websites as long as you know the URL for the site...
Thanks Buddy
Thanks ❤
Why I am seeing this video after 3 years? Why? Thank you bro. Subscribed, liked and will will probably bookmark your channel.
Really helpful and clear thank you !
Great tutorial, does anyone know how to make header shrink on scroll down?
Thank you so much; you've been a great help
YOU'RE A LIFESAVER ILY<3 BEST AND SIMPLEST TUT EVER
sitelogo is also a pro feature.
Hi, this is great! But it is for a post right? It is not working for me as mine is a page. Is there any way to do for that too?
Excellent tutorial. I had found the code on your website but it didn't work. Seeing this video showed me what to change (.site-header change to .main-header-bar) and it works beautifully, AND I now have the added advantage of seeing how it works. Thank you so much!
Thank you very much for the code. One question: did you put your mic right on the table? Because you can hear every move of your mouse
Thank you for helping us! Even with the current updates, one can assemble the code however they want, based on your instructions. 🤘
Working in 2023. Thanks a lot
Thank you!
Wow, super helpful!
howdy, any idea why this wouldnt work? I followed the instructions and the header is not sticky
Thank you for this great info! Is it possible to have only the "primary menu" of the header sticky and not the "below menu?"
The best solution ever Thanks man!
not working anymore
I just tested the current code on my test site and it's still accurate. You may need to double check you're using the code I posted in my blog - that's where I keep the code updated when Astra makes changes that require me to make adjustments. Also, if you're using an Astra site template from their collection of pre-built sites, some of them use different header options that negate the base code and you'll have to adjust it.
Thank you sooooo much, this is all I needed! And I especially appreciate you updating the blog too!
Thanks so much for watching and commenting! I'm glad you got what you needed.
YOU ARE AMAZING. Thank you
Thank you for such a nice comment! It's highly appreciated :-)
Awesome!! Thx a lot. Question: how can i change the size of the botton?
I'm not sure I understand - botton? Do you mean bottom? Button? I'm unsure!
Where is the CSS code?
The link is in the description of the video - I keep the code updated on the link since I sometimes have to adjust it after Astra updates. The latest working version will always be at the link in the description.
Thank you, the tutorial is easy to understand, I tried and it works perfectly !
Great to hear!
Fantastic! Can you please make a video showing how I make it fully transparent then when i scroll its semi or not transparent anymore after a length of scroll?
Hi, thanks for checking out the article! In order to make the style change on scroll, you would need to write some Javascript code. Unfortunately, I'm not very good with that :/ Sorry!
thank you
You're welcome
Great tutorial and it works for me. what I need to do is, I have a above header and when you scroll down, only the main header will remain sticky and the above header will be pushed above? I hope you'll help me with this. Thanks!
You would need some Javascript code in order to detect the scrolling. Unfortunately, I don't know how to do that just yet. :(
Superrrrr thanks very muchhhhhh
Welcome 😊
It's working! Thank you.
You're welcome!
Thank you, man. So helpful
You're welcome!
very nice video you deserve like dear
Thank you! Cheers!
Thank you! That was so helpful, and so quick!
Glad it helped!
Coincise and perfectly understandable, thank you for sharing your knowledge!
Thanks! I'm glad it was useful for you!
It is very useful! Thank you!!
You are welcome!
Thank you!!! It works, and I'm very grateful to you!
You're welcome!
thank you so much for this tutorial!
Glad it was helpful!
Hi, Sharif, this was awesome thank you! One question tho - I have a free version of Astra and am currently building my website. I cannot find where to change the look of the drop down Menu that comes from the main navigational menu. for example: when I hover over 'services' the drop down menu looks horrible - it is some kind of a bubble and i want to change it but don't know where. (I googled as well, still couldn't find it). Anyway, I would really appreciate if you could help :)
Hi, sorry I missed this question or I would have gotten a reply to you sooner. In Astra free it's pretty limited, but you should be able to find settings in the Header Builder section of the Customizer. Drop the Primary Menu widget into the Header Builder and then select the widget and click the DESIGN tab. That will give you the configurable options that are available. If you know CSS, you can also target the .sub-menu CSS class for your own customizations.
Hi, thank you for making the tutorial and sharing the codes, it works perfectly in 3 different devices. Great Job!
Glad it helped!
Thanks! ; )
Welcome!
Hey - thank you for this code and video, super helpful! One thing, how do you get the 'Scroll to top' button to only show once you start scrolling? It's currently showing when the page loads immediately but I don't want it to appear until like 3 seconds of scrolling or so.
Thanks for watching my video, you would need to use .js code for this type of behavior. Unfortunately, I don't know .js. You can check here for some tips on how to do that: www.w3schools.com/howto/howto_js_navbar_hide_scroll.asp
How to keep sticky header only for desktop? I don't want the sticky header for smaller screens.
You can use media queries in your CSS code the same way we adjust the padding for different screen sizes.
Anchor links are not working nicely with the new transparent sticky header of Astra theme. It hides some of the text due to the header. Can you provide the code to solve this problem? I am using Astra free version and used your code to make it sticky.
Hey thanks for watching, I'm not actually sure how to make that happen. Since this code is applied to the Astra free version, the container and .js adjustments that make it smooth in the premium version don't come in to play. You can check here for possible answers: stackoverflow.com/questions/10732690/offsetting-an-html-anchor-to-adjust-for-fixed-header
This works fine in the desktop version. In case of mobile the menu doesn't scroll down. When I press the toggle button the menu still comes at the top of the page only. Help please.
Thank you for commenting. The code is set for Astra as it is on the default installation, I just checked again on my test site and the code is still valid on a fresh Astra free installation. However, if you're using other Astra features such as the Custom Headers or you've installed one of their starter templates, you may need to inspect your header elements in the html code to see what CSS selectors to target.
I am using the gunmetal aluminum with cash strap and I absolutely love it but I also bought the carbon fiber one with cash clip so after the gunmetal one wears out ina yse the carbon fiber love ridge but I also use trayvax wallets they are made in the USA
Thanks for watching! I still have that wallet and use it every day - I swear it looks brand new too, there isn't a sign of wear on it at all. Definitely a good purchase.
good tutorial, thanks!
Glad it worked for you!
Thanks for your great videos! The sticky header I implemented already successfully. Unfortunately I don't get the scroll to top button working. Since I'm not displaying the site title I tried it with "#h1" instead of "#masthead". Still doesn't work. Any ideas?
Thanks for watching, can you send me the link to your site? If so, I can look at it and see if I can find another ID you can anchor to. If you don’t want to share the link publicly, you can email it or send it via the contact on my site.
@@cgswebdesigns It is not live yet -so I think it doesn't make sense to send the link?!
@@arniriede ok in that case, try #page and see if that works - I stumbled onto that one while I was working on this video and it seemed to work but I didn’t fully test it.
@@cgswebdesigns This works! 😃 Great! Thank you sooo much!!!
@@arniriede excellent! Thanks for letting me know :-)
Thanks, useful
Glad it was helpful!
This works. CCS class for me is "main-header-bar-wrap" but the same for everything else. ty.
Glad you got it working!
Thanks bro <3
You're welcome 😊
thank you and have a nice day!!! will remember to buy via your affiliate link when I need a pro version...
Please do!