Welcome back Friends, Today in this blog, you will learn how to create a pure CSS animated sticky navbar with a smooth scrolling effect using HTML and CSS. Navbar is a website component that helps the visitor navigate around the different pages or section of the website.
So the name "Sticky navbar" itself is self-explanatory. If I explain in a sentence, I would say, a navbar that sticks on top or bottom of the web page even after the visitor scroll down or up the page called a sticky navbar, and most of the developers use this technique widely in their websites.
Now we will link the relevant section in the navbar with a particular id and save it. Now, if we check the webpage, we will see that whenever we click on the link, it will directly jump to that particular section. It will look nice if it goes smoothly to the corresponding section. We can do this kind of effect through javascript coding. But for this snippet, we will use css3 animation and use a simple one-line code to get the smooth scrolling effect.
The snippet design is based on a simple one-page website where we will apply this technique. This simple one-page website will have multiple sections about, portfolio, services contact, and the home section. I used a random header text and some dummy paragraph text for each section. So whenever the visitor presses any menu items of the main menu, it will take the visitor to the corresponding area. If you wonder how the sticky navbar with a smooth scroll will look like after coding, I will recommend you follow the video below.
You May Also Like:
- How to Make a Drop Down Menu using HTML and CSS
- Simple Ken Burns effect using CSS Keyframes Animation
- Simple Website Design using HTML and CSS
I have taken a div named navbar in HTML Coding in which I have taken an anchor tag called a logo. And an unordered list of anchor tags for the menu. I have given a unique id name to each nav item, and after that, I have taken five different sections naming them with the associated id name.
I have used the CSS flex property in the CSS Part to style the navbar and the related sections. At first, I have giver flex: 1 1 auto; to align the logo to the left and display: flex and justify-content: right to the nav class to align it to the right. I have used a random image from the pixels website for the banner area and made the banner image look 100% of the viewport height with some basic CSS styling. For each section, I have used flex property to align the related text, followed by giving the individual sections a 100% width and a width of 700px. I provided the text part class, a particular width of 65% and a height of 80%. I gave each section underneath the homepage a background color to differentiate them from one another—the area where took black color as a background, I made the text white. For the smooth scrolling effect, I have not used any jquery or javascript. Just used a simple CSS scroll-behavior property, which will create a lovely soft scrolling effect when someone clicks on the nav item.
Pure CSS Animated Sticky navbar (Source Code)
To create this snippet, you need to create two files. One of them is an HTML file, and another one is the CSS file. After that, you need to copy the HTML and CSS code and paste it to the appropriate files and save them.
I have used the CSS flex property in the CSS Part to style the navbar and the related sections. At first, I have giver flex: 1 1 auto; to align the logo to the left and display: flex and justify-content: right to the nav class to align it to the right. I have used a random image from the pixels website for the banner area and made the banner image look 100% of the viewport height with some basic CSS styling. For each section, I have used flex property to align the related text, followed by giving the individual sections a 100% width and a width of 700px. I provided the text part class, a particular width of 65% and a height of 80%. I gave each section underneath the homepage a background color to differentiate them from one another—the area where took black color as a background, I made the text white. For the smooth scrolling effect, I have not used any jquery or javascript. Just used a simple CSS scroll-behavior property, which will create a lovely soft scrolling effect when someone clicks on the nav item.
Pure CSS Animated Sticky navbar (Source Code)
To create this snippet, you need to create two files. One of them is an HTML file, and another one is the CSS file. After that, you need to copy the HTML and CSS code and paste it to the appropriate files and save them.
HTML
CSS:
Thank you .
ReplyDeleteCan i use that code into a project ?
sure.
DeleteThanks It Worked
ReplyDeleteThank You
Hi I will be using this as an activty for school
ReplyDelete(with your permission ofc)
Post a Comment
Please do not enter any spam link in the comment box.