• Resolved Justin

    (@static1635)


    Hi, I am having trouble finding where the customizer setting is to add the border under the page title/breadcrumbs? Thanks for any help.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Hello @static1635,

    Thank you for contacting us, and Happy New Year.
    ?I hope you have a wonderful year ahead.

    There isn’t any option for adding border stylings for breadcrumbs. However, you can write a custom CSS for it. You can learn how to use Chrome Developer Tools or Firefox Developer Tools to help you see and test changes to your CSS:
    https://developers.google.com/web/tools/chrome-devtools/
    https://developer.mozilla.org/en-US/docs/Tools
    CSS Tutorial: https://www.w3schools.com/css/

    And for responsive sizes, put your CSS on custom screen size:

    @media only screen and (max-width: 480px) {
        /* put your custom CSS here*/
    }

    Or use between sizes:

    @media (max-width: 960px) and (min-width: 481px){
        /* put your custom CSS here */
    }

    For more information about media queries, please read this article:
    https://www.w3schools.com/css/css_rwd_mediaqueries.asp

    Example CSS:

    .site-breadcrumbs ol li:not(.trail-begin) a {
        border:1px solid #09edb8;
        padding: 2px 12px;
        border-radius: 12px;
        background: #09edb824;
    }

    _____

    If you mean the border around the link after clicking on links, that’s outlines(https://postimg.cc/0zZT4jk4).
    The outline is not an issue. It’s an accessibility requirement (we’re required to use it). But you can disable it on your end with custom CSS. To remove the outline, please add the following CSS code in the Custom CSS area in the Customizer:

    a:focus {
        outline: 0px !important;
        outline: none !important;
    }

    Please read this link about the CSS code on the Customizer:
    https://docs.oceanwp.org/article/354-add-custom-css-and-js-to-your-website

    For more information about Accessibility, please read this article: https://developer.mozilla.org/en-US/docs/Web/Accessibility.

    I hope it helps.
    Best Regards

    Thread Starter Justin

    (@static1635)

    Happy new year too.
    I seem to remember that the theme as standard had a line under the page title section? but I may be wrong, I’ve been fiddling with the theme so much it’s a distant memory.

    Thread Starter Justin

    (@static1635)

    Actually I decided to leave it without a line under as I narrowed the content to 750px and it’s better now.

    Hello @static1635,

    All styling for the page title section and breadcrumbs are in Customizer> general options > Page Title so you can set your desired styling.
    The default styling for the page title and breadcrumbs is this: https://postimg.cc/wtVk0hsb.

    Best Regards

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Border under page title/breadcrumbs?’ is closed to new replies.