I need help in changing the style of a li in selected state. I'm using a Custom wordpress template for my Pages. I dont wanna create several templates just to set the class of li on each pages to .selected.
anyway here is my code:
<nav class="topmenu">
<ul>
<?php wp_nav_menu( array( 'theme_location' => 'menu-2' ) ); ?>
</ul>
</nav>
I do have several pages and i added them in menu-2
You don't need to add .selected class to the menu. WordPress automatically adds following two classes to the current menu item. You can place the code of .selected class in these classes and it will work..
current-menu-item
current_page_item
Related
I have a custom wordpress theme and would like my menu to be a little different than Wordpress standards like this:
<div class="nav-bar">
<ul>
<li>
Home
Gallery
About Me
Contact Me
</li>
</ul>
</div>
I only manage to remove the <li> in my walker class but can't manage to move the links inside the 1 li tag.
Is there any way to achieve this?
Thank you in advance.
EDIT :
This was achieved now by using wp_get_nav_menu_items.
My wordpress menu has ::before elements that slide across when the menu items are hovered on, it looks great but the problem is when the before element slides across it covers the text and the way wordpress does the menu links is that by default the link only covers the text of the menu item and not the whole div.I don't have enough rep to take show pictures of the page structure but hopefully you can get the idea.
header.php code
<div class="navbar ">
<?php
$defaults = array(
'container' => 'div',
'container_class' => 'navbar',
'theme-location' =>'primary-menu',
'menu_class' => 'no-bullet',
'menu_class' => 'navitems',
);
wp_nav_menu( $defaults );
?>
How a menu item renders on dev tools
<li id="menu-item-82" class="nav-b icon-dice menu-item menu-item-type-post_type menu-item-
object-page current-menu-item page_item page-item-57 current_page_item menu-item-
82">
::before
Crafts
</li>
I really need some help on this, if you need me to add anything just comment
You can achieve this with the help of wp menu walker. It gives you the ability to manipulate the structure of the menu. You can refer following example:
http://shinraholdings.com/62/custom-nav-menu-walker-function/#example-code
I am trying to create a navigation menu for a custom Wordpress theme using the wp_nav_menu() function. However, an when I use the function and reload the webpage, an annoying <div> html element appears and uses the class I want to style my <ul> with. Has anyone came across this issue before and how can I fix this?
The structure at the moment is like this:
<div class="nav">
<ul>
<li>Menu Item</li>
</ul>
</div>
I would like it to look like this:
<ul class="nav">
<li>Menu Item</li>
</ul>
Many thanks
According to the docs for wp_nav_menu you can use wp_nav_menu(array('container' => false)) to disable the container.
Edit: You have also have to set the theme_location option so the fallback doesn't get triggered.
If you want to remove container div then, you need to mention theme location.
wp_nav_menu( array( 'theme_location' => 'secondary-menu','container' => 'none','menu'=>'Secondary') );
I am pretty new to wordpress and am having trouble creating the primary navigation for the site.
I am using wp-nav-menu to output my dynamic menu.
The code I would like to output is the following...
<ul class="mainNav">
<li>Home</li>
<li class="dropdown">
Treatments<span></span>
<ul>
<li>Body Treatments</li>
<li>Make Up</li>
<li>Skincare</li>
</ul>
</li>
<li>Latest News</li>
<li>Aftercare</li>
<li>Contact</li>
</ul>
The code I have used to get the menu above is this...
<?php wp_nav_menu(
array(
'menu' => 'Primary Navigation',
'items_wrap' => '<ul class="mainNav">%3$s</ul>'
)
); ?>
This gets me the main menu but I do not know how to get the <li> with the class of dropdown. I would also like to place a <span> inside one of the links, as you can see in my HTML code.
Any help would be greatly appreciated!
I have figured it out and will write it here in case anyone has the same problem.
In the wordpress admin, there is a link called screen options. Open this, and tick CSS classes, you can then add individual classes to menu items.
I have the following code to display all pages into a nav bar in Wordpress
<ul>
<?php wp_list_pages('title_li='); ?>
</ul>
Trying to figure out how to add a div class to each li?
You should be able to use link_before and link_after:
<ul>
<?php wp_list_pages('title_li=&link_before=<div class="myClass">&link_after=</div>'); ?>
</ul>
There's a section on styling the <li>s in the documentation.