Breadcrumbs Display Questions

[ajonesx]

Hi Xters,

Considering adding breadcrumbs to my website… I’m guessing the breadcrumb bar has inherited the transparency that was coded into the menu bar (so the header image is the only background element at the top of the page… which is good lol!)

3 Questions

1. What is the global code to remove the shading at the top of the breadcrumb bar - so it’s not separated from the menu bar. I found the following code in another post:

.x-breadcrumb-wrap {
background-color: red
}

, and modified it to several variations, but none worked:

.x-breadcrumb-wrap {
border: none;
or / border-top: none; etc;
}

2. The homepage’s ‘house icon’ in the breadcrumb bar is too small to see… can word ‘HOME’ be added so it reads [house icon / HOME] (or [HOME] if just replacing the house icon is less of an issue?)

3. Is it possible to change the breadcrumb bar’s location so it appears right above the menu bar (with complete transparency so the surf & sand header background image is uninterrupted)… if so, how?

Thanks

[Joao]

Hi There,

Please add the following code to Theme Options CSS

.x-breadcrumb-wrap, .x-navbar {

    box-shadow: none;
    border: 0px;
}

.x-breadcrumbs span.home {

    font-size: 20px;
}

3- That is not a eature offered by X it could be achieved with PRO or with custom development on X.

Hope it helps

[ajonesx]

Hi All…

1) This worked, thanks!

.x-breadcrumb-wrap, .x-navbar {
box-shadow: none;
border: 0px;
}

2) Question was not how to make tiny house icon bigger (which the code below does)…

.x-breadcrumbs span.home {
font-size: 20px;
}
(however it is useful to adjust the text size of all breadcrumbs if ‘span.home’ is removed from the code)

The question was how to replace the (house icon) with text that says (HOME) or to add the word ‘HOME’ after the icon (house icon / HOME) if possible?

UPDATE: Solved this issue using the following code:

.x-breadcrumbs span.home:after {
content: " HOME";
}

3) I understand your limitations lol! Can you identify the CSS elements that I’ll need to play with to move the Breadcrumbs Bar above the Nav (menu) Bar… I’m thinking something along the lines of ‘x-navbar / position: bottom / absoute or important’… or is this more likely to be a JS or php issue?

As you can tell I’m new to all this.

Thanks again for the excellent support!

[nico]

Hi @ajonesx,

For your concern, to be sure, please share us your URL and a screenshot of your breadcrumbs bar that you want to customize.

Once we can fully check your setup, that is the time we could share a code or to confirm if it is a JS or PHP issue.

Thank you.

[ajonesx]

Hi Xters…

Thanks for the help! What I’d like to do is move the breadcrumbs bar so it’s below my photo/name/logo (which were created in logo bar widgets,) but above the main menu.

As you can see the previous code modifications took care of the other issues in this post regarding the border and text for the breadcrumbs bar.

Thank you

[lely]

Hi There,

Thank you for the clarification.
Look for wp-header.php from this folder of your installation:
wp-content\themes\x\framework\legacy\cranium\headers\views\integrity.
Copy that file on the same folder on your child theme here:
wp-content\themes\x-child\framework\legacy\cranium\headers\views\integrity
You might need to create the folder on your child theme if it doesn’t exist yet.
Then open the copied file. Look for the following code on line 17 and 18:

    <?php x_get_view( 'global', '_navbar' ); ?>
    <?php x_get_view( 'integrity', '_breadcrumbs' ); ?>
 

Switch the position to move breadcrumbs on top of navigation like this:

    <?php x_get_view( 'integrity', '_breadcrumbs' ); ?>
    <?php x_get_view( 'global', '_navbar' ); ?>
   

Hope this helps.

[ajonesx]

Hi Lely…

I tried the code on my ‘new.’ development site and got this result (as you can see no menu has been assigned yet:)

Was looking to get the breadcrumbs bar between the menu bar and the ‘photo/info/social/logo’ elements if possible.

Is there a way to split what I’m guessing are the logo bar and nav bar elements to position the breadcrumbs bar wetween them? Once again, the ‘photo/info/social/logo’ elements were constructed in the wordpress ‘logobar widget placement’ boxes in ‘widgets.’

I’d like to avoid a solution that requires moving these ‘photo/info/social/logo’ elements into the topbar (which I’d like to keep disabled) for several reasons:

1. would like to save the topbar for short-term announcements, promos, etc.

2. would very much like to not have to figure out all the code to reposition all these elements in the topbar and rewrite all the responsive breakpoints for them (not to mention hunting down and eliminating the code for the current logobar build on these elements.)

3. would also have the issue of getting the background ‘surf & sand’ header image to seamlessly display through a transparent topbar bg.

Thanks again for your help!

[lely]

Hello There,

I have looked again and found why it is not working as expected. I missed some part on my initial checking. I can see you have this code on your child theme functions.php file to display that part:

add_action('x_after_view_global__brand', function(){ 

echo '<div class="logobar-widget-area">';
dynamic_sidebar( "logobar-sidebar" );
echo '</div><style>.logobar-widget-area { float: left; }</style>';

});

Then you have custom CSS too to display logo and that sidebar content side by side.

Let’s start again.
1.) Noted.
2.) With what you have added, and this thing you want to add more needs this at some point. We can guide you on how it is structured but adding custom codes/structure means you have to dig in on its responsiveness too.

Open this file:
wp-content\themes\x\framework\legacy\cranium\headers\views\global\_navbar.php -> This is the template file that handles your logo and navigation. Then the line of code you have on your child theme functions.php means adding the sidebar after the content of _brand.php or after this part <?php x_get_view( 'global', '_brand' ); ?> See below image:

Copy this file:
wp-content\themes\x\framework\legacy\cranium\headers\views\global\_navbar.php to your child theme here:
wp-content\themes\x-child\framework\legacy\cranium\headers\views\global\_navbar.php Apply the suggestion as discuss on the image.

Since we have added the breadcrumbs on that file, we have to remove it from it’s original location here wp-header.php file as discussed on previous reply. Copy that file on your child theme and then remove this line
<?php x_get_view( 'integrity', '_breadcrumbs' ); ?>

If this is too much for you, it is best to consult a web developer. We can always guide you how everything is structured, but the entire customization is still outside the scope of our support. Thank you for understanding