logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Crochet
Marriage
Cooking for Kids
Knitting
Women's Fashion
Small Office/Home Office
History


dailyclick
All times in EST

Full Schedule
g
g Digital Art and Design Site

BellaOnline's Digital Art and Design Editor

g

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 Del.icio.us 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


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2015 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


g features
Wix Website from Scratch - Contact Form Settings

Wix Website from Scratch - Contact Strip

Wix Website from Scratch - Services Strip

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


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


BellaOnline Editor