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 :)
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;
}
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
I have been learning how to use wordpress along with php and I am currently trying to convert a static website I have built using wordpress.
At the minute I am having trouble with the wordpress 'wp_nav_menu' being that I have a so-called split menu with the main navigation links on the left and some social media links on the right.
Here is my current markup:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Computer Services</li>
<li>Accountancy Services</li>
<li>Payroll Services</li>
<li>About Us</li>
</ul>
<ul class="nav navbar-nav navbar-right social-icons">
<li>
<i class="fa fa-facebook" aria-hidden="true"></i>
<i class="fa fa-linkedin" aria-hidden="true"></i>
<i class="fa fa-twitter" aria-hidden="true"></i>
</li>
</ul>
</div>
And how far I have gotten with the wordpress integration:
<?php
wp_nav_menu( array (
'theme_location' => 'primary',
'container' => 'nav',
'container_class' => 'navbar-collapse collapse',
'menu_class' => 'nav navbar-nav',
));
?>
Although I understand the social media links aren't exatly a menu I would like to know and understand how to have them still apart of the same container e.g.
<div class="navbar-collapse collapse">
Any help regarding the matter would be greatly appreciated and I am willing to learn from any mistakes as I am sure I have already made some (or bound to).
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>