I'm using this theme for a site: http://demo.woothemes.com/?name=theonepager.
However, when viewing in a mobile or smaller view the dropdown navbar looks a bit plain and I'd like to change this. Is it possible to change the appearance of the navbar through the dashboard settings, or would I need to alter the css directly?
you can pass class or id of ul tag in wp_nav_menu hook, will change design view.
Ex:
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
'items_wrap' => '<ul class="myMenu" id="myCustomid">%3$s</ul>'
)
);
?>
Related
I'm creating an one-page custom theme. I'm struggling with a custom menu, because I want to display custom links.
I've registered menu in functions.php file
function register_my_menus() {
register_nav_menus(
array(
'header-menu' => __( 'Header Menu' ),
)
);
}
add_action( 'init', 'register_my_menus' );
Then, I've displayed in header.php file like this:
<?php wp_nav_menu( array(
'theme_location' => 'top-menu',
'container' => 'ul',
'menu_class'=> 'd-flex main-menu'
) );
?>
I've added custom classes for ul tag, and that is okay. Navigation works but just for pages. When I create a page, a link for that page shows up in navigation. However, after creating custom links they don't appear in navigation.
I'm searching the Stachoverflow for some quiet time, but without success. How to resolve a described issue? Do you have an idea?
Thank you for your time.
You have register header menu with header-menu key and trying to get it by key of top-menu which is not possible. You have to use the header-menu key to add and get a header menu. we have updated the code. you can use this code.
<?php
wp_nav_menu( array(
'theme_location' => 'header-menu',
'container' => 'ul',
'menu_class'=> 'd-flex main-menu'
) );
?>
I am working on wordpress theme developement and navigation menus . But by default the menu items are shown in lists . I want to get menu items as buttons and want to make them dropdowns with bootstrap classes . plz help me
There easiest way to do this is to use off-the-shelf solution. There is a WP_Bootstrap_Navwalker class which extends WordPress' native Walker_Nav_Menu class and makes your Navigation Menus ready for Bootstrap 3. Download it from GitHub.
Second, make it available for WordPress. Add following to the functions.php:
<?php
require_once('path-to-the-directory/wp-bootstrap-navwalker.php');
Change path-to-the-directory/ to fit your needs.
Next, alter your wp_nav_menu() with the following code:
<?php
wp_nav_menu( array(
'menu' => 'header', // match name to yours
'theme_location' => 'header',
'container' => 'div', // no need to wrap `wp_nav_menu` manually
'container_class' => 'collapse navbar-collapse',
'container_id' => 'collapse-1',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => false,
'walker' => new WP_Bootstrap_Navwalker() // Use different Walker
));
Note, that you don't need the <div class="collapse navbar-collapse" id="collapse-1"> anymore as it will be added by wp_nav_menu() with proper CSS classes and id.
Also, read the WP_Bootstrap_Navwalker README.md file carefully.
originally published here : Add Bootstrap dropdown class to a nav menu
I'm trying to create custom website theme for Wordpress and I ran into a bit of a problem. I use two absolutely same menus in my header and footer part of website.
Calling
wp_nav_menu(array('theme_location' => 'header'));
in header.php works well, the menu prints out without any problem, but if I do the same in my footer.php file, the menu doesn't print and var_dump(wp_nav_menu(array('theme_location' => 'header'))); prints false.
I've tried some workarounds that I found on Google with modifying the functions.php file, but none of them helped me resolve that problem. My functions.php file now consists of only one line
register_nav_menus( array( 'header' => 'Header menu', 'footer' => 'Footer menu' ) );
and yes, I tried to use
wp_nav_menu(array('theme_location' => 'footer'))
as well, with same result. If I call the same function from header.php
wp_nav_menu(array('theme_location' => 'footer'))
the menu works good.
You have registered you two nav menus correctly. I always do that within my initial theme setup hook that gets hooked to the after_setup_theme hook. So I would do something like this in your functions.php:
function pietergoosen_theme_setup() {
register_nav_menus( array(
'header' => 'Header menu',
'footer' => 'Footer menu'
) );
}
add_action( 'after_setup_theme', 'pietergoosen_theme_setup' );
Keep in mind, you don't have to do it this way. The following also works
register_nav_menus( array(
'header' => 'Header menu',
'footer' => 'Footer menu'
) );
You should now see the two menus in the backend under "Appearance > Menus > Manage Locations" (Only if a menu exist)
For the sake of the footer menu, add the following code in your footer where you need to display the menu:
<nav id="footer-navigation" class="site-navigation footer-navigation" role="navigation">
<?php wp_nav_menu( array( 'theme_location' => 'footer', 'menu_class' => 'nav-menu', 'fallback_cb' => false ) ); ?>
</nav>
At this stage nothing will be displayed, and I think this is where you also get stuck at. The reason for this is that there aren't any items assigned to the menu, and if there are nothing assigned to a menu, then nothing will be displayed. So we have to insert something to be displayed.
In the backend, go to "Appearance > Menus > Edit Menus". In the "Menu Name" field, enter a name for your menu and click "Create Menu". You will now be able to add the menu in the menu screen.
You can now choose items from the left hand side to insert into your menu. You can also set the location of the menu, in this case in the footer. I've selected to display the categories in the footer. Click "Save Menu" when done.
You should now see your nav menu in the front end.
You just have to add styling to your nav bar now. You will do exactly the same for the header nav menu, accept you will add the call to the menu in the header.php. I hope you find this usefull.
So I’m producing my second WP theme and I’ve struck a problem. As well as the standard Nav menu at the top of my pages, the Footer element contains three individual sub-menus that can be loaded with individual entries. These are broken into three areas: Product Range, Industry Type and Services. The source code on footer.php is thus:
<div class="col-sm-3" style="float:left">
<h3>Product Range</h3>
<?php wp_nav_menu( array( 'footer' => 'product-range', 'container_class' => 'footer-menu' ) ); ?>
</div>
<div class="col-sm-3" style="float:left">
<h3>Industry Type</h3>
<?php wp_nav_menu( array( 'footer' => 'industry-type', 'container_class' => 'footer-menu' ) ); ?>
</div>
<div class="col-sm-3" style="float:left">
<h3>Services</h3>
<?php wp_nav_menu( array( 'footer' => 'services', 'container_class' => 'footer-menu' ) ); ?>
</div>
In functions.php I have included:
*Add footer Menus
*/
function register_my_menus() {
register_nav_menus(
array(
'product-range' => __( 'Product Range' ),
'industry-types' => __( 'Industry Types' ),
'services' => __( 'Services' )
)
);
}
add_action( 'init', 'register_my_menus' );
The output to all three menus is identical, and it is not what I want:
Product Range
COVID19 Policy
Latest and Greatest
About Us
Contact us1
Customer Service
Our Guarantee
Industry Type
COVID19 Policy
Latest and Greatest
About Us
Contact us1
Customer Service
Our Guarantee
Services
COVID19 Policy
Latest and Greatest
About Us
Contact us1
Customer Service
Our Guarantee
The top two items I added in the CMS, the remainder are automatically generated form somewhere else?
What gives?
How do I get the nav menu list through the menu name in Wordpress?
I'm using the following code but it's showing all pages and is not using the custom nav menu name
<?php wp_page_menu('sort_column=ID&sort_order=desc;');?>
Thanks for helping.
you should register your menu in your functions.php file and add it to init.
register_nav_menu( 'header', __( 'Header Menu', 'twentyeleven' ) );
And you can display anywhere this menu as below :
wp_nav_menu( array( 'theme_location' => 'header','container' => false,'menu_id' => 'nav' ) );
First of all,
you should really assign the menu in your functions.php file and add it to init. Something like this should do:
function register_my_menus()
{
register_nav_menus(array( 'main-menu' => __( 'Main Menu' ) ) );
}
add_action( 'init', 'register_my_menus' );
Then in you wordpress theme you simple call it like so:
wp_nav_menu(array('menu_id' => '',
'menu_class' => '',
'container' => '',
'theme_location' => 'main-menu'
));
You can fill in classes, or menu ids you need, important thing is the "main-menu" clausole displaying menu you created.
Now you just need to go to your wordpress admin > appearence > menus, select your menu from the top tab list, and assing it to theme location, on right-hand side. Where it says "Theme Locations", just select "Main Menu" from the dropdown list, and hit save.
Hope this helps.
I am creating my wordpress theme with sub pages and their sub pages also, for this i create my own theme. now I manage these child pages from admin panel to show header navigation menu dropdown . but its not working , they show him in a line ,not drop down .so how can i show in dropdown in my header part.
my menu code is
<div class="nav">
<?php wp_nav_menu(array('menu' => 'topmenu', 'walker' => new description_walker(), 'menu_class' => 'nav', 'container' => false)); ?>
</div>
Its show 4 menu.
but I have sub pages in only 2 menu.
so how can i show that?
you are declaring twice ".nav" as a class, the first time you do it in here:
<div class="nav">
the second time you declare it in:
'topmenu', 'walker' => new description_walker(), 'menu_class' => 'nav', 'container' => false)); ?>
so basically you are asigning the class .nav both in the div and in the menu ul, which may create issues depending on yoru css.
I use this plugin for Dropdown menus: http://shailan.com/wordpress/plugins/dropdown-menu/ - it works perfectly and it has some nice effects you can use too, like a sliding down animation