Topbar Content & Media Queries

Support
#1

Is it possible to change the content of the topbar using a media query?

For example on desktop where there is more space have more text whilst on mobile show far less?

#2

Hi There,

Thank you for writing in, you can use the HTML markup below, those <div> has the classes of Hide Base on Screen Width feature, which hide content on mobile or desktop.

<div class="cs-hide-sm cs-hide-xs desktop-view">
	CONTENT FOR DESKTOP HERE
</div>
<div class="cs-hide-xl cs-hide-lg cs-hide-md mobile-view" >
	CONTENT FOR MOBILE view here
</div>

Hope it helps,
Cheers!

#3

Hi Friech,

That works! It does strip out the normal topbar styling so I added some inline CSS to do that… unless there is a better way?

Thanks

#4

Hi,

You can try using span instead of divs.

<span class="cs-hide-sm cs-hide-xs desktop-view">
	CONTENT FOR DESKTOP HERE
</span>
<span class="cs-hide-xl cs-hide-lg cs-hide-md mobile-view" >
	CONTENT FOR MOBILE view here
</span>

But if inline css works for you, that’s fine too.

Thanks

#5

Hi,

Span works, and it’s neater :slight_smile:

Thanks!

#6

Really glad that we could be of help! :slight_smile:

Cheers!