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;
}
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 am using the 2011 theme on wordpress and I would like to make the font that appears on the primary menu bigger and more stylish, is it possible for me to achieve this and if so, how to I go about it. sosytee.wordpress.com is the site i am working on and i would like to change the menu to a font similar to the orange letters in my banner as well as the size also
You can edit style.css file for this.
Please add child theme and edit the CSS file
Main menu:
#access ul {
font-size:20px; /* change it as per your need*/
}
Dropdown:
#access ul ul a { ... }
Firebug plugin for Firefox may help to inspect CSS style.
The free woocommerce theme artificer has an ugly home icon button that I would like to remove. Here is the page for the theme so you can see what the button looks like:
http://www.woothemes.com/products/artificer/
I tried searching around and found one person who said to make a new menu bar, which I did, although it still had the icon on it.
I think it looks OK actually :-)
But anyway, just add this to your custom CSS. You might be able to do this in the theme settings somewhere. If not, just set up a child theme and put this at the bottom of the CSS file:
#navigation ul.nav li.home a span {
background-image:none;
text-indent:0;
}
#navigation ul.nav li.home a {
display:none;
}
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 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;
}