{"id":23871,"date":"2024-02-15T14:53:34","date_gmt":"2024-02-15T22:53:34","guid":{"rendered":"https:\/\/docs.extraview.com\/v25\/book\/navigation-buttons-styles-1\/"},"modified":"2024-02-15T14:53:34","modified_gmt":"2024-02-15T22:53:34","slug":"navigation-buttons-styles-1","status":"publish","type":"page","link":"https:\/\/docs.extraview.com\/v25\/navigation-buttons-styles-1\/","title":{"rendered":"Navigation Buttons with Styles"},"content":{"rendered":"

Using styles as your navigation bar buttons is enabled with the behavior setting NAV_BAR_DISPLAY set to a value of STYLE.<\/span><\/p>\n

There are a set of behavior settings that define the look of the navigation bar buttons.  However, it is possible within the Navigation Bar editor to pverride the style of any individual button with a different style, both for its “off” state, and its “on” state when the user places their mouse over the button.<\/span><\/p>\n

The settings that control the default navigation bar buttons are:<\/span><\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\n\t\t\t\tBehavior Setting<\/td>\n\n\t\t\t\tPurpose<\/td>\n<\/tr>\n
\n\t\t\t\tNAV_BAR_DISPLAY<\/td>\n\n\t\t\t\tThis must have a value of STYLE to enable the entire feature<\/td>\n<\/tr>\n
\n\t\t\t\tNAV_BAR_ICON_POSITION <\/td>\n\n\t\t\t\tThis setting places the icon to the TOP or LEFT of the title<\/td>\n<\/tr>\n
\n\t\t\t\tNAV_BAR_FONT <\/td>\n\n\t\t\t\tThis selects the default font to use to display the title on the navigation bar buttons<\/td>\n<\/tr>\n
\n\t\t\t\tNAV_BAR_FONT_SIZE <\/td>\n\n\t\t\t\tThis selects the default size of the font used to display the buttons.  This can be an integer number, or can be followed by pt<\/strong> or px<\/strong> to set points or pizels as the dimension.  If pt<\/strong> or px<\/strong> is not entered, points are assumed<\/td>\n<\/tr>\n
\n\t\t\t\tNAV_BAR_TEXT_COLOR<\/td>\n\n\t\t\t\tThis is the hexadecimal color value, or a valid HTML color for the text and icon on the navigation bar buttons<\/td>\n<\/tr>\n
\n\t\t\t\tNAV_BAR_BG_COLOR<\/td>\n\n\t\t\t\tThis is the hexadecimal color value, or a valid HTML color for the background color to the navigation bar buttons<\/td>\n<\/tr>\n
\n\t\t\t\tNAV_BAR_BG_STYLE<\/td>\n\n\t\t\t\tThis setting is an optional CSS style that is applied to the background of the entire navigation bar.  When not provided, the NAV_BAR_BG_COLOR is applied to the background of the navigation bar<\/td>\n<\/tr>\n
\n\t\t\t\tNAV_BAR_TEXT_HOVER_STYLE <\/td>\n\n\t\t\t\tThis is an optional CSS style used for the text and icon on the navigation bar buttons.  This is entered as a valid CSS expression.  Multiple CSS styles can be set by using a semi-colon between each style<\/td>\n<\/tr>\n
\n\t\t\t\tNAV_BAR_HOVER_COLOR<\/td>\n\n\t\t\t\tThis is the hexadecimal color value, or a valid HTML color for the background color to the navigation bar buttons when the user places their mouse over the buttons<\/td>\n<\/tr>\n
\n\t\t\t\tNAV_BAR_BUTTON_STYLE<\/td>\n\n\t\t\t\tThis is an optional style, used to apply a rectangular box behind the text and icon, giving the appearance of a traditional on-screen button<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Note that NAV_BAR_TEXT_HOVER_STYLE is expressed as a CSS value rather than a simple color value.  This allows for more interesting and complex effects when the user mouses over the buttons, and multiple effects can be chained together using a semi-colon.<\/p>\n

The background color of the entire navigation bar area ouside of the navigation buttons takes the color of the setting NAV_BAR_BG_COLOR.<\/p>\n

\n\tTips<\/h3>\n
    \n
  • \n\t\tUse the administrative utility to set a complete theme, without needing to alter the behavior settings<\/li>\n
  • \n\t\tThe following settings are global – i.e.they are the basis for all navigation bars that are defined within your installation<\/li>\n
  • \n\t\tMost settings can be overridden within any custom navigation bar you define, allowing individual buttons or entire custom menus to adopt different styles<\/li>\n
  • \n\t\tThe settings that are only available globally are NAV_BAR_DISPLAY and NAV_BAR_ICON_POSITION<\/li>\n
  • \n\t\tOnce you have set a theme with the administrative utility, you can tailor it with any of the settings, for example altering the colors or the overall size of the navigation bar buttons.<\/li>\n<\/ul>\n

    \n\tExamples<\/h3>\n\n\n\n\n\n\n\n\n\n\n
    \n\t\t\t\t“Off” state<\/td>\n\n\t\t\t\t“On” State<\/td>\n\n\t\t\t\tSetting<\/td>\n\n\t\t\t\tValue<\/td>\n<\/tr>\n
    \n\t\t\t\t\"\"<\/td>\n\n\t\t\t\t\"\"<\/td>\n\n

    NAV_BAR_ICON_POSITION<\/p>\n

    NAV_BAR_FONT<\/p>\n

    NAV_BAR_FONT_SIZE<\/p>\n

    NAV_BAR_TEXT_COLOR<\/p>\n

    NAV_BAR_BG_COLOR<\/p>\n

    NAV_BAR_BG_STYLE<\/p>\n

    NAV_BAR_TEXT_HOVER_STYLE<\/p>\n

    NAV_BAR_HOVER_COLOR<\/p>\n

    NAV_BAR_BUTTON_STYLE<\/p>\n<\/td>\n

    		\n

    TOP<\/p>\n

    Franklin Gothic, Arial<\/p>\n

    14<\/p>\n

    #015597<\/p>\n

    #f5f5f5<\/p>\n

     <\/p>\n

    color:#9bb7d4<\/p>\n

    #dedede<\/p>\n

     <\/p>\n<\/td>\n<\/tr>\n

    \n\t\t\t\t\"\"<\/td>\n\n\t\t\t\t\"\"<\/td>\n\n

    NAV_BAR_ICON_POSITION<\/p>\n

    NAV_BAR_FONT<\/p>\n

    NAV_BAR_FONT_SIZE<\/p>\n

    NAV_BAR_TEXT_COLOR<\/p>\n

    NAV_BAR_BG_COLOR<\/p>\n

    NAV_BAR_BG_STYLE<\/p>\n

    NAV_BAR_TEXT_HOVER_STYLE<\/p>\n

    NAV_BAR_HOVER_COLOR<\/p>\n

    NAV_BAR_BUTTON_STYLE<\/p>\n<\/td>\n

    		\n

    LEFT<\/p>\n

    Arial<\/p>\n

    16<\/p>\n

    #0075c9<\/p>\n

    #fff<\/p>\n

     <\/p>\n

    color: #0000cc<\/p>\n

    #fff<\/p>\n

     <\/p>\n<\/td>\n<\/tr>\n

    \n\t\t\t\t\"\"<\/td>\n\n\t\t\t\t\"\"<\/td>\n\n

    NAV_BAR_ICON_POSITION<\/p>\n

    NAV_BAR_FONT<\/p>\n

    NAV_BAR_FONT_SIZE<\/p>\n

    NAV_BAR_TEXT_COLOR<\/p>\n

    NAV_BAR_BG_COLOR<\/p>\n

    NAV_BAR_BG_STYLE<\/p>\n

    NAV_BAR_TEXT_HOVER_STYLE<\/p>\n

    NAV_BAR_HOVER_COLOR<\/p>\n

    NAV_BAR_BUTTON_STYLE<\/p>\n<\/td>\n

    		\n

    TOP<\/p>\n

    Verdana<\/p>\n

    16<\/p>\n

    #779e91<\/p>\n

    #4e7f71<\/p>\n

     <\/p>\n

    color: #ddd<\/p>\n

    transparent<\/p>\n

     <\/p>\n<\/td>\n<\/tr>\n

    \n\t\t\t\t\"\"<\/td>\n\n\t\t\t\t\"\"<\/td>\n\n

    NAV_BAR_ICON_POSITION<\/p>\n

    NAV_BAR_FONT<\/p>\n

    NAV_BAR_FONT_SIZE<\/p>\n

    NAV_BAR_TEXT_COLOR<\/p>\n

    NAV_BAR_BG_COLOR<\/p>\n

    NAV_BAR_BG_STYLE<\/p>\n

    NAV_BAR_TEXT_HOVER_STYLE<\/p>\n

    NAV_BAR_HOVER_COLOR<\/p>\n

    NAV_BAR_BUTTON_STYLE<\/p>\n<\/td>\n

    		\n

    LEFT<\/p>\n

    Algerian<\/p>\n

    16<\/p>\n

    #f29e3b<\/p>\n

    #fff<\/p>\n

     <\/p>\n

    border-bottom:4px red solid<\/p>\n

    #fff<\/p>\n

     <\/p>\n<\/td>\n<\/tr>\n

    \n\t\t\t\t\"\"<\/td>\n\n\t\t\t\t\"\"<\/td>\n\n

    NAV_BAR_ICON_POSITION<\/p>\n

    NAV_BAR_FONT<\/p>\n

    NAV_BAR_FONT_SIZE<\/p>\n

    NAV_BAR_TEXT_COLOR<\/p>\n

    NAV_BAR_BG_COLOR<\/p>\n

    NAV_BAR_BG_STYLE<\/p>\n

    NAV_BAR_TEXT_HOVER_STYLE<\/p>\n

    NAV_BAR_HOVER_COLOR<\/p>\n

    NAV_BAR_BUTTON_STYLE<\/p>\n<\/td>\n

    		\n

    TOP<\/p>\n

    Verdana<\/p>\n

    16<\/p>\n

    #fff<\/p>\n

    #000<\/p>\n

     <\/p>\n

    color: #000<\/p>\n

    #aaa<\/p>\n

     <\/p>\n<\/td>\n<\/tr>\n

    \n\t\t\t\t\"\"<\/td>\n\n\t\t\t\t\"\"<\/td>\n\n

    NAV_BAR_ICON_POSITION<\/p>\n

    NAV_BAR_FONT<\/p>\n

    NAV_BAR_FONT_SIZE<\/p>\n

    NAV_BAR_TEXT_COLOR<\/p>\n

    NAV_BAR_BG_COLOR<\/p>\n

    NAV_BAR_BG_STYLE<\/p>\n

    NAV_BAR_TEXT_HOVER_STYLE<\/p>\n

    NAV_BAR_HOVER_COLOR<\/p>\n

    NAV_BAR_BUTTON_STYLE<\/p>\n<\/td>\n

    		\n

    LEFT<\/p>\n

    Verdana<\/p>\n

    12<\/p>\n

    #fff<\/p>\n

    #fff<\/p>\n

    color:#c1d3f3<\/p>\n

     <\/p>\n

    #fff<\/p>\n

    background-color: #015597; padding:5px 10px 5px 10px; border-radius: 6px; position: relative; top: 30px<\/p>\n<\/td>\n<\/tr>\n

    \n\t\t\t\t\"\"<\/td>\n\n\t\t\t\t\"\"<\/td>\n\n

    MENU_SIZE<\/p>\n

    NAV_BAR_ICON_POSITION<\/p>\n

    NAV_BAR_FONT<\/p>\n

    NAV_BAR_FONT_SIZE<\/p>\n

    NAV_BAR_TEXT_COLOR<\/p>\n

    NAV_BAR_BG_COLOR<\/p>\n

    NAV_BAR_BG_STYLE<\/p>\n

    NAV_BAR_TEXT_HOVER_STYLE<\/p>\n

    NAV_BAR_HOVER_COLOR<\/p>\n

    NAV_BAR_BUTTON_STYLE<\/p>\n<\/td>\n

    		\n

    100<\/p>\n

    LEFT<\/p>\n

    Verdana, Arial<\/p>\n

    12<\/p>\n

    #fff<\/p>\n

    #005599<\/p>\n

    border-top: 50px solid #fff<\/p>\n

    color:#c1d3f3<\/p>\n

     <\/p>\n

    \t\t\t\tbackground-color: #015597; padding:5px<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

     <\/p>\n","protected":false},"excerpt":{"rendered":"

    Using styles as your navigation bar buttons is enabled with the behavior setting NAV_BAR_DISPLAY set to a value of STYLE. There are a set of behavior settings that define the look of the navigation bar buttons.  However, it is possible within the Navigation Bar editor to pverride the style of any individual button with a…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_lmt_disableupdate":"","_lmt_disable":"","_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"class_list":["post-23871","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"\nNavigation Buttons with Styles - Product Documentation<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/docs.extraview.com\/v25\/navigation-buttons-styles-1\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Navigation Buttons with Styles - Product Documentation\" \/>\n<meta property=\"og:description\" content=\"Using styles as your navigation bar buttons is enabled with the behavior setting NAV_BAR_DISPLAY set to a value of STYLE. There are a set of behavior settings that define the look of the navigation bar buttons.  However, it is possible within the Navigation Bar editor to pverride the style of any individual button with a...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/docs.extraview.com\/v25\/navigation-buttons-styles-1\/\" \/>\n<meta property=\"og:site_name\" content=\"Product Documentation\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/docs.extraview.com\/v25\/navigation-buttons-styles-1\/\",\"url\":\"https:\/\/docs.extraview.com\/v25\/navigation-buttons-styles-1\/\",\"name\":\"Navigation Buttons with Styles - Product Documentation\",\"isPartOf\":{\"@id\":\"https:\/\/docs.extraview.com\/v25\/#website\"},\"datePublished\":\"2024-02-15T22:53:34+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/docs.extraview.com\/v25\/navigation-buttons-styles-1\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/docs.extraview.com\/v25\/navigation-buttons-styles-1\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/docs.extraview.com\/v25\/navigation-buttons-styles-1\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/docs.extraview.com\/v25\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Navigation Buttons with Styles\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/docs.extraview.com\/v25\/#website\",\"url\":\"https:\/\/docs.extraview.com\/v25\/\",\"name\":\"ExtraView Product Documentation\",\"description\":\"ExtraView Documentation\",\"publisher\":{\"@id\":\"https:\/\/docs.extraview.com\/v25\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/docs.extraview.com\/v25\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/docs.extraview.com\/v25\/#organization\",\"name\":\"ExtraView Corporation\",\"url\":\"https:\/\/docs.extraview.com\/v25\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/docs.extraview.com\/v25\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/docs-stg.extraview.com\/wp-content\/uploads\/2024\/03\/favicon.png\",\"contentUrl\":\"https:\/\/docs-stg.extraview.com\/wp-content\/uploads\/2024\/03\/favicon.png\",\"width\":512,\"height\":512,\"caption\":\"ExtraView Corporation\"},\"image\":{\"@id\":\"https:\/\/docs.extraview.com\/v25\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Navigation Buttons with Styles - Product Documentation","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/docs.extraview.com\/v25\/navigation-buttons-styles-1\/","og_locale":"en_US","og_type":"article","og_title":"Navigation Buttons with Styles - Product Documentation","og_description":"Using styles as your navigation bar buttons is enabled with the behavior setting NAV_BAR_DISPLAY set to a value of STYLE. There are a set of behavior settings that define the look of the navigation bar buttons.  However, it is possible within the Navigation Bar editor to pverride the style of any individual button with a...","og_url":"https:\/\/docs.extraview.com\/v25\/navigation-buttons-styles-1\/","og_site_name":"Product Documentation","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/docs.extraview.com\/v25\/navigation-buttons-styles-1\/","url":"https:\/\/docs.extraview.com\/v25\/navigation-buttons-styles-1\/","name":"Navigation Buttons with Styles - Product Documentation","isPartOf":{"@id":"https:\/\/docs.extraview.com\/v25\/#website"},"datePublished":"2024-02-15T22:53:34+00:00","breadcrumb":{"@id":"https:\/\/docs.extraview.com\/v25\/navigation-buttons-styles-1\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/docs.extraview.com\/v25\/navigation-buttons-styles-1\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/docs.extraview.com\/v25\/navigation-buttons-styles-1\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/docs.extraview.com\/v25\/"},{"@type":"ListItem","position":2,"name":"Navigation Buttons with Styles"}]},{"@type":"WebSite","@id":"https:\/\/docs.extraview.com\/v25\/#website","url":"https:\/\/docs.extraview.com\/v25\/","name":"ExtraView Product Documentation","description":"ExtraView Documentation","publisher":{"@id":"https:\/\/docs.extraview.com\/v25\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/docs.extraview.com\/v25\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/docs.extraview.com\/v25\/#organization","name":"ExtraView Corporation","url":"https:\/\/docs.extraview.com\/v25\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/docs.extraview.com\/v25\/#\/schema\/logo\/image\/","url":"https:\/\/docs-stg.extraview.com\/wp-content\/uploads\/2024\/03\/favicon.png","contentUrl":"https:\/\/docs-stg.extraview.com\/wp-content\/uploads\/2024\/03\/favicon.png","width":512,"height":512,"caption":"ExtraView Corporation"},"image":{"@id":"https:\/\/docs.extraview.com\/v25\/#\/schema\/logo\/image\/"}}]}},"taxonomy_info":[],"featured_image_src_large":false,"author_info":{"display_name":"carl.koppel","author_link":"https:\/\/docs.extraview.com\/v25\/author\/carl-koppel\/"},"comment_info":0,"_links":{"self":[{"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/pages\/23871","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/comments?post=23871"}],"version-history":[{"count":0,"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/pages\/23871\/revisions"}],"wp:attachment":[{"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/media?parent=23871"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}