Adobe Muse makes it easy to create elements that span the entire width of the browser. However, there isn’t an out-of-the box feature available to create an element with a 100% height. Using graphic styles and a little bit of code, you can create fluid elements that span the entire height of the browser, irrespective of the size of the monitor or device of a user viewing your website.
In this post, I will show you how you can create a full-height rectangle and enhance the look and feel of your website.
Here are two examples in which full-height rectangles have been used to create sidebars and pretty-looking navigation bars.
Image may be NSFW.
Clik here to view.
Image may be NSFW.
Clik here to view.
Read on to find a small code snippet that helps you stretch a rectangle to 100% height.
- Open the master page of your site in Adobe Muse.
- Create a rectangle in the upper-left corner and fill it with the color you want.
- Pin the rectangle clicking the upper-left pin from the Pin tool.
Image may be NSFW.
Clik here to view.
- Select the rectangle.
- Choose Window > Graphic Styles to open the Graphic Styles panel.
- Click Create a new graphic style from the attributes applied.
Image may be NSFW.
Clik here to view.
The new graphic style is applied to the selected rectangle. - Double-click the new graphic style, rename it to fullHeight and, click OK. Make sure you specify the correct Style Name.
- To check how the page looks in the browser, select Preview Page in Browser from the File menu. You will notice that the rectangle does not stretch to full-height. Now, let us add a little piece of code to the master page, to stretch the rectangle to full-height.
- Copy the following code snippet.
<style> .fullHeight { min-height: 100vh !important; height: 100vh !important; } </style> - From the Page menu, choose Page Properties > Metadata, and paste the code in the HTML for <head> section.
- Click OK and, preview the page. You will see that the rectangle stretches to 100% height of the browser.
Using the full-height rectangle in a navigation menu
You can use a full-height rectangle to enhance a vertical navigation menu. I have used the Adobe Muse starter template My Name to demonstrate this scenario.
- Open the master page of your template.
- Create a rectangle on the left edge of the master page.
- Fill the rectangle with the desired color and click the upper-left pin from the Pin tool.
- To ensure that the rectangle is on the top layer, right-click on the rectangle, and choose Move to Layer > Menu.
Image may be NSFW.
Clik here to view. - To bring the rectangle to the bottom of the navigation, right-click on it again. Choose Arrange > Send to Back. If you do not see the Send to Back option, it implies that the rectangle is already at the back.
- Now, follow steps 4 to 10 from the first section.
That’s it! Your navigation is now ready.
Creating a sidebar using the full-height rectangle
Read on to know how you can use a full-height rectangle to create a sidebar on the left of your website. I have used the Adobe Muse starter template Kahve to demonstrate this scenario.
- Open the master page of the template.
- Create a rectangle on the left edge of the master page and fill the rectangle with a desired color.
- Add a text frame and type “THE KAHVE CAFE” (or any name you like) in the text frame.
Image may be NSFW.
Clik here to view. - Rotate the text frame to 90 degrees and place it above the rectangle that you created.
Image may be NSFW.
Clik here to view. - Add a logo in the upper-left part of the page.
Image may be NSFW.
Clik here to view.![]()
- Select the rectangle, the text frame and the logo by holding the Shift key, and pin the objects clicking the upper-left pin from the Pin tool.
- Ensure that the rectangle, the text frame and the logo are on the top layer. Select the three objects by pressing the Shift key, and right-clicking on any one of these objects. Choose Move to Layer > Menu.
- Now, follow steps 4 to 10 from the first section.
That’s all! Your sidebar is now ready.
To learn more about Adobe Muse, see Adobe Muse CC Tutorials.