I am very new to wordpress development and I tried adding bootstrap through the function.php file. I get the bootstrap styles but some of the things like the dropdown and the the expanding hamburger menu are not working. Can someone explain what I am doing wrong?
This is my functions.php file:
<?php
add_action('wp_enqueue_scripts' , 'vault_files');
function vault_files(){
wp_enqueue_style('vault_main_style', get_stylesheet_uri());
wp_enqueue_style( 'bootstrap-css', 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css');
wp_enqueue_script('bootstrap-js', 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js');
}
?>
my header.php file looks like this:
<!doctype html>
<head>
<!--the following function lets wordpress be in control of the head section
this is prevent our theme from breaking when we add other plugins. -->
<?php wp_head(); ?>
</head>
<body>
<header class="site-header">
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--google fonts-->
<link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One|Patua+One&display=swap" rel="stylesheet">
<!--navbar starts here-->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</header>
You can just put bootstrap link here
Header.php
<head>
<?php wp_head(); ?>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>
</head>
ANOTHER WAY
Functions.php
Download all CDN and put in one or make tow different folder like css & js folder after put below code in functions.php file
<?php
/**
* Enqueue scripts and styles
*/
function your_theme_enqueue_scripts() {
// all styles
wp_enqueue_style( 'bootstrap', get_stylesheet_directory_uri() . '/css/bootstrap.css', array(), 20141119 );
// all scripts
wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '20120206', true );
wp_enqueue_script( 'theme-script', get_template_directory_uri() . '/js/scripts.js', array('jquery'), '20120206', true );
}
add_action( 'wp_enqueue_scripts', 'your_theme_enqueue_scripts' );
I figured out the problem.
The problem was that i didnt include these lines which were in my footer.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
Related
I'm having a problem with the navbar in Laravel 8; specifically the whole navbar is shown on the view but the dropdown is not working.
In fact, when I click, the drop-down menu does not open.
This is layout.blade.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{asset('css/app.css')}}">
<title>Document</title>
</head>
<body>
<x-navbar/>
{{$slot}}
<script src="{{asset('js/app.js')}}"></script>
</body>
</html>
This is navbar.blade.php:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
and the home.blade.php view is:
<x-layout>
<h1>Hello!!!</h1>
</x-layout>
Please try with this otherwise it might be a typo.
#include('inc.navbar')
// #include('FOLDER_NAME.FILE_NAME')
Also check documentation! https://laravel.com/docs/9.x/blade#including-subviews
This is not intended as an answer. Just to give some info that can't be formatted properly (or I don't know how to) in a comment. When view the source of the page in a browser, you should see the following three lines in the <head> section (or in other proper location). My navbar dropdown didn't work until these three lines showed up in the source. Initially I added the lines in a wrong blade file and they didn't end up in the page as expected.
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
Hello everybody i'm new to laravel and php.
today i was able to launch a local laravel website using php artisan serve.
but now i wanted to add a navbar with bootstrap and that worked, but in the navbar i want to add a brand.
unfortunately i have tried many ways to add the path for the image like using ../ and echo path but nothing seems to work. I'm probably doing something wrong :). help is appreciated!
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YGP</title>
</head>
<style>
h1
{
font-family: 'Geneva', sans-serif;
}
</style>
<body>
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="" width="50" height="50" class="d-inline-block align-top" alt="">
YGP
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="content">
</div>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</html>
and this is the folder layout:
the image
located in IMAGES/LOGO.PNG
Move your images folder into public. Then access them by
<img src="{{ asset('images/logo.png') }}" alt="" title="">
Anyways, I recommend you to check with Filesystem. The Laravel Flysystem integration provides simple to use drivers for working with local filesystems and Amazon S3. Even better, it's amazingly simple to switch between these storage options as the API remains the same for each system.
it should help!
For more detail document : https://laravel.com/docs/7.x/filesystem
Whenever I click over the item that has the drop down, it doesnt work... does anyone know why? It is my first time using php and I am trying to do an inventory system... but i have no idea what could be the problem
Here is my code
<!DOCTYPE html>
<html>
<head>
<title>Servicio de Manejo de Inventarios</title>
<!-- bootstrap -->
<link rel="stylesheet" type="text/css" href="assets/bootstrap/css/bootstrap.min.css">
<!-- bootstrap theme -->
<link rel="stylesheet" type="text/css" href="assets/bootstrap/css/bootstrap-theme.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" type="text/css" href="assets/font-awesome/css/font-awesome.min.css">
<!-- custom css -->
<link rel="stylesheet" type="text/css" href="custom/css/custom.css">
<!-- DataTables-->
<script type="text/javascript" scr="assets/plugins/datatables/datatables.min.css"></script>
<!-- file input -->
<script type="text/javascript" scr="assets/plugins/fileinput/css/fileinput.min.css"></script>
<!-- jquery -->
<script type="text/javascript" scr="assets/jquery/jquery.min.js"></script>
<!-- jqueryui -->
<link rel="stylesheet" type="text/css" href="assets/jquery-ui/jquery-ui.min.css">
<script type="text/javascript" scr="assets/jquery-ui/jquery-ui.min.js"></script>
<!-- bootstrap js -->
<script type="text/javascript" scr="assets/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<!-- 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" 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" href="#">Brand</a>
</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">
<li id="navDashboard"> <i class="glyphicon glyphicon-list-alt"></i> Dashboard </li>
<li id="navBrand"> <i class="glyphicon glyphicon-btc"></i> Marca </li>
<li id="navCategories"> <i class="glyphicon glyphicon-th-list"></i> Categoria </li>
<li class="dropdown" id="navOrder">
<i class="glyphicon glyphicon-shopping-cart"> </i> Ordenes <span class="caret"></span>
<ul class="dropdown-menu">
<li id="topNavAddOrder"><i class="glyphicon glyphicon-plus"> </i>Agregar orden</li>
<li id="topNavManageOrder"> <i class="glyphicon glyphicon-edit"> </i>Administrar ordenes</li>
</ul>
</li>
<li id="navReport"> <i class="glyphicon glyphicon-check"></i> Reporte </li>
</ul>
<ul class="nav navbar-nav navbar-right" id="navSetting">
<li class="dropdown">
<i class="glyphicon glyphicon-user"></i> <span class="caret"></span>
<ul class="dropdown-menu">
<li id="topNavSetting"><i class="glyphicon glyphicon-wrench"></i>Setting</li>
<li id="topNavLogout"><i class="glyphicon glyphicon-log-out"></i>Logout</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- file input -->
<script type="text/javascript" scr="assets/plugins/fileinput/js/plugins/piexif.min.js"></script> <!--se supone que va "canvas-to-blog.min.js" -->
<script type="text/javascript" scr="assets/plugins/fileinput/js/plugins/srotable.min.js"></script>
<script type="text/javascript" scr="assets/plugins/fileinput/js/plugins/purify.min.js"></script>
<script type="text/javascript" scr="assets/plugins/fileinput/js/fileinput.min.js"></script>
<!-- datatables js-->
<script type="text/javascript" scr="assets/plugins/datatables/datatables.min.js"></script>
</body>
</html>
Because the href attribute of the elements that has dropdown is set to "#". To resolve the issue, just give it a valid link for example <i class="glyphicon glyphicon-user"></i> <span class="caret"></span>
I am trying to create a standard menu-bar to use on all my site's pages.
I tried using the Create PHP header/footer but when I put my Bootstrap 4 navbar in, the drop-downs stopped working
Can anyone help?
The code to include the header is
<body>
<?php include("navbar.php"); ?>
<div class="container">
<h1>Home</h1>
</div>
with the Bootstrap head and scripts
navbar.php is
<?php
session_start();
// connect to database
include("connection.php");
?>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>MWfD Job Control</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!-- MWfD CSS -->
<link rel="stylesheet" type="text/css" href="mwfd.css">
</head>
<body>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">MWfD v2</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="index.php">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="customerentry.php?customerid=0"><span class="red">Job/Quote Entry</span></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown">Quotes</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="reportquotes.php?select=pending">Pending quotes</a>
<a class="dropdown-item" href="reportquotes.php?select=all">All quotes</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown">Job Progress</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item disabled" href="#">Unpriced jobs</a>
<a class="dropdown-item" href="reportengraving.php">Engraving jobs</a>
<a class="dropdown-item" href="reportlaser.php">Laser jobs</a>
<a class="dropdown-item" href="reportwoodwork.php">Woodwork jobs</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Reports</a>
</li>
</ul>
<form method="post" class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="number" id="jobField" name="jobField" placeholder="Job number">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit" id="jobNoSearchBtn" name="searchBtn">Search</button>
</form>
</div>
</nav>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
The navbar is copied from the Bootstrap 4 navbar page, and works if it is left in the page.
When you say that the drop-downs stoppped working I'm assuming that you had them working before. Check that your links to the .js (and .css) files are still valid. Maybe open up the console and check the network.
I have a bootstrap navbar. And it is being used on many pages. So I have created one navbar.php and It contains the elements of the navbar.
I am including it on all the pages. But the dropdown part of the navbar is not functioning properly. It is not taking me to the desired page. All the links that are refering to home.php is working. The dropdown for login also works. But when I click on it it does not take me to the login.php or masterlogin.php
What could be the problem?
navbar.php
<html>
<head>
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<script src="assets/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="home.php"><img src="logo3.png" alt="Home"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Content1</li>
<li>Content2</li>
<li>Content3</li>
<li>Content4</li>
<li>Content5</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">LOGIN<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>LOGIN</li>
<li>MASTER LOGIN</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
home.php
<!--At the top-->
<?php
include_once "navbar.php";
?>
<!-- Followed by rest of the code for home.php-->
replace your css js
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
it's working in your code