g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Natural Living
Folklore and Mythology
Distance Learning

All times in EST

Low Carb: 8:00 PM

Full Schedule
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor


Wix Website from Scratch - The Header Menu

In this tutorial, we will continue to work on our Wix website that we have started from a blank template. We will add a main menu in the header section.

Our first task is to add a color background to the Header.

  1. Select the Header and click the Change Header Design button.

    At this point, the Header is set to No color. Let's change that to white.

  2. Click the Header design just below the No color.

  3. Click the Customize Design button at the bottom of the window.

  4. Set the Fill Color & Opacity setting to 100% white for the Background and Center Background.

  5. For the Border settings, set the Top Border and Bottom Border Width to 0.

  6. Set the Corners Radius to 0 and turn off the Enable Shadow.

Now we can add the top menu.

  1. From the left menu, click the Plus icon and choose Menu from the list.

  2. Click on one of the Horizontal menus to add it to the page.

    You will see a new menu on the page with the link for our one page - Home.

  3. Click and drag the menu to the header section. When you see the text Attach to Header, release the menu.

    Because we will be centering our menu on the page, we will extend the menu box across the 980 px width.

  4. With the menu box selected, drag the ends of the box to fill the 980 area. Use the left and right guidelines as a guide.

    The menu should be already set to center by default. You can see this because the Home link is in the center of the box. Now, we can customize the menu.

  5. With the menu still selected, click the Design icon (paint brush) to open the Horizontal Menu Design window. Click the Customize Design button at the bottom of the window.

    If you click on Fill Color & Opacity, you will see that the menu background is already set to 100% white. Let's keep this setting and move on to the text.

    In the previous tutorial, we set the font to Futura Light for the main text theme. Let's do the same for the menu.

  6. Click on the T icon to open the Text settings section.

  7. Click the arrow at the right of the Font section and choose Futura Light from the list.

    Let's keep the default color setting for the Regular menu text. But we will change the Hover and Clicked menu text color to gold.

  8. Click the Hover link in the window. Click the color box to open the Color Picker. Click the Add Color link, change the Color setting to # bc9b5d and click the Add button. Close the Color Picker.

  9. Repeat the previous step for the Clicked setting. But this time, you can choose the gold color from the My Colors area.

    Finally, we want to change the default text for the page link from HOME to the name of the website.

  10. With the menu still selected, click the Manage Menu button from the pop up menu.

  11. From the Pages menu, find the HOME page and click the link to the right. Choose Rename from the list. Add the new link title and click Done.

    Our next task is to resize the header section to just a little more than the height of the menu.

  12. Select the menu and drag it upwards to the top of the header area.

  13. Click an empty area of the header to see the Stretch handle. Drag the handle upwards.

Join us in the Animation forum. | Join us in the Digital Art forum.


Add Wix+Website+from+Scratch+%2D+The+Header+Menu to Twitter Add Wix+Website+from+Scratch+%2D+The+Header+Menu to Facebook Add Wix+Website+from+Scratch+%2D+The+Header+Menu to MySpace Add Wix+Website+from+Scratch+%2D+The+Header+Menu to Digg Wix+Website+from+Scratch+%2D+The+Header+Menu Add Wix+Website+from+Scratch+%2D+The+Header+Menu to Yahoo My Web Add Wix+Website+from+Scratch+%2D+The+Header+Menu to Google Bookmarks Add Wix+Website+from+Scratch+%2D+The+Header+Menu to Stumbleupon Add Wix+Website+from+Scratch+%2D+The+Header+Menu to Reddit


RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map

For FREE email updates, subscribe to the Digital Art and Design Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2018 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.


g features
Adobe Portfolio First Look by Justin Seeley

Social Media Graphic Templates


Archives | Site Map


Past Issues

Note: BellaOnline uses cookies to help provide a consistent user experience. Our advertisers may use cookies to help customize ads. Please contact us with any question about our cookie use.

Summertime Foods
Corn on the Cob
Burgers on the Grill
Apple Pie


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2018 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor