Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • September 16, 2013 at 12:51 pm #161670
    awilson3rd

    Just wondering if it is possible to remove the breadcrumb on just some pages? The reason being is that some of my breadcrumbs will be
    very long. I have used the code below:

    .breadcrumb {

    display: none;

    }

    I know I can target a page ID with the above but there will be many pages where I need to remove the breadcrumb. I guess a ‘custom css’ for each page would be useful for the future?

    Thanks

    Andrew

    September 17, 2013 at 2:28 am #162016
    Josue

    Hi Andrew,

    Using Page Templates may fit your needs.

    Regards,
    Josue

    September 17, 2013 at 11:49 am #162205
    awilson3rd

    Hello Jose,

    Thanks for the reply. Can you please explain how page templates would help with custom CSS as each page has a unique ID?

    Thanks

    Andrew

    September 17, 2013 at 4:25 pm #162309
    Josue

    Hi Andrew,

    You could create a page template (i’d recommend simply duplicating page.php + adding a special class to the container, something like .no-breadcrumb) and then simply assign it in the backend of each page you want, finally add this code to the CSS:

    .no-breadcrumb .breadcrumb{ display: none }

    If this is too much technical please create an administrator account and send it to me at avia.josue (at) gmail.com so i can help you out.

    Regards,
    Josue

    September 17, 2013 at 6:46 pm #162392
    awilson3rd

    Thanks Josue,

    Thanks for the reply. I am ok with creating classes in the custom css file and applying this to containers in general but I am a bit lost when it comes to applying it to a ‘page container’? For example, if I just want to add a special class to a column container this is easy enough to do by adding the class ID to the column container but where (visually) would I apply the class to the entire page?

    Thanks

    Andrew

    September 18, 2013 at 3:38 am #162669
    Ismael

    Hey,

    Just edit the page, look for Layout > Heading Settings > choose “Don’t display Header”.

    Regards,
    Ismael

    September 18, 2013 at 3:39 am #162671
    Ismael

    Hi again,

    If you want to change the style of a specific page or post, you can use the Google Chrome Inspect Element. Look for the unique css body class.

    On the example above, the page’s unique selector is .page-id-2251. We can use it to change the element within that page. 

    .page-id-2251 .breadcrumb.breadcrumbs.avia-breadcrumbs {
display: none;
}

    Regards,
    Ismael

    September 18, 2013 at 11:05 am #162851
    awilson3rd

    Thanks Ismael,

    I know that as I mentioned in the first post. I am a bit confused about Josue’s method though.

    Thanks

    Andrew

    September 18, 2013 at 6:30 pm #163072
    Josue

    Hi Andrew,

    Sorry about confusing you, the page templates solution would work but it may be hard to implement it, however i got an idea. why not hiding the breadcrumbs by default for all pages? and the pages you don’t want to hide it (which i guess are fewer) show it.

    Regards,
    Josue

    September 18, 2013 at 9:00 pm #163137
    awilson3rd

    Thanks Josue,

    Sounds like a better solution:-) Thanks for your help,

    Andrew

    September 18, 2013 at 9:02 pm #163138
    Josue

    Glad we could help. Let us know how it goes :)

    Regards,
    Josue

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Remove breadcrumb on 'some' pages’ is closed to new replies.