This question already has an answer here:
How to add custom HTML to wp_nav_menu?
(1 answer)
Closed 4 years ago.
I'm totally beginer in Wordpress and PHP. I am trying to move the page code in HTML with my own CSS to Wordpress and PHP. I have a problem with the menu. I think I am doing something wrong and I can't find a mistake.
I have a menu in my theme in HTML:
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span>Menu</span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li>
<a class="page-scroll nav-width" href="#page_1">Page_01</a>
</li>
<li>
<a class="page-scroll nav-width" href="#page_2">Page_02</a>
</li>
<li>
<a class="page-scroll nav-width" href="#page_3">Page_03</a>
</li>
<li>
<a class="page-scroll nav-width" href="#page_4">Page_04</a>
</li>
<li>
<a class="page-scroll nav-width" href="#page_5">Page_05</a>
</li>
<li>
<a class="page-scroll nav-width" href="#page_6">Page_06</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
I registered my menu in functions.php:
<?php register_nav_menu( 'main', 'main_menu' ); ?>
and I try to put my menu it to the header.php usung this code:
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span>Menu</span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<!--menu-->
<?php wp_nav_menu( array(
'menu' => '',
'container' => 'ul',
'container_class' => 'nav navbar-nav navbar-right',
'container_id' => '',
'menu_class' => 'nav navbar-nav navbar-left page-scroll nav-width',
'menu_id' => '',
'echo' => true,
'fallback_cb' => 'wp_page_menu',
'before' => '',
'after' => '',
'link_before' => '',
'link_after' => '',
'items_wrap' => '<ul id="" class="nav navbar-nav navbar-right" role="menu" ></ul>',
'item_spacing' => '',
'depth' => 0,
'walker' => '',
'theme_location' => 'main'
) ); ?>
</div>
<!-- /.navbar-collapse -->
</nav>
When I'm creating a menu in Wordpress it doesn't work, menu isn't displayed on my page. What is wrong with this code?
I will be grateful for your help :)
i think you using bootstrap right?
for bootstrap there is a very nice navwalker...
just include the file and follow the documentation
https://github.com/wp-bootstrap/wp-bootstrap-navwalker
Related
I created the navigation with the navbar walker for Bootstrap 5 and everything works fine including the responsive menu.
Now I would like to create the menu right-justified. Unfortunately, my attempts to implement this have not been fruitful. According to Bootstrap, the class 'justify-content-end' would be provided so that the menu is aligned on the right side. Unfortunately, this didn't work either.
Below is the code snippet in the 'Header':
<header>
<nav class="navbar navbar-expand-md fixed-top navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#"><img
src="<?php echo get_template_directory_uri(); ?>/images/logotest2.svg" width="30" height="30"
alt="Logo" "></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main-menu"
aria-controls="main-menu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main-menu">
<?php
wp_nav_menu( array(
'theme_location' => 'main_menu',
'container' => false,
'menu_class' => '',
'fallback_cb' => '__return_false',
'items_wrap' => '<ul id="%1$s" class="navbar-nav me-auto mb-2 mb-md-0 %2$s">%3$s</ul>',
'depth' => 2,
'walker' => new bootstrap_5_wp_nav_menu_walker()
) );
?>
</div>
</div>
</nav>
If anyone has an idea how to do this, I would be grateful for any hint.
I am using bootstrap navwalker to build out my navigation in Wordpress. I have got it all working except for the dropdown in mobile. For some reason the dropdown works perfectly fine in desktop view, but once in mobile nothing happens.
I have added the code from the header.php file below.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a href="<?php echo get_option("siteurl"); ?>">
<img src="/wp-content/themes/Gaggia/assets/src/library/img/gaggia-logo.svg" class="navbar-brand" href="#">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll"
aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarScroll">
<ul class="navbar-nav ms-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'depth' => 2, // 1 = no dropdowns, 2 = with dropdowns.
'container' => 'div',
'container_class' => 'nav',
'container_id' => 'navbar-collapse collapse',
'menu_class' => 'navbar-nav mr-auto',
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
'walker' => new WP_Bootstrap_Navwalker(),
) );
?>
</ul>
</div>
</div>
</nav>
Does anyone have any idea why this might be happening. I updated the actual walker file to match data-bs-toggle instead of just data-toggle. This fixed the issue for desktop.
Any help would be appreciated.
Thanks,
Figured it out.
Added css class to resolve the issue.
.dropdown-backdrop {
position: static;
}
Here is the problem. I'm creating a theme in WordPress and I have trouble with dynamic navigation menu on Mobile devices.
Here is the code which I use:
<nav id="primary-menu" class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="logo" href="#page">
<img class="logo-dark" src="<?php bloginfo( 'stylesheet_directory' ); ?>/assets/images/logo/logo-dark.png" alt="appy Logo">
<img class="logo-light" src="<?php bloginfo( 'stylesheet_directory' ); ?>/assets/images/logo/logo-light.png" alt="appy Logo">
</a>
</div>
<?php
wp_nav_menu (array (
'theme_location' => 'menu-1',
'container' => 'nav',
'container_class' => 'collapse navbar-collapse pull-right',
'menu_id' => 'navbar-collapse-1',
'menu_class' => 'nav navbar-nav nav-pos-right navbar-left nav-split',
));
?>
<!--<div class="collapse navbar-collapse pull-right" id="navbar-collapse-1">
<ul class="nav navbar-nav nav-pos-right navbar-left nav-split">
<li class="active"><a data-scroll="scrollTo" href="#slider">home</a>
</li>
<li><a data-scroll="scrollTo" href="#feature2">feature</a>
</li>
<li><a data-scroll="scrollTo" href="#banner">author</a>
</li>
<li><a data-scroll="scrollTo" href="#reviews">reviews</a>
</li>
<li><a data-scroll="scrollTo" href="#pricing">pricing</a>
</li>
<li><a data-scroll="scrollTo" href="#cta">download</a>
</li>
</ul>
</div> -->
<!--/.nav-collapse -->
</div>
</nav>
Menu in functions.php file:
register_nav_menus( array(
'menu-1' => esc_html__( 'Primary', 'bookfolio' )
) );
add_action( 'after_setup_theme', 'bookfolio_setup' );
I put the HTML code in the comment so you can see how it looks like.
The desktop version works perfectly, but the problem is on Mobile devices.
You should use custom walker to display menu in bootstrap CSS
https://github.com/dupkey/bs4navwalker
Hi im trying to get mainmenu working, but i guess i do something wrong here is the code:
I am using bootstrap and linked it like this:
<link href="<?php bloginfo('stylesheet_directory'); ?>/assets/css/bootstrap.min.css" rel="stylesheet">
Anyone knows how to get this right?
<!-- HEADER
===========================================-->
<header class="site-header" role="banner">
<!-- NAVBAR
===========================================-->
<div class="navbar-wrapper">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
</ul>
</div>
<?php
wp_nav_menu( array(
'menu' => 'primary',
'theme_location' => 'primary',
'container' => 'div',
'container_class' => 'navbar-collapse collapse',
'container_id' => 'navbar',
'menu_class' => 'nav navbar-nav'
) );
?>
</div>
</div>
</div>
</header>
Updated version
Wordpress menu will instantiate a menu object - you've literally got the html of the menu there, but this should be:
<nav id="site-navigation" class="main-navigation mobile-navigation">
<!-- <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php //esc_html_e( 'Primary Menu', 'eldon' ); ?></button> -->
<?php
wp_nav_menu( array(
'theme_location' => 'menu-1',
'menu_id' => 'primary-menu',
) );
?>
</nav><!-- #site-navigation -->
The menu should alreayd be set in the backend of the installation which will refer to this point in the header template.
Look here https://github.com/WordPress/WordPress/tree/master/wp-content/themes for examples of header.php templates using WordPress conventions. Please always refer to the Codex - you need to make sure you're not breaking a theme!
https://codex.wordpress.org/Theme_Development
Best thing you can do is to download a fresh copy of WordPress from wordpress.org and try again. You shouldn't have to change these templates but if you do, make sure you do it properly :)
Hello I have a static website for a company made with bootstrap, html and css. I want to make the same website in wordpress. I have started learning wordpress today.
I have followed different tutorials to made my template for wordpress, I have managed to create the first index.php and it is working nicely. I have created about page too and it is also working good. But what i want now, I have menu in my header php, How to i add link to my wordpress pages?
This is my header-top.php im calling this in header.php, The menu is showing properly
<!-- HEADER TOP MENU-->navbar navbar-inverse navbar-fixed-top navbar-expanded">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand page-scroll" href="index.html">
<img src="<?php bloginfo('template_directory')?>/images/jms_logo.png" class="img-responsive" alt="">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav navbar-right TopNav">
<li>Home</li>
<li>About Us</li>
<li>License</li>
<li>Gallery</li>
<li>Trainings</li>
<li>Contact Us</li>
</ul>
</div>
</div>
Then i went to wp-admin and create a about page and added textual content to it and it is showing properly on this link http://localhost/wordpress/about/
Now my question is
Q1. How do i add this link of about page in my header-top menu page.
<li>Home</li>
<li>About Us</li>
<li>License</li>
Im totally new to wp so i'm not sure whatever i have done is the correct way of doing it or not? can u also suggest me some proper tutorials that i can understand easily to create my website.
UPDATED MENU
I have replaced this
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav navbar-right TopNav">
<li>Home</li>
<li>About Us</li>
<li>License</li>
<li>Gallery</li>
<li>Trainings</li>
<li>Contact Us</li>
</ul>
</div>
with this but now the css for my menu is gone.
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<?php wp_nav_menu( array( 'theme_location' => 'header-top' ) ); ?>
</div>
In my static website
In my WP
Updated 2 After inspecting elements, It is showing like this
but i want like this
For menus you should use standart wp_nav_menu function. It generates menu itself. So you should use something like this:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<?php if ( has_nav_menu( 'primary-menu' ) ) { wp_nav_menu( array( 'menu_class' => 'nav navbar-nav navbar-right TopNav', 'theme_location' => 'primary-menu' ) );} ?>
</div>
Instead of:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav navbar-right TopNav">
<li>Home</li>
<li>About Us</li>
<li>License</li>
<li>Gallery</li>
<li>Trainings</li>
<li>Contact Us</li>
</ul>
</div>
And when you add wp_nav_menu to your theme then option MENU should appear in Appeareance section on WP admin, where you can create new menu and assign it to primary-menu position in theme
UPDATE
You can generate only li items by using this method:
$options = array(
'echo' => false
,'container' => false
);
$menu = wp_nav_menu($options);
echo preg_replace( array( '#^<ul [^>]*>#', '#</ul>$#' ), '', $menu );
So you can try something like this:
$options = array(
'echo' => false
,'container' => false
);
$menu = wp_nav_menu($options);
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav navbar-right TopNav">
echo preg_replace( array( '#^<ul [^>]*>#', '#</ul>$#' ), '', $menu );
</ul>
</div>