I'm creating a side-bar menu for a site, which should only show sub-menus in a currently selected page. The site is in wordpress. I have managed to hide inactive sub-menu items for pages that are not selected using this css:
.sub-menu { display: none; }
.current_page_item .sub-menu, .current_page_parent .sub-menu { display: block;}
But how can I hide the main menu items but still display their sub-menus? Here's a link to the site NOTE: I want to hide ALL the main menu items so that I only have the sub-menus
Help would be much appreciated!
This will hide the current item anchor.
.current_page_item > a {display:none;}
(You may want to adjust the left margin on the sub items depending on the look you're going for.)
Related
Here is the menu I am working at:
I have added submenu items under a menu item.
But it does not work at all. How can I add submenu items? Or at least how do I check if the menu I am using can do that?
Here is the page I am working at: http://darnicgaz.md/?lang=en_us
Ok i have tested your site. submenu displaying fine in mobile and display none in web view.
style.css line no 1110
#primary-menu ul ul, #primary-menu ul li .mega-menu-content {
display:none
}
remove that display :none from this style
This seems like a fairly straightforward thing but can't find any tutorial on it.
I have a top menu that changes background colour then one of the menu items is selected. The CSS looks like this:
.nav > li > a:hover,
.nav > li > a.selected {
background-color: #F7A379;
}
However some pages have a side menu, with a class .left-nav and when I click on those links the background styling disappears from the parent nav. Is it possible to keep the styling above when the child page is selected? If so, what would the CSS need to be?
I came across this site http://northerly.com.au/ and I am wondering how it is possible to make an top menu li active while hovering over it's submenu. In this case it seems like there is no js script to add active class. How it is done then? Thank you
In fact, that's not the top menu li which is active when you're hovering on the sub menu. There is a sibling SPAN before submenu element, as a result of hovering to sub menu, you are also hovering the container li element.
top li has two elements:
a SPAN has top menu title
a Sub Menu
Use a CSS selector like this:
li:hover span {/*span is active!*/ }
See a simple demo here.
I'm styling the top menu of the WordPress TwentyTen theme.
I want all sub-menus of the first menu item to be 200px wide,
all submenus of the second menu item to be 250px wide,
and all submenus of the third menu item to be 300px wide.
For example, the menu has the following structure:
ABOUT
Mission
History
People
SERVICES
Service1
Service2
Service3
PRODUCTS
Product1
Product2
Product3
I want all items under ABOUT to be 200px wide, all items under SERVICES to be 250px wide, and all items under PRODUCTS to be 300px wide.
How can I select them in WordPress using only CSS? (Considering that the menu is generated dynamically and the header only has wp_nav_menu command?)
Assuming that you're using custom menu structure defined under the Appearance/Menus admin interface page, you can add CSS classes to each submenu item from there.
Go to the admin page, then choose "Screen Options" at the top. Under there, you'll find a series of tickboxes under "Show advanced menu properties". One of those is "CSS Classes". Once you've ticked that box, you should find that each of your submenu options panes now has a "CSS Classes (optional)" textbox where you can add one or more classes.
Once that's done, you can style away to your heart's content...
Use a css selector that matches each level. Like this:
#access ul {
width: 200px;
}
#access ul ul {
width: 250px;
}
#access ul ul ul {
width: 300px;
}
I have a drop down menu in only CSS and no JAVASCRIPT and I'm having a problem keeping the top (main menu item) highlighted when I move the cursor over the sub menu items. You can see the menu here http://www.codedecks.com/cssnav.html.
If you hover over "Kids" and move your cursor down, as soon as your over "Girls" the top "Kids" looses the highlight.
Any suggestion would be greatly appreciated! Thanks in advance
Change #nav > li a:hover to #nav > li:hover a in your CSS.
Since you have the hidden second-level ul being shown when the top-level li is hovered, it makes sense to have the top-level a get the hover style at the same time. When you move your mouse over the second-level menu links, the a still looks active. li:hover applies even when you mouse over the child elements of the li, even if they're positioned so that they look like they're outside of the li's box.
For me it worked like this, without the >:
#navigation li:hover a {
background-color:#012A5E;
color:#F1F1F1;
}
You're currently setting the hover state on the A tag, you need to (also) set it on the LI tag. When you are over a child UL, you are no longer over the A, but you are still over the LI. Try this:
#nav li hover {
background-color:#F4F4F4;
color:#543056;