I have added a new custom menu but sub menus not showing in hierarchical.
I want to display animal and automotive categories under More.
Anyone can help me?
The page I need help with: bit.ly/2Dz5EWB
First of all your sub-menu is opening on hovering <div class="cat-menu"> this element.
You need to remove this kind of CSS.
There is one unique class in list item .menu-item-has-children which has sub-menu for categories.
You just need to set hover CSS for this list item like:
.cat-menu ul li.menu-item-has-children:hover .sub-menu{
display:block;
}
<ul class="sub-menu"> is inside the <li class="menu-item-has-children"> this element so you need to set CSS like above code.
I hope this will be helpful for you.
Related
after I spent two hours trying to figure this out by myself, I feel it's the right time to ask people who actually know how to code.
What is my situation
I'm building a WordPress theme and I struggle to make the navigation work the way I want it. What I have in mind looks like this:
sketch of home page
Since it is WordPress menu (and because I plan to adapt the looks throughout the website), I need it to be a list. But I struggle to make the first-level items appear as headings and the second-level items as items below.
This is as far as I got:
https://jsfiddle.net/grysom/bpe924du/
I tried random stuff using flexbox properties + adding a break using :after selector with content: "\A"; but with no luck.
Do you have an idea how to do it? Is it even possible?
Thank you in advance for your ideas!
Have a nice day
grysom
You'll want the 2nd level list <ul> to be inside of the <li>:
<ul>
<li>
Pro veřejnost
<ul>
<li>Co je ergoterapie</li>
<li>Kdo je ergoterapeut</li>
<li>Seznam zařízení</li>
<li>Etický kodex</li>
</ul>
</li>
<li>
Praxe
<ul>
<li>Nabídky práce</li>
<li>Vychytávky a tipy</li>
<li>Legislativa</li>
</ul>
</li>
</ul>
I've updated your jsfiddle: https://jsfiddle.net/grysom/bpe924du/ but you'll need to adjust your styles a bit to differentiate the levels.
Logic escapes me for two days on what I'm trying to achieve, which is targeting certain class elements in the wordpress menu with CSS. It is usually simple really for me, but something (small usually) is making me battle.
I need to apply a small background image behind the menu item text to the "active" or "current" menu item. But this must apply ONLY to the parent menu items (not on any of the child/submenu dropdown items). Applying the background image is fine, so that's not the issue. It's targeting only on the parent item that's the issue.
I've tried variations of the following CSS (forgot about the background image for now, I'm keeping it simple here, to resolve the targeting) to make the current/active PARENT menu item text turn red:
.main-navigation div ul li.current-menu-parent a:not(.sub-menu)
{color: red !important;}
(I have commented out this custom CSS on the website, to prevent confusion)
The :not pseudo I thought would do the trick but it's possibly my failure at syntax, even though I googled it, to which I may learn something further about CSS today, when resolved.
It's not working how I expect it to. Any ideas? I might revert back here again if I battle with the background image, but I suspect once the 'CSS targeting' is worked out, that shouldn't be an issue to apply.
Thank you brainy people :)
The answer is more simple than you think: use the > CSS selector. See articles here and here.
For example:
Codepen
/* Target top level only */
.my_navigation > li > a {
background-color: yellow;
}
/* Or perhaps target only top-level with children */
.my_navigation > .has_children > a {
background-color: orange;
}
<div>
<h1>Only top-level parents get styled:</h1>
<ul class="my_navigation">
<li>Link 1</li>
<li class="current_link has_children">
Link 2
<ul>
<li>Link 2a</li>
<li class="current_link has_children">Link 2b
<ul>
<li>Link I</li>
<li>Link II</li>
</ul>
</li>
<li>Link 2c</li>
<li>Link 2d</li>
</ul>
</li>
<li>
Link 3
<ul>
<li>Link 3a</li>
<li>Link 3b</li>
</ul>
</li>
<li><a href="#">Link 4</li>
</ul>
</div>
Using Javascript (e.g. jQuery) is overkill in this case. It would be a different story if you're using an eventlistener and need to get the parent of the clicked target; in that case you DO need JS because as others have mentioned CSS doesn't yet have a parent selector yet (but it seems like it's coming in CSS4).
However here you just need to style items on page rendering, and WP provides plethora of classes to work with. Also: Do a Google search for "wordpress menu class walker function" and you can generate some more classes, like identify each level of menu e.g. ".top-level", ".second-level", etc.
try below, this will select the a tag which is direct child of li.current-menu-parent.
.main-navigation div ul li.current-menu-parent > a{color: red !important;}
Seems jQuery was the way to go for the solution, based on the thread Is there a CSS parent selector? posted by #Paulie_D, thank you!
My jQuery solution below targeting only the active parent menu item and inserting a small background image on the <li> menu tag. You can see the yellow 'paint swish' image happening in the screenshot below.
The .not is used to exclude targeting the dropdown submenu items (their class is .sub-menu):
$('.main-navigation .current-menu-item, .main-navigation .current-menu-parent').not('.sub-menu li').css(
{
'background-image':'url(PATH TO YOUR IMAGE HERE)',
'background-size': '100% 50px',
'background-repeat': 'no-repeat',
'background-position': 'center'
}
);
Thanks for your input. I learnt something today.
how can I change the element structure of the menu in wordpress themes? like I want to change the structure into this:
<nav id="mymenu" class="menu"> <!-- here the li tags with links --></nav>
just want to replace the UL tags with the nav tags which is html5. Thanks.
You will have to use the items_wrap parameter in wp_nav_menu to achieve this.
There is an example in this page
http://codex.wordpress.org/Function_Reference/wp_nav_menu
under the heading "Removing the ul wrap"
It's worth noting that you wouldn't want to use <li></li> elements outside of a <ul> or <ol> element - it's not valid HTML. What you probably want to do is wrap the list in a nav tag.
I'm assuming, since you're asking this question, that you're using WP's auto-generated menu? You can change a bunch of variables - check the WordPress Codex (always): http://codex.wordpress.org/Function_Reference/wp_nav_menu
I have this menu:
<div id="menu-home">
<ul>
<li> a </li>
</ul>
</div>
When I am on the test.php page that corresponds to test menu, I need it's li to have a different style..
I tried
#menu-home ul li:active
but it didn't work..
Thanks
There is no :active state for <li>
Instead you can do it with PHP.
<div id="menu-home">
<ul>
<li <?php if (page is current page) echo ' class="active"';?>> a </li>
</ul>
</div>
And in the CSS, you can give this:
#menu-home ul li.active {}
The <li> element does not have an active state, since it is just meant to be a (stateless) bullet point. The selector :active can only be used on a link; an example can be found here.
However, :active will only highlight the link as it is clicked. After that, it performs whatever action and/or navigation it is set to do and then the link will be visited. From there on you can't tell it apart from the other already visited pages that you are not currently viewing and it does not become "unvisited" again, even if you navigate to another page. So this does not do what you intend.
Instead, I would create a class .active in your CSS where you can define all your custom styling. Then, the PHP that generates your pages needs to take care of setting the class correctly on the selected menu item, ie.: attach class="active" it either to the <li> or the <a> whenever the menu is build.
(yeah, just see Praveen's answer for the code ^^)
http://weddings.agapewith.us/photos/caleb-promise
Notice the page appears under blog. They are a custom post-type of photos so I want to show each posting as children of photos. What is happening?
What I ended up doing is using conditionals to figure out if the item was a custom-post-type and if so a CSS class is added to the body. Using the CSS class I un-highlighted the blog and highlighted the post-type-parent
The class "current_page_parent" is currently attached to the Blog menu item. Can you move it to the Photo menu item as I've done below? This should fix your problem.
<li id="menu-item-18" class="nav-photos menu-item menu-item-type-post_type menu-item-18">Photo</li>
<li id="menu-item-149" class="current_page_parent nav-blog menu-item menu-item-type-post_type current_page_parent menu-item-149">Blog</li>
Remove "current_page_parent" from the "Blog" li class.
Insert "current_page_parent" on the "Photo" li class.
The CSS styling for the menu items is determined by the numarous class names that are bound to the menus. By moving them around, you effectively apply different CSS rules to different elements.