> For the complete documentation index, see [llms.txt](https://docs.stylemixthemes.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.stylemixthemes.com/motors-theme-documentation/~/changes/70wBWN8w43jv4AA52cti/theme-options/top-bar.md). # Top Bar Configure every item of the **Top Bar** of your website on the **Top Bar tab** in the Theme Options panel. ![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MXgH66odzuFHleCQD1O%2F-MXgMOFqJkxYGc5rQny7%2Fimage.png?alt=media\&token=5b2267e3-b6de-4d12-b1b6-9a99c9db06da) The settings for the Top Bar include several sections, such as **Main Settings**, **Address**, **Working Hours**, **Phone Number**, **Menu,** and **Socials**. Let's walk through each of them. {% hint style="info" %} The **Top Bar style does not depend** on the layout or the header style. {% endhint %} ## **Main** Set the main settings of **Top Bar** using the following options: ![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MW91jUTbWUTDojNF25D%2F-MW9KmNlc-N76-0D1idR%2Fimage.png?alt=media\&token=d5a4a0db-2556-4e14-a169-602cea754718) ### Enable Top Bar First, turn on the **Enable Top Bar** option to display the Top Bar on your website. ![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MW91jUTbWUTDojNF25D%2F-MW9D5i04cr1OFWuSMJ7%2Fimage.png?alt=media\&token=76313eaf-c3ad-4f46-84f0-d6e1bc86cc17) ### Color Settings Indicate the **Top Bar background color** on the **Background Color** field. ![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MW91jUTbWUTDojNF25D%2F-MW9DzUO8mfv33lwePzd%2Fimage.png?alt=media\&token=f9f80e55-7604-476e-9c68-44110ed58c04) On the **Text Color** section, you can change the color of the text on Top Bar: ![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MXjmIjl-EfK1SwCVdn3%2F-MXjvVDmwnne58Zu5PC4%2Fimage.png?alt=media\&token=9b70a9bd-d13c-4dcf-b0b6-754d1bf2a6d5) ![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MXjmIjl-EfK1SwCVdn3%2F-MXju2dFvf5Kd3XnWxU7%2Fimage.png?alt=media\&token=54ab1eba-f515-44f2-9ce7-35287d389c3f) Set the Top Bars' icons color on the **Icon Color** field: ![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MXjmIjl-EfK1SwCVdn3%2F-MXjvNvbGfoqSWtonh3x%2Fimage.png?alt=media\&token=29a4a677-0f75-4353-bf8b-25ea921ea963) ![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MXjmIjl-EfK1SwCVdn3%2F-MXjs_U8rAhmGcu9LExs%2Fimage.png?alt=media\&token=2275fac6-5e8b-4d39-84bc-49d792663d87) \ Indicate the Top Bars' links color on the **Link Color** field: ![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MXjmIjl-EfK1SwCVdn3%2F-MXjvEPXXj-47Nn0j85o%2Fimage.png?alt=media\&token=0b811674-6005-4e6c-bd91-ad99614e235b) ![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MXjmIjl-EfK1SwCVdn3%2F-MXjuT2Dd2tExDk6-PdN%2Fimage.png?alt=media\&token=2dad25fe-20f2-4407-824d-33a4878b1d9f) ### **Login/Register** Also, you can enable the **Login/Register** option and display the **Login and Register** links on the Top Bar: ![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MW91jUTbWUTDojNF25D%2F-MW9UmP0h5gdnqlixad7%2Fimage.png?alt=media\&token=5d728d84-eb84-46ca-88fa-8753a993c74f) ![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MW91jUTbWUTDojNF25D%2F-MW9VPZCn0sxaZUauMRg%2Fimage.png?alt=media\&token=ce69a05f-1ba4-4a62-a859-5c0995b0a9a1) {% hint style="danger" %} **Please Note:** For the Dealership layouts (**Dealership One** and **Two**, **Aircraft**, **Boats**, **Equipment**, **Motorcycle dealer**), the login feature will allow the user to **log in to the WooCommerce account only**. {% endhint %} ### Language Switcher ![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MW91jUTbWUTDojNF25D%2F-MW9WPR6q86G_rHypsxW%2Fimage.png?alt=media\&token=766f6698-db1d-4b1c-a2c3-55837d605cc9) If you decide to build a multilingual website, enable the **Language Switcher option**, so the users can easily switch between languages. ![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MXjvYDn4LMXieyBrP6w%2F-MXjxXC8DzC8N94tnQXG%2Fimage.png?alt=media\&token=f52e0660-142c-41e3-ada1-1eefbff61df2) {% hint style="warning" %} **Note:** The Language Switcher option will work only if the WPML Multilingual Plugin is installed. The [WPML](https://wpml.org/) plugin is not included in the theme package due to licensing restrictions. {% endhint %} ### Show Currency Switcher ![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MW91jUTbWUTDojNF25D%2F-MW9XaGpgUxjfj2W9B6j%2Fimage.png?alt=media\&token=305e577c-b4df-411e-82ad-61c0b9e86a84) Also, the theme allows publishing listings in several currencies on the website. ![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MW91jUTbWUTDojNF25D%2F-MW9ZzeKamEKmiFSJ5D9%2Fimage.png?alt=media\&token=d3dffecb-226c-4cc8-90df-efd714321a70) {% hint style="info" %} To add the currencies go to **Inventory Settings > Price > Multiple Currencies** section in the Theme Options panel. {% endhint %} ## **Address** In the **Address section**, you can edit the address details on the top bar. ![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MWTD314amOAL5BrZ9R8%2F-MWTK7TP-wEJCUoiQaee%2Fimage.png?alt=media\&token=abc7e34b-5e5f-4d6f-9fbd-7c68fbca1963) You can choose the **Address Icon** from the available icons' range on the **Icon Picker** field and set **icons' color** and **size** on appropriate fields. ![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MWTD314amOAL5BrZ9R8%2F-MWTMjDbCI6kLYT6jQcw%2Fimage.png?alt=media\&token=1ece480b-c302-4ae6-abb6-06f34ca5f16f) Insert the address line in the **Address** field: ![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MXV_-5V4du5zAZE7ykO%2F-MXVdcVzVIaCGs7r2RQE%2Fimage.png?alt=media\&token=7095bf82-1787-49c0-887d-493c2e8caf2e) ![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MWTD314amOAL5BrZ9R8%2F-MWTNidEfHQ6QNzkDCV6%2Fimage.png?alt=media\&token=23defecb-b4da-40e7-b5ed-645b8dcb867b) Also, you can show this address on the map by inserting the map embed link under the **Google Map Address URL** section: ![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MXV_-5V4du5zAZE7ykO%2F-MXVi_MCPoeDpa__h7Po%2Fimage.png?alt=media\&token=aab2357b-9ba2-422f-ad8c-e62691bc0267) ![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MXV_-5V4du5zAZE7ykO%2F-MXVkgqgCyNlDbziXNxI%2Fchrome-capture%20\(8\).gif?alt=media\&token=0ce595e2-63ba-46c3-8d0b-7aa559509ec5) To get the **embed map code**, open your needed address on Google Maps, click the **Share button and open the** Embed a map section. Use the link inside the SRC attribute: ![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MXgN9gg5phVuwMJWOM8%2F-MXgOgAXwSlmC-kUXs6g%2Fchrome-capture%20\(7\).gif?alt=media\&token=a0d22a37-2a29-4d09-99e9-5ee8e429ff8e) Decide whether you want to display the address in the mobile view of the website in the **Show Address on Mobile** section ![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MXVmjA7EsfgGPYDqrJV%2F-MXWA6OLb30Is25w2q-D%2Fimage.png?alt=media\&token=b4bcee5a-8458-4db7-8a4d-f35e73be7f3f) ## **Working Hours** In the Working Hours section, you can edit the details of your working schedule on the top bar: ![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MXVmjA7EsfgGPYDqrJV%2F-MXWBxWwpI4CptQpPdHI%2Fimage.png?alt=media\&token=8e620f1d-1d27-4bfd-8ae1-f04bc2b12917) Select a different **icon**, apply the **colo**r, and set the **size** of the icon in the **Working Hours Icon** section. Then enter the text to display in the **Working Hours** field. ![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MXjhCBfmLA46gFVtcDR%2F-MXjlqX0mnjGjGfNsaU7%2Fimage.png?alt=media\&token=58fdcf49-3edb-4e31-8ad6-3afde295f4c6) Decide whether you want to display the **Working Hours** in the mobile view of the website in the **Show Working Hours on Mobile** section ![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MXVmjA7EsfgGPYDqrJV%2F-MXWFHL7lvmCiEP1PzGh%2Fimage.png?alt=media\&token=4a3b4f90-8339-4484-a6fd-440f53f5fa0e) ## **Phone Number** In the **Phone number** section, you can edit the details of your contacts on the top bar ![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MXWGVIyTEk-bzIpCm9c%2F-MXWGlbgY2WhOSnmjv3W%2Fimage.png?alt=media\&token=8d7bd796-371d-44f6-86bf-ccbb6db901d7) Apply the color and set the size of the icon in the **Phone Number Icon** section. Also, enter the text to display in the **Phone number** field. ![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MXjhCBfmLA46gFVtcDR%2F-MXjmFqHE1BUSBt62gUK%2Fimage.png?alt=media\&token=417669c4-987b-4cc0-9de1-da6eb8246652) Decide whether you want to display the Phone number in the mobile view of the website in the **Show Phone Numbers on Mobile** section. ## **Menu** In this section, you can decide if you want to display the menu on the top bar of the website. ![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MXWJJfq7Iorx8JqcsMl%2F-MXWJcUsdCVUpEGQ8d5M%2Fimage.png?alt=media\&token=6c5b9d17-b1f5-46bf-a160-190aec6e5fad) In the Menu section, you can also change the **Font size**, the **Text color,** and the **Hover Text Color** of the top bar menu. ![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MXWLDLWQqRO2JGM9FF4%2F-MXWN9ea2SbL9sK16_WB%2Fimage.png?alt=media\&token=0d51664d-139a-4044-b574-03e03e6104f0) Create the Menu under the **Appearance > Menus** section and set it as Top Bar Menu on the Menu Settings section: ![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MXWLDLWQqRO2JGM9FF4%2F-MXWOPPqHZKHWK_UEPxu%2Fimage.png?alt=media\&token=b56f592f-4972-47ec-bb37-ed094d15b40b) ## **Socials** In the Socials section, you can select which social media links you prefer to display on your top bar: ![](https://2954064479-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDP3ivYPbpYO9Rs_wuB%2F-MXWOXFrW50-a-8aM-32%2F-MXWPIaZOefm1INT_32W%2Fimage.png?alt=media\&token=af8fe333-d6ff-4ee1-aeae-13621c1329a7) {% hint style="warning" %} The social networks buttons will be displayed only if the links to these social networks are provided in the Socials tab ([**Theme Options > Socials**](/motors-theme-documentation/~/changes/70wBWN8w43jv4AA52cti/theme-options/socials.md)) {% endhint %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.stylemixthemes.com/motors-theme-documentation/~/changes/70wBWN8w43jv4AA52cti/theme-options/top-bar.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.