i am kind of beginner in CS
but here's my problem i am already mange to add hover for main menu but the problem i want to unlink the hover code from the sub menu " children menu "
as you can see http://egy-cash.com/beta/wordpress/ .. the hover code that apply to the main menu also apply to the drop-down menu
here 's the complete CSS file
http://pastebin.com/x9jY2qMu
you used this css:
.omega-nav-menu a:hover
that will affect any <a> inside your menu.
If insteed you use:
.omega-nav-menu > li > a:hover
you will target JUST the direct <a> children of your <li> element so it will work on your menu. try it out.
For future references this article will help you greetly with the basics of css:http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
Related
I just switched my site over to AMP using the free theme. I added the drop-down menu CSS code that scrolls and works well but I cannot figure out how to add the a:hover background color #cc3333 or isolate which element it should point to. Any suggestions would be appreciated.
https://partyfavorz.com
you can add this code to your css.
.amp-menu>li a:hover{
background: #cc3333;
}
I'm trying to make some nav menu items non-clickable if they have sub categories. I figured out how to do it for parent items but I'm have trouble with child items -making them non-clickable if they branch to lesser categories.
`enter code here`#nav-wrap .wsite-nav-0 a, .wsite-nav-1 a {pointer-events: none;};
Is sounds like what you are looking for is a parent selector, such a selector does not currently exist.
Some options:
Set a class for those you dont want to be clickable. Simple and to the point.
Use the href attibute as part of the selector, and set href="#".
Instructors [Other stuff here]
/*CSS*/
#navigaion a[href="#"] {pointer-events: none;}
Finally re-think. I always try to have a page for everything in my menus. Have a general instructors page with a paragraph or two about the group, then links to the indidvidual instructots.
How can I style my sub menu items? I have a custom made template, one module and one main menu, the sub menu items are all set as a child of the main menu.
My problem is that I don't know what to refer to when styling them. I could style all "nav-child unstyled small" or make classes using the li class number, i.e. ".item-134"
(I got these tags from the source code displayed by my browser).
Neither of these seem to be nice solution, is there any nicer way to do this?
David Fritsch is correct by using the menu-id classes to help select. Another alternative if you're worried about changing ID numbers is to use CSS3 nth-child selectors. You'll end up with something like:
.nav > li:nth-child(3) .nav-child {}
This will select the 3rd top-level item and then the child-items beneath it, and it's ID-free.
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.