{"id":72,"date":"2017-05-08T12:46:27","date_gmt":"2017-05-08T12:46:27","guid":{"rendered":"https:\/\/rockythemes.com\/documentation\/?p=72"},"modified":"2022-01-24T15:47:59","modified_gmt":"2022-01-24T15:47:59","slug":"customize-the-top-bar","status":"publish","type":"post","link":"https:\/\/rockythemes.com\/documentation\/customize-the-top-bar\/","title":{"rendered":"Customize the Top Bar"},"content":{"rendered":"

Using Creativo’s Theme Options interface, you can choose to display or hide the Top Bar area by going to Creativo Options -> Top Bar -> Enable Top Bar.<\/b><\/p>\n

\"\"<\/p>\n

If you don’t want to use a Top Bar, simply disable the Top Bar option by selecting Off<\/strong> under Enable Top Bar<\/strong>.<\/p>\n

If you only want to disable the Top Bar for your Posts, make sure to check the Disable Top Bar for posts<\/strong> checkbox – this will remove the Top Bar from all your posts.<\/p>\n

You can change what the Top Bar<\/b> shows on the Left and Right sections of it, by changing the Top Bar Left Content<\/b> and Top Bar Right Content<\/b> options. In the Blogger template, the Left Area will show a Menu while the Right Area will show the Social Icons.<\/p>\n

The Top Menu is created under Appearance -> Menus. The Social Icons are generated based on the info entered under Creativo Options -> Social Icons.<\/p>\n

You can also choose to display the Contact Info. The details of the Contact Info and appearances are generated based on the actual details entered under Top Bar -> Contact Info.<\/p>\n

Using the Force Social Icons to Top Bar – Left or Right <\/strong>allows you to force the use of Social Icons on the Left or Right area of the Top Bar – this option is useful if you want to have a Menu, Contact Info as well as showing your Social Media icons to the right or the left of the Top Bar.<\/p>\n

Use the Customization options to change the Background Color of your Top Bar, the Bottom Border<\/b> color of the Top Bar as well as the color of the Social Icons color and opacity<\/b>.<\/p>\n

Changing the Top Menu<\/h2>\n

By default the Left Side of the Top Bar for Blogger template, is set to display the Top Menu<\/strong>.<\/p>\n

The Top Menu can be created\/edited by going to Appearance -> Menus<\/strong>. You can create your own menu or tweak the existing Top Menu. The existing Top Menu is created with 4 of the existing Post Categories: Beauty, Adventure, Fashion and Travel.<\/p>\n

\"\"<\/p>\n

You can delete that menu and create your own. Remember that after creating your menu you must set it as Top Menu<\/strong> in the Display Location<\/strong>.<\/p>\n

Back on Creativo Options -> Top Bar -> Top Bar Menu<\/strong> you can change here the actual appearance of the Top Menu:<\/p>\n

    \n
  1. Top Menu Link Color<\/strong> – change the color of the Top Menu links<\/li>\n
  2. Top Menu Link Color on Hover<\/strong> – change the color of the Top Menu links on hover<\/li>\n
  3. Top Menu Separator<\/strong> – enable a separator between the Top Menu items<\/li>\n
  4. Top Menu Separator Color<\/strong> – select the color of the Top Menu Separator<\/li>\n
  5. Sub Menu Link Color, Sub Menu Link Color on Hover, Sub Menu Link Background Color, Sub Menu Link Background Color on Hover, Sub Menu Bottom Separator Color<\/strong> – use these options to customize the sub-menu items of the Top Menu, if you are using sub-menu items.<\/li>\n<\/ol>\n

    Changing the Social Icons<\/h2>\n

    By default the Right section of the Blogger Top Bar will show a selection of Social Icons<\/strong>. These Social Icons are created based on the actual links you define for each Social Media profile under: Creativo Options -> Social Media<\/p>\n

    \"\"<\/p>\n

    For each social profile that you want to use on your site, make sure you enter a link to the corresponding social network profile. Make sure you also include the http:\/\/<\/strong> or https:\/\/<\/strong> protocols.<\/p>\n

    For example, if you want to show the Facebook, LinkedIn, Twitter and YouTube social icons with direct links to your profiles, you will have to enter the correct links to your profile pages.<\/p>\n

      \n
    • Facebook: https:\/\/facebook.com\/rockythemes<\/li>\n
    • Twitter: https:\/\/twitter.com\/rockythemes<\/li>\n
    • LinkedIn: https:\/\/linkedin.com\/rockythemes<\/li>\n
    • Youtube: https:\/\/www.youtube.com\/channel\/UCDnRDIuV3JsWYwCUUN9N2vg<\/li>\n<\/ul>\n

      Changing the Contact Info<\/h2>\n

      If you choose to show the Contact Info in the Top Bar, the Left or the Right area, you can make use of the options we created to customize the actual Contact Info content and appearance.<\/p>\n

      Under Top Bar -> scroll down until you find the Contact Info options:<\/p>\n

      \"\"<\/p>\n

      Enter a contact email, phone number and address if you want them to appear in the Top Bar – at least one of these options is required.<\/p>\n

      The Tap to Call Button<\/strong> is useful for mobile devices, a small button will appear allow users to click on it and call the Phone Number entered in the options above. Use the Tap to Call text on button<\/strong> to customize the actual text used for the Tap to Call button.<\/p>\n

      Choose the colors you want for the Contact Info area and also the separator used inside the Contact Info area.<\/p>\n","protected":false},"excerpt":{"rendered":"

      Change the Top Bar section and appearance by using the Theme Options area and Menus.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[69],"tags":[24,22,23],"class_list":["post-72","post","type-post","status-publish","format-standard","hentry","category-theme-options","tag-social-icons","tag-top-bar","tag-top-bar-menu"],"yoast_head":"\nCustomize the Top Bar – Creativo 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:\/\/rockythemes.com\/documentation\/customize-the-top-bar\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Customize the Top Bar – Creativo Documentation\" \/>\n<meta property=\"og:description\" content=\"Change the Top Bar section and appearance by using the Theme Options area and Menus.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rockythemes.com\/documentation\/customize-the-top-bar\/\" \/>\n<meta property=\"og:site_name\" content=\"Creativo Documentation\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/facebook.com\/rockythemes\" \/>\n<meta property=\"article:published_time\" content=\"2017-05-08T12:46:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-01-24T15:47:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2017\/05\/top-bar-image.png\" \/>\n<meta name=\"author\" content=\"rockystef\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@rockythemes\" \/>\n<meta name=\"twitter:site\" content=\"@rockythemes\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"rockystef\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/customize-the-top-bar\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/customize-the-top-bar\\\/\"},\"author\":{\"name\":\"rockystef\",\"@id\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/#\\\/schema\\\/person\\\/2834fc1584d086bb31b3a7ff0230858a\"},\"headline\":\"Customize the Top Bar\",\"datePublished\":\"2017-05-08T12:46:27+00:00\",\"dateModified\":\"2022-01-24T15:47:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/customize-the-top-bar\\\/\"},\"wordCount\":810,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/customize-the-top-bar\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2017\\\/05\\\/top-bar-image.png\",\"keywords\":[\"social icons\",\"top bar\",\"top bar menu\"],\"articleSection\":[\"Theme Options\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/customize-the-top-bar\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/customize-the-top-bar\\\/\",\"url\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/customize-the-top-bar\\\/\",\"name\":\"Customize the Top Bar – Creativo Documentation\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/customize-the-top-bar\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/customize-the-top-bar\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2017\\\/05\\\/top-bar-image.png\",\"datePublished\":\"2017-05-08T12:46:27+00:00\",\"dateModified\":\"2022-01-24T15:47:59+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/customize-the-top-bar\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/customize-the-top-bar\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/customize-the-top-bar\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2017\\\/05\\\/top-bar-image.png\",\"contentUrl\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2017\\\/05\\\/top-bar-image.png\",\"width\":789,\"height\":833},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/customize-the-top-bar\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Customize the Top Bar\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/#website\",\"url\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/\",\"name\":\"Creativo Documentation\",\"description\":\"Documentation, Tutorials, Tips and Tricks for the Creativo Theme\",\"publisher\":{\"@id\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/#organization\",\"name\":\"RockyThemes\",\"url\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2017\\\/05\\\/creativo-green.png\",\"contentUrl\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/wp-content\\\/uploads\\\/2017\\\/05\\\/creativo-green.png\",\"width\":228,\"height\":50,\"caption\":\"RockyThemes\"},\"image\":{\"@id\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/facebook.com\\\/rockythemes\",\"https:\\\/\\\/x.com\\\/rockythemes\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rockythemes.com\\\/documentation\\\/#\\\/schema\\\/person\\\/2834fc1584d086bb31b3a7ff0230858a\",\"name\":\"rockystef\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c8fbbaba854532139a19c852a047aa110992e0051d6e521ec532e7871d245e89?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c8fbbaba854532139a19c852a047aa110992e0051d6e521ec532e7871d245e89?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c8fbbaba854532139a19c852a047aa110992e0051d6e521ec532e7871d245e89?s=96&d=mm&r=g\",\"caption\":\"rockystef\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Customize the Top Bar – Creativo 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:\/\/rockythemes.com\/documentation\/customize-the-top-bar\/","og_locale":"en_US","og_type":"article","og_title":"Customize the Top Bar – Creativo Documentation","og_description":"Change the Top Bar section and appearance by using the Theme Options area and Menus.","og_url":"https:\/\/rockythemes.com\/documentation\/customize-the-top-bar\/","og_site_name":"Creativo Documentation","article_publisher":"https:\/\/facebook.com\/rockythemes","article_published_time":"2017-05-08T12:46:27+00:00","article_modified_time":"2022-01-24T15:47:59+00:00","og_image":[{"url":"https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2017\/05\/top-bar-image.png","type":"","width":"","height":""}],"author":"rockystef","twitter_card":"summary_large_image","twitter_creator":"@rockythemes","twitter_site":"@rockythemes","twitter_misc":{"Written by":"rockystef","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rockythemes.com\/documentation\/customize-the-top-bar\/#article","isPartOf":{"@id":"https:\/\/rockythemes.com\/documentation\/customize-the-top-bar\/"},"author":{"name":"rockystef","@id":"https:\/\/rockythemes.com\/documentation\/#\/schema\/person\/2834fc1584d086bb31b3a7ff0230858a"},"headline":"Customize the Top Bar","datePublished":"2017-05-08T12:46:27+00:00","dateModified":"2022-01-24T15:47:59+00:00","mainEntityOfPage":{"@id":"https:\/\/rockythemes.com\/documentation\/customize-the-top-bar\/"},"wordCount":810,"commentCount":0,"publisher":{"@id":"https:\/\/rockythemes.com\/documentation\/#organization"},"image":{"@id":"https:\/\/rockythemes.com\/documentation\/customize-the-top-bar\/#primaryimage"},"thumbnailUrl":"https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2017\/05\/top-bar-image.png","keywords":["social icons","top bar","top bar menu"],"articleSection":["Theme Options"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/rockythemes.com\/documentation\/customize-the-top-bar\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/rockythemes.com\/documentation\/customize-the-top-bar\/","url":"https:\/\/rockythemes.com\/documentation\/customize-the-top-bar\/","name":"Customize the Top Bar – Creativo Documentation","isPartOf":{"@id":"https:\/\/rockythemes.com\/documentation\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rockythemes.com\/documentation\/customize-the-top-bar\/#primaryimage"},"image":{"@id":"https:\/\/rockythemes.com\/documentation\/customize-the-top-bar\/#primaryimage"},"thumbnailUrl":"https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2017\/05\/top-bar-image.png","datePublished":"2017-05-08T12:46:27+00:00","dateModified":"2022-01-24T15:47:59+00:00","breadcrumb":{"@id":"https:\/\/rockythemes.com\/documentation\/customize-the-top-bar\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rockythemes.com\/documentation\/customize-the-top-bar\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/rockythemes.com\/documentation\/customize-the-top-bar\/#primaryimage","url":"https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2017\/05\/top-bar-image.png","contentUrl":"https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2017\/05\/top-bar-image.png","width":789,"height":833},{"@type":"BreadcrumbList","@id":"https:\/\/rockythemes.com\/documentation\/customize-the-top-bar\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/rockythemes.com\/documentation\/"},{"@type":"ListItem","position":2,"name":"Customize the Top Bar"}]},{"@type":"WebSite","@id":"https:\/\/rockythemes.com\/documentation\/#website","url":"https:\/\/rockythemes.com\/documentation\/","name":"Creativo Documentation","description":"Documentation, Tutorials, Tips and Tricks for the Creativo Theme","publisher":{"@id":"https:\/\/rockythemes.com\/documentation\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rockythemes.com\/documentation\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/rockythemes.com\/documentation\/#organization","name":"RockyThemes","url":"https:\/\/rockythemes.com\/documentation\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/rockythemes.com\/documentation\/#\/schema\/logo\/image\/","url":"https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2017\/05\/creativo-green.png","contentUrl":"https:\/\/rockythemes.com\/documentation\/wp-content\/uploads\/2017\/05\/creativo-green.png","width":228,"height":50,"caption":"RockyThemes"},"image":{"@id":"https:\/\/rockythemes.com\/documentation\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/facebook.com\/rockythemes","https:\/\/x.com\/rockythemes"]},{"@type":"Person","@id":"https:\/\/rockythemes.com\/documentation\/#\/schema\/person\/2834fc1584d086bb31b3a7ff0230858a","name":"rockystef","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/c8fbbaba854532139a19c852a047aa110992e0051d6e521ec532e7871d245e89?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c8fbbaba854532139a19c852a047aa110992e0051d6e521ec532e7871d245e89?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c8fbbaba854532139a19c852a047aa110992e0051d6e521ec532e7871d245e89?s=96&d=mm&r=g","caption":"rockystef"}}]}},"_links":{"self":[{"href":"https:\/\/rockythemes.com\/documentation\/wp-json\/wp\/v2\/posts\/72","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rockythemes.com\/documentation\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rockythemes.com\/documentation\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rockythemes.com\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rockythemes.com\/documentation\/wp-json\/wp\/v2\/comments?post=72"}],"version-history":[{"count":9,"href":"https:\/\/rockythemes.com\/documentation\/wp-json\/wp\/v2\/posts\/72\/revisions"}],"predecessor-version":[{"id":503,"href":"https:\/\/rockythemes.com\/documentation\/wp-json\/wp\/v2\/posts\/72\/revisions\/503"}],"wp:attachment":[{"href":"https:\/\/rockythemes.com\/documentation\/wp-json\/wp\/v2\/media?parent=72"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rockythemes.com\/documentation\/wp-json\/wp\/v2\/categories?post=72"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rockythemes.com\/documentation\/wp-json\/wp\/v2\/tags?post=72"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}