Subscribe to Our Newsletter

x

The Top Bar: How Users Find Your Content

We currently offer two types of predefined Top Bar elements that you can use.


Simple

Normal

And you can actually switch between these two versions quite easily.

1. Go to the Layout & Design tool in the left-hand navigation menu.

2. Choose the Top Bar page, and then select the Navbar element.

3. Using the Properties card, you can switch between Top Bar formats with just one click.

4. Don't forget to click Save!

Creating a Custom Top Bar

If you want to get super creative with the design of your Top Bar, you can use custom HTML to design it.

In the Top Bar page of the Layout & Design tool, click the + ADD ELEMENT button in the toolbar and choose the Custom HTML element.

Now you can start coding to design the Top Bar that works best for you. Here's a quick example of a custom Top Bar with an ad tag in it:

<style> /* * Rebelbar custom CSS */.menu-global .main-menu-item a{ color:#fff; }.menu-global .main-menu-item:not(.section):hover > a, .menu-global .main-menu-item:not(.section):hover > div > a { color: #f8873b; background-color: transparent; }.rebelbar__section-links { display: none !important; }.rebelbar .logo { margin-right: 20px; }@media screen and (min-width: 768px) {.rebelbar.skin-simple .rebelbar__inner { max-width: 1100px;}.rebelbar.skin-simple .logo__image { max-width: 350px; max-height:48px;} } @media screen and (min-width: 1024px) {.menu-opened .menu-global{ display:block;}.with-fixed-header .rebelbar .logo { display: block; overflow: hidden; width: 291px;}.rebelbar__section-links { display: block !important;}.rebelbar.skin-simple .rebelbar__section-links{ padding-left:0;}.with-fixed-header .rebelbar.skin-simple .rebelbar__section-links{ padding-left:40px;}.with-floating-shares .rebelbar__section-links { display: none !important;} }@media screen and (min-width: 1050px) {.rebelbar .logo { display: none;} } /* * Topnav Custom CSS */.topnav-custom { display: none; }.topnav-custom .topnav-custom__logo { background-image: url(<img src="https://assets.rbl.ms/8384194/2000x.png" />); background-repeat: no-repeat; background-size: contain; background-position: left; overflow: hidden; width: 290px; min-height: 50px; margin: 20px 0; vertical-align: top; display: none; }.topnav-custom .topnav-custom__ad { width: 728px; height: 90px; margin: 0 auto; }@media screen and (min-width: 1024px) {.topnav-custom { display: block; height: 160px; padding: 15px 0; box-sizing: border-box; overflow: auto; max-width: 1100px; margin: 0 auto;} }@media screen and (min-width: 1050px) {.topnav-custom .topnav-custom__logo { display: inline-block;}.topnav-custom .topnav-custom__ad {float: right;} } </style>
<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>

And here's how it looks on the site:

Note: Please remember to remove the default Top Bar that your site template comes with before pushing your customized code live. Otherwise, you'll end up having two different Top Bars show up on your site.

You're almost there! Fill out the form below and a Rebel will contact you within one business day.

x

How to Control the Order of Posts on a Section Page

As an editor, you might want to manually control the order of your posts on any given section page. With our powerful CMS platform, this is as easy as dragging and dropping. Watch how it's done in the following video:

Keep reading... Show less

You're almost there! Fill out the form below and a Rebel will contact you within one business day.

x

Try This New Video Preview on Facebook Instant Articles

There's a new function for Facebook Instant Articles that shows a video preview on mobile. The option has been successful for some of our clients at RebelMouse, and we want you to give it a try too!

Keep reading... Show less

How to Thrive in a World Without Ads

Mike Mallazzo, Director of Marketing at Narrativ, recently wrote a post on Medium: "Life After Ads: The recent purchase of TIME should remind publishers of the power a strong brand can wield."

He discusses how some media companies are starting to question their total reliance on digital advertising. With Facebook and Google capturing the majority of revenue in the online advertising space, Mallazzo talks about how some companies are diversifying their revenue streams with models that depend on building loyalty and trust through subscriptions and commerce content in addition to just advertising. He writes:

"Media conglomerates have rediscovered the power of brand equity, offering the most plausible hope for sustainability since the proliferation of the internet."

At RebelMouse, however, we are still seeing digital advertising work. Our clients — such as Dance Magazine — are seeing huge success with digital advertising. But what if you were a media company in a world where traditional digital advertising didn't work at all? What would you do? How would you make money and continue to grow as a company?

The key is loyalty. You can't have a brand without loyalty.

Keep reading... Show less