Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
  • #4871

    Hi, I wanted to know if there a way to create or add as a widget a breadcrumb under the Menu?



    It is possible, it requires quite some editing though.

    First add this code to the bottom of functions.php


    function the_breadcrumb() {
    if (!is_home()) {
    echo '<a href="';
    echo get_option('home');
    echo '">';
    echo 'Home';
    echo "</a> » ";
    if (is_category() || is_single()) {
    if (is_single()) {
    echo " » ";
    } elseif (is_page()) {
    echo the_title();

    Then add this code in your header.php file after the line saying : wp_nav_menu($args); (line 105)

    echo "<div class="breadcrumbs">";
    echo "</div>";

    Then, in your light-skin.css file from your css folder (if you’re using the dark skin use dark-skin.css ..) change this:

    #top .nav, #top .avia_mega{
    border:1px solid #e1e1e1;
    background: #f8f8f8;

    To this:

    #top .nav, #top .avia_mega{
    border:1px solid #e1e1e1;
    background: #f8f8f8;

    And add this to the bottom of the file:

    padding: 128px 0 0 5px;

    This should do. Let me know if it worked, it did for me.


    Hi Chris,

    I really appreciate your help. It did work.

    A couple of odd things that are happening with this Breadcrumb that i still need help on.

    1. I am getting this image (�) in between my breadcrumb trail after home page see here : Home � KVCMF-Investment Options

    2. For this, can I send an image outside this post as that would visually explain the problem.




    please use services like: to post screenshots here. However I think the problem is following line in the code Chris provided above:

    echo "</a> » ";

    Try following code instread:

    echo "</a> &raquo; ";


    Brilliant! Dude . Thanks… appreciate the quick help.


    Hah, sorry for that, I copied it straight from my “smart” editor, sorry for the inconvenience. (Don’t forget to change both »’s in my code to Dude’s solution – just saying in case you didn’t figure it out ;) )

    Glad we could help.


    Hi Chris or Dude,

    This code for the breadcrumb is working fine but I need to move it below the Nav Bar line. Currently it sits between the Horizontal bar (stretched layout without image) and thus pushing the Nav menu bar up. Can you suggest a fix?


    Can you post a link to your website please – we can give you custom css code then :)


    Hi Dude,

    Since I am giving you the link, please see other areas that seem to be buggy.

    1. The Mini Slider in the footer has formatting issues when I place the short code in there. Note the Blue Grey dots location.

    2. I need to make the header larger and place and image across the header.

    3. And the bread crumb issue mentioned above where I wish to place it below the menu bar and below the grey line.

    4. Also, can I change the frame and tab colours of the Tab or Toggle Shortcodes? and How?

    Thanks a lots and I must say this theme is very professional and clean to work with.


    1) Add following code to css/custom.css:

    #top .widget .pos_h3{
    top: 0;

    2) You need to adjust the header area height – add following code to css/custom.css and adjust the height value:

    #header .container {
    height: 200px;

    Then add your image in header.php – write your image code after:

    <div class='container'>

    You can position the image by wrapping it in a div –

    <div class="banner">
    <img src="my-image.jpg" alt="" title="" />

    At least add following css to css/custom.css:

    .banner {
    position: absolute;
    right: 0px;
    top: 90px;

    Obviously you can adjust the css class and the position as you like.

    3) Add the breadcrumb code after following code in header.php and it will be displayed under the header area:

    <!-- end container_wrap_header -->

    4) Yes – add following css code to css/custom.css and adjust the color values:

    /*tabs and toggler and slider */
    .js_active .toggler{
    background:url("../images/skin1/toggle.png") no-repeat scroll 6px 6px #FFFFFF;
    border:1px solid #E1E1E1;

    .js_active #top .activeTitle{
    background: #f8f8f8 url('../images/skin1/toggle.png') no-repeat 6px -77px ;
    border:1px solid #ddd;

    .js_active .tab_content{
    background: #fff;
    border:1px solid #E1E1E1;

    .js_active .tab{
    border:1px solid #E1E1E1;

    .js_active #top .active_tab{
    background:none repeat scroll 0 0 #fff;

    border: 1px solid #E1E1E1;


    Hi Due, Thanks for all the help on these questions. Only one fails to work for me. Adding the breadcrumb code after “<!– end container_wrap_header –> still pushes the grey bar down. And also, moves the bread crumb to the left of page out of position. I will try to tackle it on my own but if you think of any reason why let me know.

    Thanks again.


    Strange because thebreadcrumb is part of the srrounding container which limits everything to 960px. Maybe you need to add positon:relative; to the container itself…


    Will try. Thanks. On another note: If I place a background image in the header, does that hide the logo and thus it’s functionality? At the moment I have a wide Ad header off to the side. Please comment.


    In essence, what I’d like to do is the same as the header on site you created ( except your image goes across the breadth of the screen.


    You can increase the z-index of the logo area – the logo will display on the top even if an image is behind it or overlaps it. Open up css/custom.css and add:

    #top .logo a, #top .logo a:hover{
    z-index: 100;


    I do not have:

    #top .nav, #top .avia_mega{

    border:1px solid #e1e1e1;


    background: #f8f8f8;


    but I am using Corona. Where is this in Corona?


    Hi metropolitandetail,

    This is a bit old and may not cross over correctly at all with Corona. I’m going to lock the thread so it doesn’t get additional attention with your bump :)

    Please make a new thread in regards to the issue.

Viewing 17 posts - 1 through 17 (of 17 total)

The topic ‘Breadcrumb in Broadscope’ is closed to new replies.