I am currently using wp_nav_menu to generate my nav menu. Although everything is working and menu highlighting is working, how do you get child pages to be highlighted as well?
For example, I have a menu item named "Page" and it has 3 child pages under that. So when I am in any of the child pages, I want the main Page to still be highlighted...how is that possible with using wp_nav_menu..?
The body_class function which WordPress has can help you out here.
http://codex.wordpress.org/Function_Reference/body_class
What you'll want is current-menu-parent which you can utilise in your CSS. Not particularly well documented as far as I can tell, but this article helps:
http://www.designisphilosophy.com/tutorials/highlight-current-page-or-category/
Wordpress will give the current page the class 'current-menu-item' so just add the css you want to that. e.g.
.current-menu-item {
background: #0077CC;
}
Edit:- You can target the child menu items with
.sub-menu .current-menu-item {
background: #0077CC;
}
Edit2:- Use this to hilight the parent menu item when on a sub page
.current-menu-parent {
background: #0077CC;
}
Related
I'm trying to find some CSS to help me stop having "post page categories" from showing up on the hamburger/toggle menu on wordpress. For example here, i'm making www.byjgk.com and when the hamburger menu is clicked, and gives me the dropdown, besides the normal menu items, i keep seeing "uncategorized" below the normal menu as additional menu items (or, if I add any categories to a post, those categories below the menu items.) It's driving me crazy and i can't figure out how to stop it! Please help, thanks!
FYI - I tried the follow two bits of CSS, but they didn't seem to do anything:
.hamburger-panel .category-links { display: none; }
.hamburger-panel .panel-body-contents > hr { display: none; }
And:
.menu-panel li a.widget-link[href="/categories"] {
display: none;
}
You can check for the same in theme settings and mobile menu if you want to do it with CSS try this code.
.widget_categories
{
display:none!important;
}
I created a menu and sub menus on my WordPress site. The theme was made by me from scratch. However, the submenus are always on display (instead of hidden when not active or hovered).
How do I make the submenus display only on hover? Does this kind of feature not exist in WordPress by default and need more code tweaking?
Yes. That is the expected behaviour. WordPress functions just output the code needed for the menu. We'll have to style the menu ourselves. Particularly, when the theme is coded from scratch. You could use the following CSS:
.sub-menu {
display: none;
}
li:hover > .sub-menu {
display: block;
}
I've used custom CSS to create a strike-through effect for active menu items on my wordpress site: http://www.sekoul.com/
This is the code that I use to do this:
/* active menu item color */
.et_color_scheme_orange #top-menu li.current-menu-item > a {
color: #4a4a4a !important;
text-decoration: line-through !important;
}
However, on certain pages (ones which are generated by WP plugins), this effect doesn't work: http://www.sekoul.com/reading-list/
When I inspect the code, I can see that the ID's are not the same on these pages, but I can't seem to figure out which ID/class to apply the effect to. Any idea why this is happening / what I can do to select the appropriate ID/class ?
It's missing the .current-menu-item class because you're using a custom link. I'm assuming that "BOOKS" is a custom post type archive page, right?
If you need to have an active state on a custom post type archive page, you could try this solution that worked great for me: https://stackoverflow.com/a/22602901/4303385
It'll add a metabox on the Appearance > menu with custom posts type archive page with active state support.
I'm designing a new website, but I currently have the following problem:
In the menu, when the I open a page with a sub menu, and then hover a menu item without sub menu I want to display an empty gray bar. But I've got no clue how to do this.
To reproduce this go to this page: http://www.kvvikingvenlo.nl/joomla/nl/aluminium-gietwerk.html and then hover over the home item in the menu. (Home has no sub menu, so I want the gray bar to be empty.)
Edit
I'm sorry, my question seems to be quite hard to understand. Lets try again:
On the web page http://www.kvvikingvenlo.nl/joomla/nl/aluminium-gietwerk.html there is a menu which is always displays the current sub menu, until you hover a different sub menu. This part is already working.
But when you hover Home, you will still see:"ONTWIKKELING, HOGEDRUK SPUITGIETEN, CNC-NABEWERKING and MONTAGE".
These are the sub menu items of the parent "Processen" (which is the current active one)
Because home does not have any sub menu items, i want this bar to be empty instead.
i think you would have to do this through javascript, you have you .active on your ul and that is the parent you your li what is the parent to your a so in order to change the child tag to display as .active you would do this through javascript. i hope that makes sense.
If I understood correctly, if there is no submenu to the menu section, you just want to display the grey bar beneath.
This menu is being done with nested UL and LI tags with CSS, it is a very common technique.
I should warn you though, that the effect in the page you linked doesn't do what you need in IE <9. There are a few pure CSS menu examples that achieve this purpose quite easily.
If you don't want (or know) how to change it because it would mean messing with Joomla's inner workings, what I think you can do is: first create an empty SPAN inside a "fake" LI under HOME, then, set that specific (via class or id attribute in the HTML) SPAN with width equal to the gray bar. then set display:block; to the SPAN. This has to be done when the :hover event occurs in the parent class of the SPAN.
For example:
If you set the class of the SPAN tag to hideme:
.menumenu li ul li .hideme {
width: [width of the grey bar];
}
.menumenu li:hover ul li .hideme { display:block; }
It's not pretty, but it should work.
EDIT I had the right idea, but wrong execution (too early in the morning)
What you actually need is to give a unique identifier to a fake UL under the HOME LI (ie fakeUL), nest a LI inside of it to hold a SPAN tag, define the size of that SPAN tag with the width property, and then the CSS could be something like:
.menumenu li .fakeUL li span {
width: [width of the grey bar];
}
.menumenu li:hover .fakeUL li span { display:block; }
I ended up in making a template override in joomla so that it inserted an empty ul tag in the menu. I thought this would be the cleanest option I had.
To make a template override copy the file \modules\mod_mainmenu\tmpl\default.php to \templates\YOURTEMPLATE\html\mod_mainmenu\default.php
Then find this code in the file you copied:
if (isset($path) && $node->attributes('id') == $path[0]) {
$node->addAttribute('id', 'current');
} else {
$node->removeAttribute('id');
}
$node->removeAttribute('rel');
$node->removeAttribute('level');
$node->removeAttribute('access');
And add these lines just BEFORE them.
if (($node->name() == 'li') && !isset($node->ul)) {
$node->addChild('ul ');
$node->addChild('/ul');
}
Hope I helped anyone!
I have a basic menu and some of the menu items have submenus.
I have very little experience with wordpress and don't have time to dive deeper into the details right now. So my question is, what is the simplest way to highlight the top menu item when the use navigates to one of the submenu pages. (I tried using both javascript and also pure css to set the color property by element id and by using the "current-cat-parent" class but neither worked).
Any help is greatly appreciated.
Note: I am using a theme called chameleon.
you can assign current-menu-item class to .current-menu-ancestor class like
.main_menu li.current-menu-item a, .main_menu li.current-menu-ancestor a{
color: #777777 !important; /* highlight color */
}
It will highlight parent page menu
Please refer this page
You can insert the following code in the theme’s footer.php file right before the closing body tag .
<!-- Highlight parent page link when on child page -->
<?php if (is_page()) { // displaying a child page ?>
<script type="text/javascript">
jQuery("li.current-page-ancestor").addClass('current-menu-item');
</script>
<?php } ?>
The beauty of this is its in PHP so the code's dynamic. What it does is simply add another native WordPress nav li class that makes the link of the current page active.
I wrote a short post here explaining how it works: How to keep parent page navigation link highlighted when viewing a child/sub page!
Feel free to let me know if you have questions about it.
I had a bit of a problem editing this but found an easy solution.
I am using the Wordpress Storefront theme, just paste this into your child theme's style.css file:
li.current-menu-parent >a {
color:red !important;
}
Interesting. Your solution highlighted the parent but not the current child. But it put me on the right path and in the end, this was what I needed.
li.current-menu-parent >a, .current-menu-item >a {
color: red !important;
}
WordPress 5.7
Tested and Working, 2021
Year 2021. If any of you still looking for the solution, then here it is.
This will highlight the parent and its child. If no child menu then the parent will get highlighted. Remember !important is required.
.current-menu-parent > a,
.current-menu-item a {
color: blue !important; /* Important is required */
}
.current-menu-ancestor did not work for me. .current-page-ancestor did.
This worked for me. The following CSS will allow you to style the active menu... down to three menus deep.
.current-menu-ancestor{ background:RED !important; }
.current_page_parent{background:GREEN !important;}
.active{background:YELLOW !important;}
The menu button that represents the currently active page will be
YELLOW,
If the button representing the currently active page is nested, its
parent will be GREEN... else the Top-Level button on your menu will be GREEN.
And most importantly (no matter how many levels of nesting appear in
your menu) Any element with a class of .current-menu-ancestor
will be styled with a RED background.
It is also possible to ONLY style the .current-menu-ancestor and any parent menu-item will be styled.