
Currently, in your site we offer two types of predefined Top Bars:
- Simple:
[rebelmouse-proxy-image https://media.rbl.ms/image?u=%2Fmedia.forumbee.com%2Fi%2Fe2823666-2b31-449c-8b94-753a60b855c7%2F547.png&ho=https%3A%2F%2Fs3-us-west-2.amazonaws.com&s=666&h=04ffd3fb5ffa4f407396e7a953aea0b42683bbe9cfab0f9777467a08f688ccaf&size=980x&c=1624169397 crop_info="%7B%22image%22%3A%20%22https%3A//media.rbl.ms/image%3Fu%3D%252Fmedia.forumbee.com%252Fi%252Fe2823666-2b31-449c-8b94-753a60b855c7%252F547.png%26ho%3Dhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%26s%3D666%26h%3D04ffd3fb5ffa4f407396e7a953aea0b42683bbe9cfab0f9777467a08f688ccaf%26size%3D980x%26c%3D1624169397%22%7D" caption="" pin_description="" image-library="0" expand=1 photo_credit=""]
- Normal:
[rebelmouse-proxy-image https://media.rbl.ms/image?u=%2Fmedia.forumbee.com%2Fi%2Ffe9a6725-3303-406e-86ad-b15159d99018%2F547.png&ho=https%3A%2F%2Fs3-us-west-2.amazonaws.com&s=464&h=d560b6c3bb07d471e3a3119858108f940af45f7bd100ffa16772ae6588e2fbb5&size=980x&c=4137795704 crop_info="%7B%22image%22%3A%20%22https%3A//media.rbl.ms/image%3Fu%3D%252Fmedia.forumbee.com%252Fi%252Ffe9a6725-3303-406e-86ad-b15159d99018%252F547.png%26ho%3Dhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%26s%3D464%26h%3Dd560b6c3bb07d471e3a3119858108f940af45f7bd100ffa16772ae6588e2fbb5%26size%3D980x%26c%3D4137795704%22%7D" caption="" pin_description="" image-library="0" expand=1 photo_credit=""]
You can actually switch between those two versions by going to the Left Nav > Layout & Design tool:
[rebelmouse-proxy-image https://media.rbl.ms/image?u=%2Fmedia.forumbee.com%2Fi%2F45cde54f-7195-421f-9ccc-c451dd6e5c80%2F547.png&ho=https%3A%2F%2Fs3-us-west-2.amazonaws.com&s=583&h=06b8af72a5566ce3221c5f8b61745f91770b2f0b5dafa5e5d641775338974d81&size=980x&c=2561873100 crop_info="%7B%22image%22%3A%20%22https%3A//media.rbl.ms/image%3Fu%3D%252Fmedia.forumbee.com%252Fi%252F45cde54f-7195-421f-9ccc-c451dd6e5c80%252F547.png%26ho%3Dhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%26s%3D583%26h%3D06b8af72a5566ce3221c5f8b61745f91770b2f0b5dafa5e5d641775338974d81%26size%3D980x%26c%3D2561873100%22%7D" caption="" pin_description="" image-library="0" expand=1 photo_credit=""]
Choosing the Top Bar tab, and selecting the Nav Bar element.
[rebelmouse-proxy-image https://media.rbl.ms/image?u=%2Fmedia.forumbee.com%2Fi%2F2fc741c7-ee83-4d38-91ea-d0bd20adeb0a%2F547.png&ho=https%3A%2F%2Fs3-us-west-2.amazonaws.com&s=284&h=90b79c18fecb14883fe59385e33a89e610936c38ecb3c27db742726180cc7d83&size=980x&c=1682814783 crop_info="%7B%22image%22%3A%20%22https%3A//media.rbl.ms/image%3Fu%3D%252Fmedia.forumbee.com%252Fi%252F2fc741c7-ee83-4d38-91ea-d0bd20adeb0a%252F547.png%26ho%3Dhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%26s%3D284%26h%3D90b79c18fecb14883fe59385e33a89e610936c38ecb3c27db742726180cc7d83%26size%3D980x%26c%3D1682814783%22%7D" caption="" pin_description="" image-library="0" expand=1 photo_credit=""]
And switch between Top Bar formats as easily as with one click.
Don't forget to hit SAVE!
Creating a custom Top Bar:
If you want to get super creative with the design of your Top Bar, you can actually use Custom HTML to design it.
In the Top Bar tab in the Layout & Design tool, click the + button to add an element and choose 'Custom HTML':
[rebelmouse-proxy-image https://media.rbl.ms/image?u=%2Fmedia.forumbee.com%2Fi%2F82517d07-df30-41fd-a87e-d6a4ea4e5768%2F547.png&ho=https%3A%2F%2Fs3-us-west-2.amazonaws.com&s=959&h=4cfb1ccdfe1aae02b3eda292608368ca320ee6c6085719f028fa84d8538077c5&size=980x&c=735429303 crop_info="%7B%22image%22%3A%20%22https%3A//media.rbl.ms/image%3Fu%3D%252Fmedia.forumbee.com%252Fi%252F82517d07-df30-41fd-a87e-d6a4ea4e5768%252F547.png%26ho%3Dhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%26s%3D959%26h%3D4cfb1ccdfe1aae02b3eda292608368ca320ee6c6085719f028fa84d8538077c5%26size%3D980x%26c%3D735429303%22%7D" caption="" pin_description="" image-library="0" expand=1 photo_credit=""]
There, you can start coding away whatever Top Bar you want to use.
A quick example of a custom Top Bar with an ad tag in it:
<div class="topnav-custom"> <a href="/" class="topnav-custom__logo site-logo"> </a> <div class="ad-placeholder ad-placeholder--top"> <div class="ad-placeholder-inner"> <!-- /194487792/ADTAG_ATF_Desktop --><div id='div-gpt-ad-1479093654204-0' style='height:90px; width:728px;'><script>googletag.cmd.push(function() { googletag.display('div-gpt-ad-1479093654204-0'); });</script></div> </div> </div> </div>
This is how it looks:
[rebelmouse-proxy-image https://media.rbl.ms/image?u=%2Fmedia.forumbee.com%2Fi%2F706573b1-b63f-48b6-b4ad-e3be41488bf4%2F547.png&ho=https%3A%2F%2Fs3-us-west-2.amazonaws.com&s=573&h=5740cc12488d7c499a1c7236bb378d1a9d5102adf79091891aca519bdc2ad24e&size=980x&c=1927312342 crop_info="%7B%22image%22%3A%20%22https%3A//media.rbl.ms/image%3Fu%3D%252Fmedia.forumbee.com%252Fi%252F706573b1-b63f-48b6-b4ad-e3be41488bf4%252F547.png%26ho%3Dhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%26s%3D573%26h%3D5740cc12488d7c499a1c7236bb378d1a9d5102adf79091891aca519bdc2ad24e%26size%3D980x%26c%3D1927312342%22%7D" caption="" pin_description="" image-library="0" expand=1 photo_credit=""]
Please remember to remove the default Top Bar the site template comes with, otherwise you'll have two different ones in place.