Breadcrumbs and searchbar visibility

[Davbo]

Hi all

I'm creating an HTML Top Nav help, and I would like breadcrumbs on the Web and Tablet outputs but not on the mobile output. When I edit the breadcrumb proxy in the @mobile section of my stylesheet as follows:

MadCap|breadcrumbsProxy
{
display: none;
font-size: 0pt;
}

The breadcrumbs are still visible in the mobile output.

Also, when I edit the searchbar in the TopNav skin to make the searchbar in the header visible for mobile outputs, again it has no effect.

Any help much appreciated.

Cheers

Davbo

[AlexFox]

Can you show us the full media query you're using?

[Davbo]

Hi Alex

Many thanks for your reply.

I've added the following CSS to the @media mobile section of my stylesheet:

MadCap|breadcrumbsProxy
{
display: none;
font-size: 0pt;
}

I'm expecting display: none; to hide the breadcrumbs from mobile output, but so far no luck. Is there something else I should add?

Cheers

Davbo

[AlexFox]

I'm not sure where the mobile media type comes from, I've never used it and I can't find it defined anywhere. You'll need to use media queries based on screen size for this, replace your @media mobile { with

Code: Select all

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
{
 MadCap|breadcrumbsProxy
{
display: none;
}
}

You shouldn't need the font-size as any child of the breadcrumb will be hidden along with it.

This will cover most small-medium sizes but you can adjust the max and min width to suit.

EDIT: Thinking about it, the mobile media is likely a Flare default so you can switch mediums in the xml editor.

[NorthEast]

This will work:

Code: Select all

@media mobile
{
 	div.breadcrumbs
	{
	display: none;
	}
}

For some reason, setting the display property on MadCap|breadcrumbsProxy doesn't work, and it isn't carried through when Flare builds the output.
That's why your original code (and Alex's code) will not work.

When Flare builds the output, it puts the breadcrumbs inside div.breadcrumbs; so if you substitute MadCap|breadcrumbsProxy with div.breadcrumbs, it will work.

EDIT: Thinking about it, the mobile media is likely a Flare default so you can switch mediums in the xml editor.

The mobile and tablet mediums are provided by Flare and you can see them in the stylesheet editor. Flare generates media queries from them in the output CSS, based on your breakpoint settings.

[Davbo]

Hi Alex, Dave

Many thanks. Problem sorted.

Cheers

David