Hide pageNavigation if no content

Caribe_Soy · February 27, 2017 at 11:35 PM

Hello,

I'd like to hide the pageNavigation bar when there's no content, i.e. no breadcrumbs nor page navigation icons, e.g. landing page. I tried:empty and :blank selectors but it didn't work, how can I do it?

Regards.

ChristopheA · February 28, 2017 at 9:35 AM

Hi,

what do you mean by "when there is no content" ?

To hide the navigation bar, you must add this CSS code :

CSS

.pageNavigation {
    display: none;
}

Caribe_Soy · February 28, 2017 at 9:53 AM

Quote from GeGeek

what do you mean by "when there is no content" ?

I mean for example in landing page, although I'm not sure it only applies for a landing page.

Empty:

With contents, in this case the breadcrumbs but sometimes it also has some icons

I don't want to hide it completely, I just want to hide it if there's no content.

marcbelgique · February 28, 2017 at 10:06 AM

i see what you mean

but in the right of this line you can have icon rss feed ...

thus you must test contents and icons ...

Caribe_Soy · February 28, 2017 at 10:26 AM

In the case of landing page I don't have a RSS feed icon, and I don't want to add it, there has to be solution.

I'm just guessing but maybe something related to hascontent in Smarty templates. Maybe Alexander Ebert could help

ChristopheA · February 28, 2017 at 10:45 AM

I think this code could be the solution for you :

tpl_wcf_cms

Code

#tpl_wcf_cms .pageNavigation {
    display: none;
}

So the navigation bar is available, but not for other pages created manually, or landing pages.

**Alexander Ebert** · February 28, 2017 at 10:56 AM Official Post

Please do not use the code provided by ChristopheA above, it is applied to all CMS pages!

Instead use a more specific approach by referencing the internal page id:

CSS

body[data-page-id="74"] .pageNavigation {
    display: none;
}

You can copy and paste the code above into your style, the ID matches the landing page of your site.

ChristopheA · February 28, 2017 at 11:02 AM

Quote from Alexander Ebert
Please do not use the code provided by ChristopheA above, it is applied to all CMS pages!

Instead use a more specific approach by referencing the internal page id:
CSS
body[data-page-id="74"] .pageNavigation {
    display: none;
}
You can copy and paste the code above into your style, the ID matches the landing page of your site.

She ever knows this code, i don't think it's that she is looking for.

She can try my code and see if it corresponds to her needs.

This code hide the navigation bar in landing page, privacy policy page, and all new manually created pages.. i don't see it works on other pages.. It doesn't work on Forum, Gallery, Blog, Calendar, User pages (avatar, account..), etc..

Caribe_Soy · February 28, 2017 at 11:04 AM

Quote from Alexander Ebert
Please do not use the code provided by ChristopheA above, it is applied to all CMS pages!

Instead use a more specific approach by referencing the internal page id:
CSS
body[data-page-id="74"] .pageNavigation {
    display: none;
}
You can copy and paste the code above into your style, the ID matches the landing page of your site.

I know this would work but I'm creating a style that I will submit to the plugin-store, I couldn't know the page ID for each user, and even if I'd knew, that would be too messy or impossible to achieve

Scamander · February 28, 2017 at 11:04 AM

Quote from GeGeek

She ever knows this code, i don't think it's that she is looking for.

She can try my code and see if it corresponds to her needs.

This code hide the navigation bar in landing page, privacy policy page, and all new manually created pages.. i don't see it works on other pages.. It doesn't work on Forum, Gallery, Blog, Calendar, User pages (avatar, account..), etc..

And it also hides the navigation with Content.... For example with pages and sub pages, the implementation of Alexander Ebert is better...

ChristopheA · February 28, 2017 at 11:07 AM

Quote from azerus

And it also hides the navigation where content is. For example with pages and sub pages, the implementation of Alexander Ebert is better...

Of course, but for a custom page, which for example tells about "cars", or "terms and conditions", this page doesn't need the navigation bar..

ChristopheA · February 28, 2017 at 11:11 AM

Quote from azerus

And it also hides the navigation with Content.... For example with pages and sub pages, the implementation of Alexander Ebert is better...

