[Resolved] About breadcrumbs

Home Forums Support About breadcrumbs

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #899187
    Dung

    Hi GP team,
    I am trying to add breadcrums on my site by using hook. I follow the guide at https://docs.generatepress.com/article/adding-breadcrumbs/ and add shortcode from yoast

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

    It shows error on my site (breadcrums display at post and post category, you can check it)
    Please help me, thank you so much.
    One more thing, I can only check at execute shortcode, can not check at execute PHP (it shows: Unable to execute PHP as DISALLOW_FILE_EDIT is defined)

    #899191
    David
    Staff
    Customer Support

    Hi there,

    in the Hook – check the Execute PHP checkbox.

    #899212
    Dung

    Thanks David, just got it.
    The breadcrumbs is now located at after_header and there are 2 things I need:
    1/ The breadcrumbs are displayed like the category heading (which means it has same background color like category heading and I can adjust the margin)
    2/ My menu typography is uppercase and sub menu is capitalize, can we let the breadcrumbs show all in capitalize?

    #899216
    David
    Staff
    Customer Support

    Try this, wrap your breadcrumbs in a div like so:

    <div class="grid-container custom-breadcrumb">
    <?php
    if ( function_exists('yoast_breadcrumb') ) {
      yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
    }
    ?>
    </div>

    And then add this CSS:

    .custom-breadcrumb {
        background-color: #ffffff;
        padding: 20px 20px 0;
        margin-top: 0.5em;
        box-sizing: border-box;
    }
    @media (max-width: 768px) {
        .custom-breadcrumb {
            padding: 10px;
        } 
    }
    #breadcrumbs {
        text-transform: uppercase;
        font-size: 12px;
        margin-bottom: 0;
    }
    #899241
    Dung

    Hi David,
    The PHP code worked well. There are some problems with the CSS:
    1/ Text-transform: it just tranform HOME and submenu to uppercase (I need tranform main menu to capitalize)
    2/ Breadcrumb layout is not the same width as category heading layout.
    3/ Can we have full padding options (top, bottom, left and right). By the way, the padding on my site are different between desktop and mobile display.
    4/ Adjust breadcrumbs font size.

    #899249
    David
    Staff
    Customer Support

    I adjusted the CSS above to fix the alignment and make the necessary padding changes. The last rule includes a font-size for the breadcrumb.

    #899262
    Dung

    Hi David,
    It seems better now but the breadcrumb padding top and bottom is not equal (now top is higher than bottom, can we make the text align center).
    About the text transform: it work fine if we choose uppercase (which mean code will change HOME and SUB MENU to uppercase, MAIN MENU is basically uppercase). What I need is changing to capitalize (my HOME and SUB MENU are basically capitalize, the MAIN MENU is uppercase and I try to change to capitalize). Can we make it work when convert between uppercase and capitalize (uppercase work fine but capitalize can not change the MAIN MENU)
    Sorry if my english make you confused.

    #899275
    Leo
    Staff
    Customer Support

    I adjusted David’s CSS a bit to fix the top and bottom padding issue.

    Sorry not quite sure if I understand what you meant with the upper case issue.

    Can you explain a bit more? Maybe some actual examples of what it should look like?

    #899570
    Dung

    Hi Leo,
    Text-tranform now is fine for me. Thank you so much.
    Can we add a text before the breadcrumbs like this: You are here: Home > Main Menu > ….

    #899574
    Leo
    Staff
    Customer Support

    You could do this:

    p#breadcrumbs:before {
        content: "You are here: ";
        text-transform: none;
    }
    #899587
    Dung

    Very nice, thank you so much Leo.

    #899592
    Leo
    Staff
    Customer Support
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.