Viewers: in countries Watching now:
Join Justin Seeley, lynda.com staff author and design enthusiast, each week for a new 5-minute, self-contained tutorial that you can use to instantly improve your design workflow. This series covers techniques for print, digital, and web design, addressing the tools that creative professionals like you use most. Learn new ways to leverage layer styles and vector shapes in Adobe Photoshop, work more efficiently with text in Illustrator, and embed videos and even tweets in WordPress posts, and much more. Check back each week for a new installment, and a new design hack.
- Hey everybody, welcome back to another edition of Creative Quick Tips. This week I'm going to be inside of Adobe Muse, showing you how to create what's called a "sticky" header inside of Muse. This is a question I get a lot, and even though I cover it inside of my Muse Essential Training course, it can be kind of hard to sift through all that information, so I thought I'd bring it to you in this very quick and easy tutorial. So exactly what do I mean by sticky header? Well when I take a look at this website right here and I hit Preview and I scroll through, you notice that the header remains in place while everything else scrolls underneath it.
So how is it that I am able to do that inside of Muse? Because in general, when you go to create a new website inside of Muse and you stick something in the header, like let's just stick a shape inside of this header here, something kinda like this, and we'll change this to red so you can see it, and then we'll raise the margin up so that it goes like that, and then we'll extend this all the way across. So this is gonna kind of be our basic template for what we're trying to do here.
Let me close the text panel so I can actually see what I'm doing. Then we wanna make sure it goes 100%. So generally, when you create something like this, this is what you run into. You run into this header, and then when I'm inside of the website itself, I'll close the master, as I'm building the website, I'll start adding content. So I'll just start adding content blocks here and these'll just be random things that we draw. There we go. Let's just draw something else underneath it, or actually I can just take this and copy it down. Something like that.
So there we go. We've got three big content blocks that will cause this thing to scroll. When I click Preview, you'll notice here that when I do that, it just kinda scrolls off the page. That's not what I want. I want the header to remain persistent like it does in the first one. So how then do I get it to do that? Very simple. You go into your Headers, let's go to website two here in the A Master. I'll double click inside of here, and let's add some more stuff to it first of all. So I'll add THIS IS MY LOGO.
I'll make some changes to this just to give it a little bit of a decent appearance. Let's change this to Bree Serif, something like that. Let's bump up the size quite a bit. Increase this, there we go. We'll change the color. We should be good to go there. So let's move this up. There is my logo. Then let's go back to my website here. We'll add some more pages about contact and portfolio.
Then we'll go back and go into my Widgets Library. We'll go down to Menus, Horizontal, drag one out, and we'll just place it up here. So there we go, we've got our menu now, and everything's inside of our header. The problem is I have placed these on the Home page instead of the A Master. So let's cut that from there, go back to the A Master, place that back on the A Master, and there we go. Something kinda like that. Now I'll go back to the Home, preview it, and we still have everything scrolling off the page.
So how do I fix it? I go into the A Master. First of all, I'm going to select the big red block in the background, and then up here in the Options bar, there's this little thing called Pin, and I'm just gonna click right here in the center. That's gonna pin that object where it is. Right here I'm gonna select THIS IS MY LOGO, and we'll just pin that there, and this one here, and we'll do the same thing there, pinning it. We're gonna pin all three, just like so. Now when I go over and go to Home and then switch to Preview mode, everything is going to scroll...
Oh, wait. That's what happens! The unfortunate thing here is everything's gonna scroll on top of it. So you have to figure out how to fix that as well. That's where layers come into play. So inside of this, what I'm going to do is create two layers. So I've got Layer 1 and Layer 2. Right now in the A Master, pretty much everything is living on this. So what I'll do here is I'll just take this layer and move it above Layer 2, like so, and you can even call this something like Header, and then you can do this as Body. I'm just double clicking those names.
Then let me close both the A Master and the Home. Go back to Home here. What I'll do is go into the Layers panel and all of these rectangles that you see here, I can select all of those and I can drag them down to the Body layer like that. So I'll drag that one and that one. So all three are down there now. So now when I hit Preview, everything scrolls behind it just as it should.
So that is how you create a persistent or "sticky" header inside of Adobe Muse.
Find answers to the most frequently asked questions about Creative Quick Tips .
Here are the FAQs that matched your search "" :
Sorry, there are no matches for your search "" —to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.