Docs

[Geert S]

Dear X-men and women,

A couple of years ago you were kind enough to provide me with some custom CSS to keep menu items selected while on child pages:

.x-navbar-fixed-left .x-nav > li.current-page-ancestor > a {
-webkit-box-shadow: inset 8px 0 0 0 #e50202;
box-shadow: inset 8px 0 0 0 #e50202;
}

As you can probably see with your X-ray-css-vision, this applies to a site with the header on the left. But now fickle me wants the header on top and all of a sudden this custom CSS does not play well with others -the red bars still appear on the left of the selected menu item, instead of above or below where I would like them to be.

I hope you can help me once more!

Sincerely,

Geert Spekken

[Nico]

Hi There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks.

[Geert S]

This reply has been marked as private.

[Thai]

Hi There,

Please try with this CSS:

.x-navbar .desktop .x-nav > li.current-page-ancestor > a {
-webkit-box-shadow: inset 8px 0 0 0 #e50202;
box-shadow: inset 8px 0 0 0 #e50202;
}

Hope it helps 🙂

[Geert S]

Hi Thai,

Thank you for your response, but unfortunately it does not seem to work. Please let me try to explain more clearly. 🙂

The thing is, when I go to ‘Answers’ or ‘Others’, the relevant menu item keeps it nice red bar above it -to remind you where you are. But when you select a child page of Answers or Others -via the menu widget on the right- the red bar dissappears.

The original solution worked splendidly for a Fixed Header Left, but on Fixed Header Top it (obviuously, I guess) keeps marking the Menu Item with a vertical red bar, instead of a horizontal bar, one you go to a Child Page of the item.

Hope this helps you to help me!

[Rad]

Hi Geert,

That’s not how it works. Active menu status only applies to menu hierarchy, not with the child page.

For example, your “Answers” doesn’t have sub menu so even if you visit a child page of “Answers”, active or current-page-ancestor will not be applied.

Child page and sub-menu are different and menu styling only applies to menu hierarchy and not for page’s parent-child relationship.

If you wish to achieve that, then set your menu hierarchy correctly (sub-menu).

Thanks!

[Geert S]

Hi Chad,

Thanks for your reply. I understand what you’re telling me, but for aethetic reasons I don’t submenus (I want to keep it clean). The CSS in my initial post (see above) solved the problem very elegantly, by forcing the ancestor’s red marker, even on child pages. The only thing that needs to change now is that it shouldn’t be a vertical red bar, but a horizontal one.

I’m pretty sure that I should change something in this part: inset 8px 0 0 0 #e50202 in order to turn the vertical into a horizontal -but I’m quite the nitwit in CSS-country, so I was hoping you guys could point me in the right direction. I do understand this is above and beyond the call of duty, so if you can’t help me here, I’ll accept that and try figuring it out by myself. 🙂

I’m guessing that in “inset 8px 0 0 0 #e50202” 8px is the width of the bar, and I know #e50202 is the color. So if I can find out what the three zeros are, I may be able to figure it out.

[Christian]

Hey there,

Regretfully, further customization from here would be getting into custom development. This article http://www.w3schools.com/cssref/css3_pr_box-shadow.asp about box shadow might help.

Thanks.

[Geert S]

Hi Christian,
Thanks for being clear. I totally understand and will try to figure it out myself. 🙂

[Paul R]

You’re welcome! 🙂

[Author]

Posts