I want a dropdown menu like this in Wordpress
<div class="dropdown">
<li class="dropdown-style" type="button" id="dropdownMenu1" data-hover="dropdown" aria-haspopup="true" aria-expanded="true">
Golfbestemmingen <span class="caret"></span>
</li>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</div>
The code i have now
<?php wp_nav_menu( array('menu' => 'Hoofd Menu','container_class' => 'dropdown','items_wrap' => '%3$s')); ?>
Someone who can help me with this?
Go and do use Wordpress Bootstrap Master themes to customize bootstrap so all the bootstrap functions will be available without any worries.
You can get it here : https://github.com/320press/wordpress-bootstrap
Related
while making my custom navigation menus for my own Worpress theme, navigation menu's css code's some codes are working, some are not working while entering php navigation code for Wordpress theme.
This my php code for wordpress navigation menu
<?php wp_nav_menu( array(
'theme_location' => 'primary',
'depth' => 2,
'container' => 'ul',
'container_class' => '',
'menu_class' => 'nav-link',
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
'walker' => new WP_Bootstrap_Navwalker())
);?>
so i am having so many classes in navigation menu so my css code is very long that's why i am adding my html code for my navigiation bar. this my html code for navigation menu.
<ul>
<li class="nav-link" style="--i: .6s">
Home
</li>
<li class="nav-link" style="--i: .85s" >
Categories<i class="fas fa-caret-down"></i>
<div class="dropdown ">
<ul>
<li class="dropdown-link">
Motivation
</li>
<li class="dropdown-link">
Health
</li>
<li class="dropdown-link">
<a class=" href="/pages/science&tech.php">Science & Technology</a>
</li>
<li class="dropdown-link">
<a href='/pages/finance.php'>Finance</a>
</li>
<li class="dropdown-link">
Random
</li>
<div class="arrow"></div>
</ul>
</div>
</li>
<li class="nav-link" style="--i: 1.1s">
Archives<i class="fas fa-caret-down"></i>
<div class="dropdown">`enter code here`enter code here`
<ul>
<li class="dropdown-link">
Contact us
</li>`enter code here`
<li class="dropdown-link">
Privacy Policy
</li>
<li class="dropdown-link">
Terms & Condition
</li>
<li class="dropdown-link">
Disclaimer
</li>
<div class="arrow"></div>
</ul>
</div>
</li>
<li class="nav-link" style="--i: 1.35s">
About
</li>
</ul>
something wrong in my php code. can you give correct code for my navigation bar.
We don't see you code in context, but your 'container' element has wrong. You must set a nav or div, not ul (i suggest nav tag). Remember define 'container_class' too.
Then you must define your CSS rules including your container_class in spreadsheet. If is necessary, you must use !important.
Hi I am trying to get a dropdown list to appear when you click a button, problem is that whenever I click the button it goes to the index page instead of showing the list.
However, the button works only on one specific page which is almost identical to the others.
Here is the code:
<li class="dropdown">
<a id="dLabel" data-target="#" href="" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<?Php echo $_SESSION['email']; ?><span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>User Details</li>
<!-- <li>Another action</li>
<li>Something else here</li> -->
<li role="separator" class="divider"></li>
<li>Logout</li>
</ul>
</li>
Please use javascript:void(0) instead of blank.
<li class="dropdown">
<a id="dLabel" data-target="#" href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<?Php echo $_SESSION['email']; ?><span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>User Details</li>
<!-- <li>Another action</li>
<li>Something else here</li> -->
<li role="separator" class="divider"></li>
<li>Logout</li>
</ul>
How do i pass a value on dropdown bootstrap to the next page. There several options to choose and obviously it would be a waste of time making multiple same layout page but with different contents. How do i pass the value from dropdown to the next php page so that the next page can load the data based on that value.
I've seen some examples using the form method but it ruins the dropdown layout.Using bootstrap 3.3.7. Thanks in advance
<div class="container-fluid">
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Admin <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Register Donee</li>
</ul>
</li>
<li class="">Home</li>
<li>How It Works</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">State <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Johor</li>
<li>Selangor</li>
<li>Melaka</li>
<li>Penang</li>
<li>Perak</li>
<li>Pahang</li>
<li>Kedah</li>
<li>Kelantan</li>
<li>Terengganu</li>
<li>Negeri Sembilan</li>
<li>Perlis</li>
<li>Sabah</li>
<li>Sarawak</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
href should be something like
<li>Johor</li>
<li>Selangor</li>
<li>Melaka</li>
in page.php use $_GET['sel'] to get the selected value
I'm new at web programming was was wondering if you guys could help me. What I want I guess must be easy, but can't really find /how/.
I have my cute little sidebar that isn't even finished and is constantly needing to be changed. I already gave up on updating it until everything is ready:
<!-- sidebar menu -->
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
<div class="menu_section">
<h3>General</h3>
<ul class="nav side-menu">
<li><a><i class="fa fa-home"></i> Home <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li>Search</li>
<li>Dashboard</li>
<li>Lookup</li>
</ul>
</li>
<li><a><i class="fa fa-cubes"></i> Inventory <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li>Asset List
<li><a>Asset Management<span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li class="create.php">Create Assets
</li>
<li>Update Assets
</li>
</ul>
</li>
</ul>
</li>
<li><a><i class="fa fa-sitemap"></i> Tickets <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li>Ticket Overview
<li><a>Ticket Management<span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li class="sub_menu">Create a Ticket
</li>
<li>Update a Ticket
</li>
</ul>
</li>
<li><a>User Management<span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li class="sub_menu">User List
</li>
<li>Create a User
</li>
<li>Update a User
</li>
</ul>
</li>
</ul>
<li><a><i class="fa fa-laptop"></i> Loans <span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li><a>Loan Management<span class="fa fa-chevron-down"></span></a>
<ul class="nav child_menu">
<li class="create.php">Create a Loan
</li>
<li>View Loans
</li>
</ul>
</li>
</ul>
</li>
</li>
</ul>
</div>
</div>
<!-- /sidebar menu -->
But the problem is that I'm doing it like an uncultured swine and keeping that in every single page where it is needed. And if I want to make a change, I need to edit every single page.
I was wondering if there was a way to have a class, or something, with my header, sidebar, and footer, and load them across all pages that needed them?
Thank you for your help!
You can extract the sidebar code into its own PHP file (sidebar.php) then include it where you need it with include or include_once
<html>
...
<body>
<?php include './sidebar.php' ?>
...
</body>
</html>
Using include is essentially the same as copy pasting the code into your file. I.e. It will be added where you include the code and it will be evaluated there as well
Its very simple, Save you sidebar in a php file lets call it sidebar.php, and add below code in your other PHP file where you want to show the sidebar.
<?php include_once('sidebar.php');?>
That's it.
Thank you for reading... I have a 2 layer of navigation. which sort the content by good, bad and comment count. if user clicks on good it will bring another nav which is sort the content by time. such as today, last one week, last one month.
I can add class='active' using $_SERVER['PHP_SELF'] but twitter bootsrap dropdown menu does not have simple class='active' it is complicated. I am not able to come up with a solution. should I use for? foreach? I don't know. please see the html command in the code. this is my code.
<ul class="nav nav-tabs">
<li <?php if (basename($_SERVER['PHP_SELF']) == '/?Top'): ?> class="active"<?php endif; ?>>Top Content</li>
<li <?php if (basename($_SERVER['PHP_SELF']) == '/?Bad'): ?> class="active"<?php endif; ?>>Bad Content</li>
<li <?php if (basename($_SERVER['PHP_SELF']) == '/?Comments'): ?> class="active"<?php endif; ?>>Most Commented</li>
<!-- It's confusing me when It comes here... because as you see active option is not li tag. it's bunch of html code and also any url bellow can ben any of those up -->
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-time"></i> Today <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="URL=week" />Last 1 Week</a></li>
<li><a href="URL=month" />Last 1 Month </a></li>
<li><a href="URL=all" />All</a></li>
</ul>
</li>
</ul>
html commend: It's confusing me when It comes here... because as you see active li is not li it's bunch of html code and also also any url below can be any of those up
You can use the "active" class for the outter li (the one has class "dropdown") and another "active" class in your child dropdown.
This is an example
<ul class="nav nav-tabs">
<li class="">Home</li>
<li>Help</li>
<li class="dropdown active">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li class="active">Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
A live demo in JSBin