The ePortfolio's navigation bar is where the ePortfolio's Sections are located. You can change the CSS code so the navigation bar appears as a list of buttons with colors and different properties.
For example, below is Michael Matza's header and navigation bar. He created a centered navigation bar with 3D buttons with a gray shadow underneath the text. If you hover over any of his sections, you will notice that a a black border appears wrapped around that text. This notifies the viewers which section they are hovering over. If you click one of the sections, you will notice that the black rectangle will be wrapped around the section you clicked on. This makes the viewers aware of which section they are currently visiting.
We're not suggesting you exactly copy his buttons/fonts/borders, we're just giving you an idea of where you can go with your ePortfolio design.
Center your Navigation Bar
In the box titled Custom CSS, paste the following bolded blue code within the
.navigation_topnav { } brackets
.navigation_topnav {
text-align: center;
________________________________________________________________
Create a Button Box Shadow
In the box titled Custom CSS, paste the following bolded blue code underneath the
.navigation_topnav a { } section. You may adjust the number of px (pixels) of your box shadow to make the shadow bigger/wider.
.navigation_topnav a {
________________________________________________________________
Create a Button Border
In the box titled Custom CSS, paste the following bolded blue code underneath the
.navigation_topnav a { } section. You may adjust the number of px for border and padding to make your buttons thicker.
.navigation_topnav a {
Next to border, you will notice the text Outset. According to Stackoverflow.com, an Outset border "makes the box look as though it were coming out of the canvas."
Outset Examples:
The opposite of outset is "inset", which Stackoverflow.com explains as "the border makes the box look as though it were embedded in the canvas."
Inset Examples:
Padding according to Stackoverflow.com is "the space between the content and the border".
Padding is illustrated in the below image, courtesy of Stackoverflow.com
________________________________________________________________
Change the Button Font
To change the button font, paste the following bolded blue code underneath the .navigation_topnav a {} section.
.navigation_topnav a {
text-align:center;
box-shadow: 12px 12px 7px #inserthtmlcolorcodeofyourchoice;
border: 2px outset #inserthtmlcolorcodeofyourchoice;
padding: 2px;
color:#222222;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
You may search what different Font-families look like on the link provided below:
http://www.w3schools.com/cssref/css_websafe_fonts.asp
________________________________________________________________
Hovering Over Buttons
In the box titled Custom CSS, paste the following code underneath the
.navigation_topnav a { } section.
.navigation_topnav a {
There is a lot of trial and error with creating buttons and using colors that work. Try it out until you find a color scheme that works for your ePortfolio.
Once you are done editing your Custom CSS, scroll down to the bottom left of the page and click save. You should now see a centered, colored navigation bar.