Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • July 19, 2022 at 7:01 pm #1358805
    the_digital_manager

    Dear Enfold team,

    I’d like to place the breadcrumb on a custom location on the webpage.

    front-end
    The yellow line indicates the preferred location

    back-end
    this is how I build the page. First there’s a dia slide full width,
    which is followed by content section containing a negative whitespace, a 1/1 column with a titel and text.

    How would I go about to realize this?

    second question: if I wanted to place the breadcrumb in the top of a header image (such as the full width slider) such as this example breadcrumbs in header dia slide .. how would I realize that?

    July 19, 2022 at 7:30 pm #1358808
    Guenni007

    Well – a manual way to do it is to use the shortcode for the breadcrumb trail:
    place this to your child-theme functions.php :

    function av_breadcrumbs_shortcode( $atts ) {
	return Avia_Breadcrumb_Trail()->get_trail( array( 'separator' => '/', 'richsnippet' => true ) );
}
add_shortcode( 'av_breadcrumbs', 'av_breadcrumbs_shortcode' );

    and use whereever you like to place that as : [av_breadcrumbs]

    July 19, 2022 at 9:36 pm #1358818
    Rikard

    Hi,

    Thanks for helping out @guenni007 :-)

    Best regards,
    Rikard

    July 26, 2022 at 11:42 am #1359447
    the_digital_manager

    @guenni007 awesome!
    I managed to add some css to it and remove the ‘you are here’ via function.php… only have two questions left:
    1. if I want to change the home text to the icon of a home, how do i do this? Just a home icon from the standard fontello pack would be great.
    2. how do I change the color of the ‘home’ to white? (without and with hoover) I’ve used below CSS already. 

    #top .breadcrumbs {
line-height: 45px;
font-weight: 200;
font-size: 20px;
color: white;
}
    July 27, 2022 at 12:58 pm #1359551
    Mike

    Hi,
    To replace the breadcrumb “Home” with a house icon and make it white, please try this css:

    
.breadcrumb-trail a.trail-begin:after {
	content: "\e821";
	font-family: entypo-fontello;
	font-size: 16px;
	color: #fff;
}
.breadcrumb-trail a.trail-begin {
	font-size: 0 !important; 
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    August 4, 2022 at 10:41 am #1360592
    the_digital_manager

    works like a charm! but with what CSS do i just make the text ‘home’ white?

    August 4, 2022 at 12:20 pm #1360603
    Mike

    Hi,
    Thanks for the feedback, the css above should have replaced the text “home” with the house icon, this part of the css above makes the text “home” font size zero:

    
.breadcrumb-trail a.trail-begin {
	font-size: 0 !important; 
}

    if you didn’t add this part because you want to see the “home” then add the color to it like this:

    
.breadcrumb-trail a.trail-begin {
	 color: #fff;
}

    if this doesn’t help please link to your page so we can check.

    Best regards,
    Mike

    August 5, 2022 at 9:43 am #1360737
    Guenni007

    what is the reason for making it white ? what you try to obtain with it?
    To completly remove it it is much easier:

    .trail-begin {
  display: none !important;
}
    December 12, 2022 at 11:37 pm #1376004
    the_digital_manager

    Hi Mike & Guenni007, the provided code works well for pages just 1 level deep (the breadcrumb text is white), but on pages of 2 levels deep (page/deeper-page) the first part/level of the breadcrumb is still black, while the 2nd level is white. What do i need to adjust in the CSS to make the full text white? see page link in private content for exampl.e

    December 13, 2022 at 2:19 pm #1376053
    Mike

    Hi,
    Please try setting the color at Enfold Theme Options ▸ Advanced Styling ▸ Breadcrumbs
    Then clear your browser cache and any cache plugin, and check.

    Best regards,
    Mike

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Custom location breadcrumb’ is closed to new replies.