It's not true, see her page https://soytiburon.co/le-club/identite/maillot/

It's a sub page, and there is no breadcrumb..

So why she would need the blank visible navigation bar on custom CMS pages for example ?

If she uses a custom plugin which have subpages and breadcrumbs, the page ID is not "#tpl_wcf_cms", so no problem..

**Alexander Ebert** · February 28, 2017 at 11:13 AM Official Post

Quote from GeGeek

If she uses a custom plugin which have subpages and breadcrumbs, the page ID is not "#tpl_wcf_cms", so no problem..

*ALL* CMS pages share this id, because it is automatically generated based on the template name, which is "cms" at all times. Your selector causes the page navigation to be hidden on all CMS pages regardless.

ChristopheA · February 28, 2017 at 11:20 AM

Quote from Alexander Ebert

*ALL* CMS pages share this id, because it is automatically generated based on the template name, which is "cms" at all times. Your selector causes the page navigation to be hidden on all CMS pages regardless.

Can you tell us *ONE* page on which this could create a problem ?

Account Management => Not #tpl_wcf_cms

Add Event => Not #tpl_wcf_cms

Add File => Not #tpl_wcf_cms

Add Image => Not #tpl_wcf_cms

Album List => Not #tpl_wcf_cms

Article List => Not #tpl_wcf_cms

Article => Not #tpl_wcf_cms

.........

I've check more than 20 pages..

**Alexander Ebert** · February 28, 2017 at 11:26 AM Official Post

Quote from GeGeek

Can you tell us *ONE* page on which this could create a problem ?

Why don't you take a look at our website, it is entirely built with the CMS, including most of the links in the footer.

Caribe_Soy · February 28, 2017 at 11:27 AM

Quote from GeGeek

Can you tell us *ONE* page on which this could create a problem ?

Account Management => Not #tpl_wcf_cms

Add Event => Not #tpl_wcf_cms

Add File => Not #tpl_wcf_cms

Add Image => Not #tpl_wcf_cms

Album List => Not #tpl_wcf_cms

Article List => Not #tpl_wcf_cms

Article => Not #tpl_wcf_cms

.........

I've check more than 20 pages..

Display More

I think those pages have the breadcrumbs to home. Besides, the case for the url from my website you mentioned doesn't apply because website is under maintenance mode and it doesn't show breadcrumbs in that mode for guess.

ChristopheA · February 28, 2017 at 11:30 AM

Quote from Alexander Ebert

Why don't you take a look at our website, it is entirely built with the CMS, including most of the links in the footer.

Of course, with custom hero boxes on all pages etc..

And there is no problem with that.

I added my purposed CSS code on a dev site you can find here :

https://dev.geeklabs.fr

Check it, and tell me if you find ONE page which should show the navigation bar, but doesn't

It's hiding the navigation bar on all my custom pages (like test page), in the dashboard page, and in the privacy policy page..

So there is no problem

**Alexander Ebert** · February 28, 2017 at 11:36 AM Official Post

Quote from GeGeek

Check it, and tell me if you find ONE page which should show the navigation bar, but doesn't

The navigation bar can be useful depending on your page and what you want to accomplish. My point was, that your solution isn't suitable if you want to hide the bar on one CMS page, because your code affects them all.

It's like the author asked to remove a tree and you suggest to burn down the entire forest. Sure, it gets the job done, but also slightly overshoots at the same time. No offense, though

ChristopheA · February 28, 2017 at 11:37 AM

Quote from Caribe_Soy

I think those pages have the breadcrumbs to home. Besides, the case for the url from my website you mentioned doesn't apply because website is under maintenance mode and it doesn't show breadcrumbs in that mode for guess.

Ok, i see, so in your screen, there is a breadcrumb, with subpages..

So my solution would delete this navigation bar for you..

It would only work if you don't have subpages.

Caribe_Soy · February 28, 2017 at 11:40 AM

Quote from GeGeek

Check it, and tell me if you find ONE page which should show the navigation bar, but doesn't

If you add menu items linking to your CMS pages you will get a navigation bar with breadcrumbs in those pages, so hiding the bar from all CMS pages is not the best solution. So the nav bar will disappear in this page:

Quote from Caribe_Soy

Participate now!