Custom Styling in the Navigation Menu
The navigation menu sits just to the left of all other content on Scalar pages. It contains, among other items, the Home Link, Main Menu and search bar. It's spatial boundaries on Scalar pages are represented by the highlighted area in the image to the left.
Text in the Navigation Menu
Font Style
CSS accepts two different values for font styles, or more specifically, for the font-family property: actual font family-names (e.g. "Times New Roman" or “Arial”) and generic font families (e.g. "serif", "sans-serif", "or "monospace"). In most cases, one should list several font families (separated by commas) in the font-family property. This way if a browser does not support the first font listed, it can move on to the next (read more about websafe fonts here). To change the font style of text in the navigation menu one needs to begin by declaring the selector (#scalarnav), the property they wish to modify (font-family) and then the font they wish to use (with possible “fallback” fonts in case their primary font is unsupported by a browser). Thus, to change text style in the navigation menu to “Georgia” with a fallback of a generic “serif” one would insert:
Learn more about the font-family property here.
Font Size
To change the font size of text in the navigation menu one needs to designate the selector (#scalarnav), select the font-size property (font-size) and set the value for the font size in pixels (font pixel size referes to the font height, specifically from the top of ascenders like 'P' or 'T' to the bottom of descenders like 'g' or 'y'). Thus, to change the font size of text in the navigation menu to 16 pixels, one would insert:
Learn more about the font-size property here.
To change the font size for the text of the Home Link at the top of the navigation menu one needs to designate the selector for the home link (.icon_link.home), select the font-size property (font-size) and set the value for the font size in pixels (font pixel
size refers to the font height, specifically from the top of ascenders like 'P' or 'T' to the bottom of descenders like 'g' or 'y'). Thus, to change the font size for the text of the Home Link to 14 pixels, one would insert:
Text in the Navigation Menu
Font Style
CSS accepts two different values for font styles, or more specifically, for the font-family property: actual font family-names (e.g. "Times New Roman" or “Arial”) and generic font families (e.g. "serif", "sans-serif", "or "monospace"). In most cases, one should list several font families (separated by commas) in the font-family property. This way if a browser does not support the first font listed, it can move on to the next (read more about websafe fonts here). To change the font style of text in the navigation menu one needs to begin by declaring the selector (#scalarnav), the property they wish to modify (font-family) and then the font they wish to use (with possible “fallback” fonts in case their primary font is unsupported by a browser). Thus, to change text style in the navigation menu to “Georgia” with a fallback of a generic “serif” one would insert:
#scalarnav {font-family: Georgia,Serif;}
Learn more about the font-family property here.
Font Size
To change the font size of text in the navigation menu one needs to designate the selector (#scalarnav), select the font-size property (font-size) and set the value for the font size in pixels (font pixel size referes to the font height, specifically from the top of ascenders like 'P' or 'T' to the bottom of descenders like 'g' or 'y'). Thus, to change the font size of text in the navigation menu to 16 pixels, one would insert:
#scalarnav {font-size: 16px;}
Home Link in Navigation Menu
To change the font size for the text of the Home Link at the top of the navigation menu one needs to designate the selector for the home link (.icon_link.home), select the font-size property (font-size) and set the value for the font size in pixels (font pixel
size refers to the font height, specifically from the top of ascenders like 'P' or 'T' to the bottom of descenders like 'g' or 'y'). Thus, to change the font size for the text of the Home Link to 14 pixels, one would insert:
.icon_link.home {font-size: 14px;}
CSS accepts a number of color values: hexadecimal colors (e.g. #F1F1F1), RGB colors (e.g. 255,255,255) and predefined color names (e.g. red). To change the background color of the middle section of the navigation menu one needs to begin by declaring the selector for that section #scalarnav .body), the property they wish to modify (background-color) and then decide how they want to define the color of their choice. To change the background color of this section to red using a predefined color name one would insert:
To change the background color of the bottom and top sections of the navigation menu one needs to begin by declaring the selector for those sections (#scalarnav), the property they wish to modify (background-color) and then decide how they want to define the color of their choice. To change the background color of these sections to red using a predefined color name one would insert:
Background Color for Navigation Menu
CSS accepts a number of color values: hexadecimal colors (e.g. #F1F1F1), RGB colors (e.g. 255,255,255) and predefined color names (e.g. red). To change the background color of the middle section of the navigation menu one needs to begin by declaring the selector for that section #scalarnav .body), the property they wish to modify (background-color) and then decide how they want to define the color of their choice. To change the background color of this section to red using a predefined color name one would insert:
#scalarnav .body {background-color:red;}
To change the background color of the bottom and top sections of the navigation menu one needs to begin by declaring the selector for those sections (#scalarnav), the property they wish to modify (background-color) and then decide how they want to define the color of their choice. To change the background color of these sections to red using a predefined color name one would insert:
#scalarnav {background-color:red;}
| Previous page on path | Custom Styling, page 6 of 10 | Next page on path |
Discussion of "Custom Styling in the Navigation Menu"
Add your voice to this discussion.
Checking your signed in status ...