Tagged: breadcrumbs
-
AuthorPosts
-
April 12, 2021 at 2:16 pm #1293943
We are having some trouble setting up our breadcrumb the way we are expected to have it.
– Need to make the breadcrumb menu not display on the homepage
– The trail needs to display on the top of the box, the current page should be larger font than the trail and be displayed underneath it
– Our trail currently always displays (Home / “Current Page”), Home needs to actually update depending on which dropdown they chose and then add a separator and each submenu they click through.
– Our trail currently uses ‘/’ and we need to it be ‘>’Changes we intentionally made to our page to the box is it resizes to the size of the trail, and it is transparent. Other than that we need to be as close as possible to our HQs standard regarding the changes above.
- This topic was modified 3 years, 7 months ago by arcofbutler.
April 13, 2021 at 2:57 pm #1294140Is there anyone available that could help us with this?
April 14, 2021 at 7:40 am #1294260Hi arcofbutler,
We apologize for the delayed response.
Your site seems to redirect to https://wordpress.org/ when trying to visit it.
Screenshot: https://kriesi.at/documentation/enfold/wp-content/uploads/sites/22/2017/02/Settings.pngNeed to make the breadcrumb menu not display on the homepage
Edit the homepage, In the Sidebar find Layout > Title Bar Settings set to Hide BothThe trail needs to display on the top of the box, the current page should be larger font than the trail and be displayed underneath it
What do you mean by box? is it the container where the breadcrumb is placed?
Also, try to check if our documentation can help with it: https://kriesi.at/documentation/enfold/breadcrumbs/#display-breadcrumbs-under-page-titleOur trail currently always displays (Home / “Current Page”), Home needs to actually update depending on which dropdown they chose and then add a separator and each submenu they click through.
Please use a child theme before adding the code below, you can download and find instructions in our documentation: https://kriesi.at/documentation/enfold/child-theme/
Then add this code on the bottom of functions.php code:function enfold_breadcrumbs_trail( $trail, $args ) { unset($trail[0]); return $trail; } add_filter('avia_breadcrumbs_trail','enfold_breadcrumbs_trail', 10, 2 );
Our trail currently uses ‘/’ and we need to it be ‘>’
Add this code on the bottom of functions.php code:function avia_title($args = false, $id = false) { global $avia_config; if(!$id) $id = avia_get_the_id(); $header_settings = avia_header_setting(); if($header_settings['header_title_bar'] == 'hidden_title_bar') return ""; $defaults = array( 'title' => get_the_title($id), 'subtitle' => "", //avia_post_meta($id, 'subtitle'), 'link' => get_permalink($id), 'html' => "<div class='{class} title_container'><div class='container'>{heading_html}{additions}</div></div>", 'heading_html' => "<{heading} class='main-title entry-title {heading_class}'>{title}</{heading}>", 'class' => 'stretch_full container_wrap alternate_color '.avia_is_dark_bg('alternate_color', true), 'breadcrumb' => true, 'additions' => "", 'heading' => 'h1', //headings are set based on this article: http://yoast.com/blog-headings-structure/ 'heading_class' => '' ); if ( is_tax() || is_category() || is_tag() ) { global $wp_query; $term = $wp_query->get_queried_object(); $defaults['link'] = get_term_link( $term ); } else if(is_archive()) { $defaults['link'] = ""; } // Parse incomming $args into an array and merge it with $defaults $args = wp_parse_args( $args, $defaults ); /** * @used_by config-woocommerce\config.php avia_title_args_woopage() 10 * @since < 4.0 * @return array */ $args = apply_filters( 'avf_title_args', $args, $id ); //disable breadcrumb if requested if($header_settings['header_title_bar'] == 'title_bar') $args['breadcrumb'] = false; //disable title if requested if($header_settings['header_title_bar'] == 'breadcrumbs_only') $args['title'] = ''; // OPTIONAL: Declare each item in $args as its own variable i.e. $type, $before. extract( $args, EXTR_SKIP ); if(empty($title)) $class .= " empty_title "; $markup = avia_markup_helper(array('context' => 'avia_title','echo'=>false)); if(!empty($link) && !empty($title)) $title = "<a href='".$link."' rel='bookmark' title='".__('Permanent Link:','avia_framework')." ".esc_attr( $title )."' $markup>".$title."</a>"; if(!empty($subtitle)) $additions .= "<div class='title_meta meta-color'>".wpautop($subtitle)."</div>"; if($breadcrumb) $additions .= avia_breadcrumbs(array('separator' => '>', 'richsnippet' => true)); // changed if(!$title) $heading_html = ""; $html = str_replace('{heading_html}', $heading_html, $html); $html = str_replace( '{class}', $class, $html ); $html = str_replace( '{title}', $title, $html ); $html = str_replace( '{additions}', $additions, $html ); $html = str_replace( '{heading}', $heading, $html ); $html = str_replace( '{heading_class}', $heading_class, $html ); if(!empty($avia_config['slide_output']) && !avia_is_dynamic_template($id) && !avia_is_overview()) { $avia_config['small_title'] = $title; } else { return $html; } }
Or you can copy it here: https://pastebin.com/8pvadSGp
Best regards,
NikkoApril 14, 2021 at 3:39 pm #1294408Hey Nikko, I am going to apply these changes now. I updated the URL it is .com and I had .org in there I apologize for that. I will report back with how this goes!
April 14, 2021 at 4:01 pm #1294411Almost everything is perfect, the only thing left is our breadcrumbs trail. It is only displaying the current page you are on instead of the path you took to get there.
Example: If you hover over “Programs/Services” > “Vocational” > “Aero” and then click on “Supported Employment”.
We want it to show Programs/Services > Vocational > Aero and then underneath it will show Support Employment. You can see how this works at thearc.org if you follow one of their paths to a page and then reference the breadcrumb container. Is there something else we need to modify in the functions possibly to fix this?
I also have removed the CSS ordering my trail and title in reverse, now they are both overlapping eachother.
- This reply was modified 3 years, 7 months ago by arcofbutler.
April 16, 2021 at 7:55 am #1294718Hi arcofbutler,
You’ll need to do the following:
1. Edit Vocational and set its parent page to Programs/Services.
2. Edit Aero and set its parent page to Vocational.
3. Edit Supported Employment and set its parent page to Aero.
4. Then to move Supported Employment below, add this CSS code in Quick CSS:#top .trail-end { float: none; }
Best regards,
NikkoApril 16, 2021 at 8:23 pm #1294836Thanks Nikko,
1, 2, and 3 work and I will use this method moving forward to adjust our breadcrumb trail pulling in the actual path.
Although number 4 did not work, when I paste this in the quick CSS it does not change anything. Currently, I have only left change 1 active for testing and even on that page, it does not fix the styling of how the breadcrumb trail overlaps the title.
- This reply was modified 3 years, 7 months ago by arcofbutler.
April 17, 2021 at 6:31 am #1294874Hi arcofbutler,
To remove the overlap, the title should be hidden, please add this CSS code as well:
.title_container .main-title { visibility: hidden; }
Best regards,
NikkoApril 21, 2021 at 3:15 pm #1295815Thanks Nikko that worked. This is still not quite there yet though.
1. We are trying to make ours consistent with our headquarters styling (https://thearc.org/our-initiatives/employment/employment-services/)
– Their trail would show at 15px text and is always in the same position on the top of the container (ours is located in the center of the container, also needs font size)
– Their “Current Page” title is always 40px and is located underneath the trail (Ours is the same size as the trail)2. Our styling is still not correct, I am using width:auto; to make the container resize so that each trail will look more proportionate to the box that houses it. I think this may be causing problems on the page (https://arcofbutler.wpcomstaging.com/programs-services/vocational/aero-activities-employment-and-recreational-opportunities/)
Although if you look at the other pages, the auto width seems to work perfectly:
– https://arcofbutler.wpcomstaging.com/programs-services/vocational/
– https://arcofbutler.wpcomstaging.com/programs-services/vocational/aero-activities-employment-and-recreational-opportunities/afterschool-transition-program/April 23, 2021 at 4:38 pm #1296385Hi arcofbutler,
Can you try adding this CSS code:
#top .title_container .container { padding: 20px; min-width: 400px; } #top .title_container .container .main-title { display: none; } #top .title_container .container .avia-breadcrumbs { text-align: left; position: static; margin: 0; line-height: 1.2; } #top .title_container .container .avia-breadcrumbs .breadcrumb-trail * { font-size: 15px; } #top .title_container .container .avia-breadcrumbs .breadcrumb-trail .sep { overflow: visible; padding-right: 12px; } #top .title_container .container .avia-breadcrumbs .breadcrumb-trail .trail-end { clear: both; font-size: 40px; }
Hope this helps.
Best regards,
NikkoApril 26, 2021 at 9:14 pm #1296827Nikko,
Thank you for all of your help. This is exactly what we needed and everything appears to be functioning as expected.
April 26, 2021 at 10:03 pm #1296833Hi,
Did you need additional help with this topic or shall we close?
Best regards,
Jordan ShannonApril 26, 2021 at 10:21 pm #1296838This is closed now, thank you.
April 26, 2021 at 10:43 pm #1296845Hi,
If you need additional help, please let us know here in the forums.
Best regards,
Jordan Shannon -
AuthorPosts
- The topic ‘Issues with breadcrumbs’ is closed to new replies.