Hide pageNavigation if no content

  • 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.

    My styles and plugins in the Plugin-Store.

    ♪Quiero robarle los minutos a las horas pa' que mis padres nunca se me pongan viejos...♫

  • 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;
    }
  • 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.

    My styles and plugins in the Plugin-Store.

    ♪Quiero robarle los minutos a las horas pa' que mis padres nunca se me pongan viejos...♫

  • 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

    My styles and plugins in the Plugin-Store.

    ♪Quiero robarle los minutos a las horas pa' que mis padres nunca se me pongan viejos...♫

  • 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.

    • 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.

  • 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..

  • 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 :(

    My styles and plugins in the Plugin-Store.

    ♪Quiero robarle los minutos a las horas pa' que mis padres nunca se me pongan viejos...♫

  • 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...

  • 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..

  • 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..

    • Official Post

    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.

  • *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..


  • 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.




    My styles and plugins in the Plugin-Store.

    ♪Quiero robarle los minutos a las horas pa' que mis padres nunca se me pongan viejos...♫

  • 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 :)

    • Official Post

    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 ;)

  • 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.

  • 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:


    My styles and plugins in the Plugin-Store.

    ♪Quiero robarle los minutos a las horas pa' que mis padres nunca se me pongan viejos...♫

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!