I am trying to modify sub-menus of a Wordpress site. Wordpress generates the following HTML code for the sub-menus
<ul class="sub-menu" style="top: 50px; visibility: visible; left: 0px; width: 202px; display: none;">
<li class="menuitem123 menu-item menu-item-type-post_type menu-item-object-page menu-item-123" id="menu-item-123">Link Name</li>
<!-- other li elements follow -->
</ul>
Here's my invocation of the wp_nav_menu
<?php if(has_nav_menu('secondary')):?>
<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'menu_container' => 'div', 'container_id' => 'secondary-menu','menu_class' => '', 'theme_location' => 'secondary'));?>
<?php endif;?>
The problem is, I want to customize the inline style (or preferably move it out into a css file) that Wordpress is generating for the ul element, mainly the width. I have searched high and low but cannot find from where Wordpress is picking up the inline style and inserting it. I need to get rid of the inline style because I need to set different width for other sub-menus.
I could adapt the answer given on this wp_nav_menu change sub-menu class name? link which suggests sub classing the Wordpress Walker class.
Please can someone provide some pointers on what else should I be checking to see from where Wordpress is picking up the inline style?
Many thanks.
WordPress itself does not generate any inline styles, so most probably the deal is in your plugins or theme installed. According to your code, you do not use customized walkers, so the only deal may be in filters attached to standard Walker_Nav_Menu (see nav-menu-template.php file, at the beginning). Corresponding filters are most probably: nav_menu_css_class, nav_menu_item_id, walker_nav_menu_start_el.
Related
I have been writing a wordpress theme from scratch and I have run into a problem with my top drop down menu. This drop down worked in html but didn't function once I brought everything into wordpress. Here is the code that I have inputed into my header.php
<div class="nav">
<ul >
<?php wp_nav_menu(array('menu' => 'Main Nav Menu')); ?>
</ul>
</div>
For some reason none of my submenu items are populating and all of my main menu items are just stacked on top of each other in the left side of the page. Any help would be great
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 am making a wordpress news site. I use the new wp menu 3.0 where every menu item links to a template page. On those pages i display posts from custom loops. for instance lets say i have the page breaking news that displays the posts from the breaking news category. When i click on that link it takes me to the breaking news page and from there when i view single post from that category i want the page breaking news to be highlighted.
I have searched and found that wordpress assings ancestor classes to the links but thats not the case for me since i think that only works with categories as the navigation and im using pages.
Can anyone help me?
Thanks :)
are you using firebug or the inspectors built into chrome and safari. with those you can directly see what classes are available for you to style. maybe you already know that. If there are no classes to style there are hooks you can use to add a class. can you provide a url to your site?
Try the following in header.php...
<?php
/**
* Do this to #access in header.php
*/
?>
<nav id="access" role="navigation" class="<?php
if(in_category('cat-1')) echo 'post-in-cat-1 ';
if(in_category('cat-2')) echo 'post-in-cat-2 ';
if(in_category('cat-3')) echo 'post-in-cat-3 ';
?>">
Then in your stylesheet add this:
/**
* look for the menu-item-# generated by the menu in your theme and use that.
*/
.post-in-cat-1 .menu-item-1234,
.post-in-cat-2 .menu-item-1235,
.post-in-cat-3 .menu-item-1236
{
color:#FFF; // or whatever color you want :)
}
That's just my first thought, totally untested, so let me know if it works at all. I'm guessing that it will work based on this.
It's not as dynamic as real category pages since you have to set up the categories yourself and add the menu-item numbers to your CSS as needed. So there might be a more clever solution. But, without testing it myself, this is what I would try.
1. In css file of ur website,include this line where
- nav is the id of <nav> tag,where i have mentioned my menus in header.php
<nav id="nav">
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav>
#nav li.current_page_item a {
-moz-border-radius: 3px 3px 3px 3px;
background-color: #82BD42;
color: #FFFFFF !important;
padding: 10px;
text-decoration: none;
}
2. We can change background-color,color and padding to our choose.
I am new to making WordPress themes but I have managed to include the navigation menu list in my theme. I want to turn it into a horizontal drop-down menu using CSS but I am having all kinds of trouble figuring it out.
I have used this code:
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
To output this:
<div id="nav-container">
<div class="menu">
<ul>
<li class="current_page_item">Current Page</li>
<li class="page_item page-item-58">Menu Item #1
<ul class='children'>
<li class="page_item page-item-62">Child Item #1</li>
<li class="page_item page-item-60">Child Item #2</li>
</ul>
</li>
</ul>
</div>
</div>
Can someone please tell me, or point me in the right direction for turning this into a drop down menu? As a note I do not know how to change the way the nav list is output either :(.
I know this might be a big ask but any help would be greatly appreciated!
Thanks
Ben
Lots of docs and examples available: http://codex.wordpress.org/Navigation_Menus and http://justintadlock.com/archives/2010/06/01/goodbye-headaches-hello-menus and http://codex.wordpress.org/Function_Reference/wp_nav_menu
Making dropdown menus in wordpress with their "menus" in the dashboard is extremely easy. You can simply make your menu and indent any of the items you would want inside a dropdown by simply dragging it a little bit to the right (it snaps into place) and wordpress by default will add the .dropdown class that you can then style with CSS however you want.
If you need help beyond that with the CSS then it's probably a good idea to learn how to make CSS dropdown menus so you can compliment it with this.
Cheers.
I am building a site on the WordPress Twenty Ten theme. I would like to style the navigation bar so the tabs are spread out across the top but am at a bit of a loss.
Here is the navbar: http://screencast.com/t/AbIPglmGtQ
Here is the CSS: http://pastebin.com/pSnCGcrQ
Also, would anyone have a clue as to adding segmentation between the tabs ie" Home | About | Services?
Any help would be much appreciated. Would love to put a fork in this project before the holidays!
Alex
First of all, you'll probably want to create a Child Theme, because otherwise when TwentyTen is updated, you'll lose all of your customizations. As far as spacing them out - it depends... do you want them to be spaced without expanding the current width of each link, or do you want to expand each link's width also? Kind of confusing, but you can expand it by increasing the margin to something like:
margin: 0 15px;
But, that'll just spread them out more - the size of the links will stay the same. To change the size of the links, adjust the padding as well. I'd do a little combination of both.
For the separator, in header.php, appx line 85, you'll see something like:
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
change that to:
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'after' => '|', 'theme_location' => 'primary' ) ); ?>
That should add a | after each link on there. Hope that helps. Let us know!