How to Create Smooth Scrolling and Fixed Menu in Qards (v.1.2)
In this tutorial we’ll show you how to make changes and adjustments in Qards using the Custom CSS feature. We’ll create a Smooth scrolling one-page website with a sticky menu.
Qards: http://designmodo.com/qards/
Used script and css:
http://designmodo.com/storage/smooth-...
Transcript:
So, we will want to link Smooth scrolling to the Portfolio Menu Item block for our content.
Let’s start with Smooth. Click the Menu block and choose Edit Menu Items. WordPress Menu Editor will open in a new window. Here we’ll open the Portfolio item and type “#Portfolio”. That word will be the starting point of Smooth scrolling, remember it.
Save the menu and go back to Visual Editor. Edit the desired block where the scrolling effect will stop. Select this block, click it and choose Custom CSS. For this block we’ll edit the HTML. Remember, if you edit the HTML, you can’t use the inline editor for this block. In our example we’ll edit the HTML. Find the container class and add the ID that we mentioned in the menu previously, so in our case is: id="Portfolio". Click Save and go back to the Visual Editor. Click Save so we can see the result. Click the Preview button and open it in the new browser tab. Now click Portfolio: we scroll to the desired block, but the scroll was too fast, so let’s fix it.
Open the WordPress dashboard and click Qards Settings. Here we’ll see the “Add Code to Head.” In this section will add the javascript that will make a Smooth scrolling effect. We have prepared this code and will copy and paste it here. (We’ll share this code in the description of this video, so you can copy/paste it into your websites as well.)
Now, click save and let’s look at the result. Open the page and refresh it. Click Portfolio and you can see a more smooth transition to the desired block. But this effect was still a little too fast, so we’ll change the time of smooth scrolling in the javascript. Go back to Qards Settings and change this number, we’ll increase it to see a difference. Go back to the page and refresh, click the Portfolio, and the effect slowly will scroll down to the block. In this style you can link every menu item to the desired block.
Now we’ll make a sticky menu. Generally the sticky menu is necessary for smooth scrolling effects. How you see, the menu disappears if you scroll down and appears if you scroll up, that effect increases the readability of your page. Let’s customize it. Click the menu block and choose Custom CSS; here we’ll paste CSS code that will maintain sticky our menu. (We have a ready–made code to paste in.) Save CSS changes, and click Save in the Visual Editor. Let’s check the page now -- refresh and scroll down -- the menu is fixed! Perfect.
You can easy customize Qards animations and transitions if you know the basics of coding. We hope this tutorial has pointed you in the right direction.
Watch video How to Create Smooth Scrolling and Fixed Menu in Qards (v.1.2) online without registration, duration hours minute second in high quality. This video was added by user designmodo 16 April 2015, don't forget to share it with your friends and acquaintances, it has been viewed on our site 6,841 once and liked it 20 people.