RebelMouse Talk to Us
The Top Bar: users' way of finding your content

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.

Build on a Better PlatformReady to See More?
Request a Proposal
Learn More About RebelMouse’s High-Performing Infrastructure
Featured

Learn More About RebelMouse’s High-Performing Infrastructure

To ensure every site powered by RebelMouse is high performing, secure, and optimized for user experience, we only use the best and most reliable methods to host our infrastructure. Here's a detailed look at some of the services and security measures we use every day to secure maximum stability and security for each of our sites.

Keep reading... Show less
Build on a Better PlatformReady to See More?
Request a Proposal
An Important Note on Site Quality From Google’s Search Expert
Rebel Insights

An Important Note on Site Quality From Google’s Search Expert

Do you ever wonder if a few typos can impact your site’s search performance? According to Google’s Search Advocate John Mueller, it takes more than just a few grammatical missteps for Google’s crawler to determine your site’s quality.

During a New Year’s Eve Office Hours hangout, Mueller said that if certain portions of a website are deemed low quality, it can negatively impact the site’s search ranking overall. A good example of this is a site that has different language versions within the same domain. If the site has a French-language version that is made up of quality content, but the English translation isn’t up to the same standard, the ranking of the French version of the site could be negatively impacted.

Keep reading... Show less
Build on a Better PlatformReady to See More?
Request a Proposal