Okay
  Public Ticket #2396095
Yoast breadcrumbs stylization
Closed

Comments

  • nvr21 started the conversation

    Hello,

    So I have search all topics related this but I couldn't find any solution.

    I am trying to add breadcrumbs under each page/portfolio/blog subtitle.

    1. First I have used this hook to remove yoast breadcrumbs, but it doesn't work for portfolio any advice? Maybe we can solve it with a hook rather than a css hide.

    ///remove yoast breadcrumbs
    add_action( 'init', 'remove_yoast_breadcrumbs');
    function remove_yoast_breadcrumbs() {
      remove_action( 'nectar_hook_before_content', 'nectar_yoast_breadcrumbs', 10 );
    }
    

    2. I have managed to find the header in this location: salient ectarhelperspage-header.php

    Under each end of <div class="inner-wrap"> code here</div> I have added the following code:

    <?php if ( function_exists('yoast_breadcrumb') ) {
                                     yoast_breadcrumb( '<p id="breadcrumbs">','</p>' ); }  ?>

    It works pretty good until now but the breadcrumbs is align on left instead of center, can somehow copy the aligment of the title? For ex: if the text is set to be alight on left the breadcrumbs to be also on left, center to be center etc.

    Hope you can help me solving this issue and make breadcrumbs more beautiful.



  •  8,990
    Tahir replied

    Hey Again,

    Can you provide the relevant Page url so we may write up custom css for changing the Alignment .

    Thanks 


    ThemeNectar Support Team 

  • nvr21 replied

    Hey again and sorry for late response. I set this css for aligment and it works pretty well.

    Here is the page I have tried to implement all. Maybe you can set a function in the future to set yoast under subtitle :P.

    Can you provide a function to remove yoast from portfolio similar to page one? 

    Many thanks

    The page is here:

    https://beta.imcreative.ro/portfolio/waveform/

    p#breadcrumbs {
        text-align:center;
    }
    ///for mobile device the text is too big 
    @media only screen and (max-width: 768px){.row .col.section-title span {
        font-size: 12px;}} 
    
  •  8,990
    Tahir replied

    Hey Again, Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):

    /* hide breadcrumbs on portfolio */
    .single-portfolio p#breadcrumbs {
        display: none !important;
    }
    /*  align breadcrumbs to center*/
    p#breadcrumbs {
        text-align: center;
    }
    /* for mobile device the text is too big  */
    @media only screen and (max-width: 768px) {
        .row .col.section-title span {
            font-size: 12px;
        }
    }

    Thanks


    ThemeNectar Support Team 

  • nvr21 replied

    I haven't add yet the css, but since I have moved the yoast breadcrumbs below subtitle in header and have set same class won't hide the css too :D ? 

    Idk just asking. 

  •  8,990
    Tahir replied

    I just added the css in the Live Browser so it will work if added correctly. 

    Thanks


    ThemeNectar Support Team 

  • nvr21 replied

    Well I have added your code and the breadcrumbs dissapears :P I have set same class on page-header when I have added the shortcode :P

    https://imgur.com/a/l9MmDSS

    <?php if ( function_exists('yoast_breadcrumb') ) {
    yoast_breadcrumb( '<p id="breadcrumbs"-->','<p></p>' ); }  ?>
    
  • nvr21 replied

    For single page the function works perfectly to hide yoast, but on project I couldn't find anything similar..css won't work here because same code is moved up on header :D

    https://imgur.com/a/l7gTaCl

    On every update I am forced to go to single-portfolio.php and comment out the lines :P

    But this is not such a major issue :P

  •  8,990
    Tahir replied

    Not sure i am following you 100% . This css only applies to the Portfolio single page:

    /* hide breadcrumbs on portfolio */
    .single-portfolio p#breadcrumbs {
        display: none !important;
    }
    

    Thanks


    ThemeNectar Support Team 

  • nvr21 replied

    Yeah maybe I miss typed or I haven't explain my self clear.

    So I would breadcrumbs to show on all pages including portfolio, but your current breadcrumbs implementions doesn't look so nice before content so I have dig a little bit and I found out that I can insert yoast shorcode right below subtitle on each page.

    Since on single page there is a yoast breadcrumbs and I wanted to hided it, but now with css I have found that the function below works perfect. 

    ///remove yoast breadcrumbs
    add_action( 'init', 'remove_yoast_breadcrumbs');
    function remove_yoast_breadcrumbs() {  remove_action( 'nectar_hook_before_content', 'nectar_yoast_breadcrumbs', 10 );
    }

    But on single portfolio pages the function still persists because I couldn't find a similar function to remove it and I was forced to comment out the line where yoast was present.

    https://imgur.com/a/l7gTaCl

    --------------

    The css your provided it hides the yoast breadcrumbs, but what I was asking was a similar function because I need to remove action similar to the one above :D.

    If it is not possible no problem I will comment out those lines in the future updates. 

    Hope you understand now.

    Thanks