Docs

[kirk74]

Hello,

I have a couple of issues with breadcrumb that I hope will be quick and easy of you

Everything is up to date as this is a new site.

I am using X Child – with ICON

1 – SAFARI – on Safari, the breadcrumb can’t be seen at all … Safari must have different adding / height rendering… on the other browsers it looked a little tight, so I adde this CSS..

.x-breadcrumbs {
    padding-top: 10px;
    
}

but on Safari even this is still too short and it can’t be seen.. If you see the screen grab you will see what I mean.. the one on the left is Safari: http://pho.to/A9vOv

(When I added extra margin and padding to the top I could se it in Safari, but this makes it way to happy for other browsers)

2 – Is it possible to show anchor links in the breadcrumb menu?

EG: This is a separate page, so it has breadcrumb: http://zookihair.com/wordpress/how-to-choose-yours/

but this menu item has a submenu (send us a photo of you) which is an anchor to further down on the same page, and it looks strange how the breadcrumb disappears when this item is clicked, I need it to show breadcrumb of this anchor link.

Thank you so much

🙂

[Christopher]

Hi there,

I would like to check your site but it’s under construction mode, please provide us with login credentials.

Thanks.

[kirk74]

OOPS sorry! Forgot to do that . will send it privately now.

Thx so much for quick response!

[kirk74]

This reply has been marked as private.

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> CSS :

body.x-navbar-fixed-top-active .x-navbar-wrap {
    height: auto;
}

Hope it helps.

[kirk74]

Perfectly for the Safari issue, thanks so much. 🙂

Just with the other part of my question, how can I have anchor links included in the breadcrumb nav please?

[Christopher]

Hi there,

I’m sorry I missed the second one. Regretfully what you’re trying to achieve isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.
Thanks for understanding. Take care!

[kirk74]

No problem, thanbks anyway.. I was wondering of Yoast might be able to actualy, so I wil look at that ..

One little issue I have noticed with nav (sorry!) – I am not sure if this is related to the edits we just made or not … but now when the browser window is narrow, but before it is so narrow that it jumps to mobile menu, the buttons jump out of the navbar..IE I lose the BG pink colour .. how can I contain them please?

Thx SOOOO much, very grateful for your help 🙂

[Lely]

Hello There,

Thanks for writing in! This particular situation is simply a matter of reworking your content to properly fit the physical limitations presented by the theme (this is a consideration that must be taken into account with all themes and designs). It is the same principal applied to filling up a room with furniture—there is only so much that can fit into a given space. It happens because when the screen is narrow, the single row is not enough to display both the brand text and menu button.The following should be considered in these situations:

• Logo Size – longer logos will conflict with navigation items as you size your site down. If you are noticing a conflict, you may need to implement some CSS to size down your logo as viewports get smaller.
• Shorter Names – you should always shoot to have your top-level navigation links be as simple as possible. For example, if your link is “Learn About My Company,” Try using “About” instead. It conveys the same idea and will save you a ton of real estate.
• Rearrange – sometimes we want to put all of our links in the top-level navigation, but not all pages are created equally. Pages of lesser importance that pertain to a parent link might work well as a sub-menu instead.
• Less Links – even on more “complex” websites with lots of pages, there are always ways to combine information together to make things simpler, which also ensures that your user doesn’t have to click around for every granular piece of information. For example, you might have two top-level links called “About” and “Contact,” which could possibly be combined into one. This eliminates the need for extra links and makes things much simpler for your users to navigate. Less is more in information architecture.
• Appearance – fortunately X features plenty of options for adjusting the appearance of elements throughout your site, and the navbar is one of the more flexible elements. Try using a smaller font size if possible to save on a little real estate.

Other option is we can reduce the size of the brand text and spacing of the menu on this size:

@media all and (max-width: 1115px) and (min-width: 980px) {
.x-brand {
    font-size: 24px;
}
.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    padding-left: 4px;
    padding-right: 4px;
}
}

Hope this helps.

[kirk74]

thx so much, that’s great, I changed the padding ..

this selector line actually made it not work though at certain sizes (IE width considerations change again when the sidebar comes on :

@media all and (max-width: 1115px) and (min-width: 980px) {

so I removed it (didn’t seem to need it, mobile menu still looks OK without it)

Thanks SO MUCH 🙂

[Lely]

You’re welcome!

Cheers!

[kirk74]

Sorry me again!

Just noticed, that a strange thing is happening when I click anchor links ABOUT and CONTACT … the first time these are clicked from the main menu, they don;t position the anchor right at the top, but instead there is a slight margin .. then if I click them again, the positioning is correct.. it is strange .. it is not happening with the other pages (I am sure it is not a coincidence that these 2 anchor links are both on the homepage , so it must be something on the homepage doing it.. )

I did try disabling my CSS to see if that was causing it .. interestingly, when I did this, it fixed the issue for the CONTACT link, but not for the ABOUT link, which is higher up …??

Thx, sorry to bother you again!

Thx

[Christopher]

Hi there,

Please create a separate menu for one page navigation. To target sections inside one page navigation, use relative URLs, e.g : instead of http://zookihair.com/wordpress/#contact_link add #contact_link as menu URL.

Navigate to cornerstone settings tab/x settings and select ‘one page navigation’ menu. See the attachment.

Hope it helps.

[kirk74]

That worked, thanks – sorry that’s prob retty basic! But this is actually my first time doing a long page nav even tho I have done a few sites with X.

All working now, but one qurky thing I will ask you about, just for my learnign for uture.

I still had extar content at the top with the ABOUT link – which is an anchor link that goes to the start of the homepage just after the slider / menus … I was still getting a small part of the slider showing … to get around it I had to play with the margin setting for that section on Cornerstone .. I ended up adding 33pixels to the top margin of the ABOUT section (which is the grey panel that says “flip it flaunt it”) .. this has fixed it , but I am curious why I needed it?

Also, I am still only able to look at the site when I am logged in .. as we have the under construction plug in activated.. hopefully this adjustment still works without the login strip at the top .. I may need to tweak it later I’ll see.

Thx for your help you guys really are the best, I don;t have the confidence to use other themes anymore because I know with yours everything will just work and it will be quick .. and if not you guys are there to help.. AMAZING!

<3 X THEME

Kirstie 🙂

[kirk74]

I’m sorry! It’s not actually fixed, I thought it was … It’s just the ABOUT link that still has an issue… have checked it on 3 browsers.. and if you click in it from a different page (EG FAQ or SHOP).. then it jumps there BUT it includes the bottom of the slider (the bottom scroll arrow part) – see screenshot.

Once you are on that page, if you click it again it positions ABOUT at the top correctly.

As you instructed I have activated one page menu in Cornerstone , and I have made the links relative, EG, about anchor is on the homepage, so my link in MENU is:

/#about

You mentioned having a separate menu for one page menu, not sure what you mean by this, because in my case I have a mix of link to the main homepage but also links to other pages, so it is just one menu.

I feel like the issue is to do with the scroll arrow, because the extra part is just this amount?

I did disable my CSS to see f there was an issue there.. when I did this, the issue remained.. it was a small amount of extra space, but the extra space was still there.

Sorry to ask for help again but we just haven’t quite solved it yet!

Thx

[Author]

Posts