In the last tutorial, we began setting the options for our Adobe Portfolio. Let's continue setting the Site-Wide options.

Moving down in the Floating Remote, Navigation should be toggled on by default. Click the link to open the panel. Wow! We have a lot of options for the navigation. Remember that these are global styles for the entire site. We can add a background image to our navigation, upload a logo image, add our social site profiles and style the titles/icons.

Site-Wide Options Continued

Navigation Container - Style

In the Navigation Container panel (see screenshot), we can set the Height of the navigation bar and the alignment of the contents within the bar. The sticky option is checked, so our navigation menu will remain at the top of the page as the page scrolls. Keep the defaults or make changes as you wish. For example, if your logo is taller than 70 pixels, you might want to increase the height of the nav bar.

Next we have the settings for the navigation bar's background color and drop shadow, for both the Normal state and the On Scroll state. By default, the drop shadow is turned on for the On Scroll state but not for the Normal state. If you wish to use the drop shadow for the Normal state, check this box.

Navigation Container - Width and Margins

In the Width tab, the default settings are as follows.

1. The Navigation (links to pages and external links) will span 30% of the width of the nav bar.
   
   
2. Your text and/or image logo will span 40%.
   
   
3. Your Social icons will span 30%.
   
   
4. The Top and Bottom padding are set to zero.
   
   We can change these percentages as needed. For example, if you have many social icons, you might want to increase the width for the Social icons to more than 30%. As you move any slider, you will see the percentages for the other sliders update.
   
   In the Margins panel, the Top and Bottom margins are set to zero and the Left and Right margins are set to 3%. You can change these as needed.
   
   

Navigation - Background Image

Moving down to the Background Image section (see screenshot), you can upload an image that will display as the background of the nav bar. As we did for the page background image, you can crop, scale and set the positioning for this image.

Navigation - Logo

In the Logo section (see screenshot), you can style the text for your site name, upload an image for your site logo and set the margins. You can also toggle the logo on/off. By default, the font is set to the site-wide font choice that we set in the previous tutorial. You might want to use a decorative font and change the color.

Navigation - Page Titles, Gallery Titles and Links

In this panel , you will style the text links and rollover effects for the links in the nav bar. You can also toggle each on/off. Again, the font is set to the site-wide font choice that we set in the previous tutorial. You might want to use a decorative font and change the color for these links.

Navigation - Social Profiles and Icons

In the last two panels, we can set the urls for our social sites and style the social icons in the nav bar.

1. For each social site, toggle on the social profile and copy/paste the url for your social page in to the box.
   
   
2. For the social icons, you can set the style, alignment, margins and rollover effects.
   
   

Footer

The last tab in the Site-Wide panel is for the Footer controls (see screenshot). We can change the default copyright text and style the text and margins. As we did in the Navigation panel, we can add and style our social icons.

https://www.myportfolio.com/
https://www.myportfolio.com/editor/portfolio
https://www.myportfolio.com/switch-theme

Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.