I've got trouble with this.
I updated database with example data and navbar got broken. I don't know what cause a problem - maybe you will help me.
So, when I want to go to page "News" or "Projects" nothing happend - just like link had "#" value.
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="{{ URL::base() }}">devprj*</a>
</div>
<div class="collapse navbar-collapse" data-toggle="collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>News</li>
<li>Projects</li>
<li>Forums</li>
<li>About</li>
#if ( !Auth::guest() )
<li>Panel</li>
#endif
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
#if ( Auth::guest() )
<a class="btn btn-default navbar-btn" href="{{ URL::to('login')}}"><span class="glyphicon glyphicon-log-in"></span> Login</a>
<a class="btn btn-success navbar-btn" href="{{ URL::to('register')}}"><span class="glyphicon glyphicon-heart"></span> Register</a>
#else
Welcome, <strong>{{ HTML::link('admin', Auth::user()->username) }} </strong> |
{{ HTML::link('logout', 'Logout') }}
#endif
</ul>
</div><!--/.nav-collapse -->
</div>
Everything works fine exept stuff within navbar-collapse . What's wrong?
I can post more stuff, If that can help.
Bootstrap 3 + Laravel 3.
//pmache
It looks like the issue is the data-toggle="collapse" attribute on the...
<div class="collapse navbar-collapse">
Remove it, and everything should work.
data-toggle="collapse" should only be added to the elements that trigger the collapse event (buttons), and not the elements that are the target of the collapse.
Related
When I try to open the menu on mobile, it does not open and instead, you just select the whole menu bar. It looks like this on the actual website:
meanwhile, this is the relevant code for the navbar.php
<link href="assets/css/style.css" rel="stylesheet">
<nav class="navbar navbar-default">
<div class='container'>
<div class="navbar-header">
<button type="button" id='navbar-toggle' class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="brand">
<img src="assets/img/transparentlogo.png" alt="logo">
</div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Contact Us</li>
</ul>
</div>
</div>
also, not sure if it makes a difference although the PHP file is named navbar.inc.php
Thank you for taking the time to read this post
<div class="brand">
<img src="assets/img/transparentlogo.png" alt="logo">
</div>
Maybe you should carry brand class' properties to anchor tag and remove brand class.
<a class="brand" href="../index"><img src="assets/img/transparentlogo.png" alt="logo"></a>
Or, you should check if your anchor tag () is covering all the space under the div having "brand" class. In my opinion you cannot click it on phone, because a' is not taking all the width and height.
For some reason, my mobile menu is not working. Here is the code:
<nav class="navbar navbar-default">
<div class='container'>
<div class="navbar-header">
<button type="button" id='navbar-toggle' class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="brand">
<img src="assets/img/transparentlogo.png" alt="logo">
</div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Contact Us</li>
</ul>
</div>
</div>
Thank you so much for taking the time to read this post!
if you used bootstrap 4.6 or some lower version chenge the jquery version and after that chenge the your jquery place in your end of your body for example
<script src="....................."></script>
<script src="....................."></script>
<script src="your jquery"></script>
now cheng the place
<script src="your jquery"></script>
<script src="....................."></script>
<script src="....................."></script>
I am learning PHP Laravel and I am developing shopping cart project. I am able to add the product into list but, when I click shopping cart link. I am getting following error.
Facade\Ignition\Exceptions\ViewException
Invalid argument supplied for foreach() (View: C:\Users\Khundokar Nirjor\Desktop\laravel Tutorial\shopping-cart\resources\views\shop\shopping-cart.blade.php)
Here is my Router
Route::get('/shopping-cart',[
'uses' => 'ProductController#getCart',
'as' => 'product.shopppingCart'
]);
Here is my header.blade.php code.
<nav class="navbar navbar-default">
<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 navbar-right">
<li><a href="{{route ('product.shopppingCart')}}"><i class="fa fa-shopping-cart" aria-hidden="true"></i> Shopping Cart
<span class="badge">{{ Session::has('cart') ? Session::get('cart')->totalQty : '' }}</span>
</a>
</li>
<li class="dropdown">
<i class="fa fa-user" aria-hidden="true"></i> User Mangemetn <span class="caret"></span>
<ul class="dropdown-menu">
#if(Auth:: check())
<li>User Profile</li>
<li>Logout</li>
#else
<li>Sign Up</li>
<li>Sign In</li>
#endif
<li role="separator" class="divider"></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Here is my shopping-cart.blade.php
#extends('layouts.master')
#section('title')
Laravel Shopping Cart
#endsection
#section('content')
#if(Session::has('cart'))
<div class="row">
<div class="col-sm-6 col-md-6 col-md-offset-3 col-sm-offset-3">
<ul class="list-group">
#foreach($products as $product)
<li class ="list-group-item">
<span class ="badge"> {{ $product['qty'] }}</span>
<strong >{{ $product['item']['title']}}</strong>
<span class ="label label-success"> {{ $product['price']}}</span>
<div class="btn-group">
<button type="button" class="btn btn-primary btn-xs dropdown-toggle" data-toggle="dropdown">Action<span class="caret"></span></button>
<ul class="dropdown-menu">
<li> Reduce By 1 </li>
<li> Reduce All </li>
</ul>
</div>
</li>
#endforeach
</ul>
</div>
</div>
<div class ="row">
<div class="col-sm-6 col-md-6 col-md-offset-3 col-sm-offset-3">
<strong > Total : {{ $totalPrice}}</strong>
</div>
</div>
<hr>
<div class ="row">
<div class="col-sm-6 col-md-6 col-md-offset-3 col-sm-offset-3">
<button type="button" class="btn btn-success">Checkout</button>
</div>
</div>
<div class ="row">
<div class="col-sm-6 col-md-6 col-md-offset-3 col-sm-offset-3">
<strong>Total : {{$totalPrice}} </strong>
</div>
</div>
<hr>
<div class ="row">
<div class="col-sm-6 col-md-6 col-md-offset-3 col-sm-offset-3">
<button type="button" class ="btn-btn-success">Checkout</button>
</div>
</div>
#else
<div class ="row">
<div class="col-sm-6 col-md-6 col-md-offset-3 col-sm-offset-3">
<h2>No Items In Cart</h2>
</div>
</div>
#endif
#endsection
Here is my controller code
public function getCart()
{
if(!Session :: has('cart') ){
return view ('shop.shopping-cart');
}
$oldCart = Session::get('cart');
$cart = new Cart($oldCart);
return view ('shop.shopping-cart' , ['products' => $cart->items, 'totalPrice'=>$cart->totalPrice]);
}
Here is screen shot when I clicked the shopping-cart link
Try like this
#if(!empty($products) && count($products) > 0)
#foreach($products as $product)
// your code here
#endforeach // typo in foreach fixed
#endif
You're getting this error cuase of sometime your products array is empty. So whenever you call foreach make sure to check the array is not empty.
#if(!empty($products)
#foreach($products as $product)
//code here
#endforech
#endif
Make your code like this your error will be gone.
I am learning to build wordpress themes. i have created a static html website. now I am trying to convert it into a wordpress theme. First, i need to convert the static navbar into a dynamic one. The following is my header.php code:
<!-- NAVIGATION -->
<nav class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<div class="row">
<div class="col-sm-8">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- navbar-header -->
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'container' => 'nav',
'container_class' => 'collapse navbar-collapse navigation',
'menu_class' => 'nav navbar-nav'
)
);
?>
</div>
<!-- .col-sm-8 -->
<div class="col-sm-4 navigation" id="social-icons">
<ul>
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-pinterest"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-google-plus"></i>
<i class="fa fa-tumblr"></i>
</ul>
</div>
<!-- social-icons -->
</div>
<!-- row -->
</div>
<!-- .container -->
</nav>
<!-- .navbar -->
But the output of this is:
Whereas the static one looks like:
JS Fiddle for the Static website: https://jsfiddle.net/9yyrnmuy/7/
EDIT 1:
I inspected to check whether the classes are being over ridden and found the following syntax:
<div class="container">
<div class="row">
<div class="col-sm-8">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- navbar-header -->
<nav class="nav navbar-nav">
<ul>
<li class="page_item page-item-7 current_page_item">
<a>Home</a></li>
</ul>
</nav>
</div>
<!-- .col-sm-8 -->
whereas I want it to be:
<div class="container">
<div class="row">
<div class="col-sm-8">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- navbar-header -->
<nav class="collapse navbar-collapse navigation" id="navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
<li>About</li>
<li>Contact Me</li>
</ul>
<!-- .navbar-nav -->
</nav>
<!-- #navbar-collapse -->
</div>
<!-- .col-sm-8 -->
Can anyone please help to solve this issue? Any help will be appreciated.
A drop-down menu I created with Twitter Bootstrap works on HTML documents but will not drop down on PHP documents. Here is a PHP document where you can see see what I mean. When I click the "more" tab, it does not drop down.
Why doesn't this menu work on both HTML and PHP documents?
Here is the page source:
<body>
<div class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a href"" class="navbar-brand">Colorful Cards</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="">Home</li>
<li class="">Past Cards</li>
<li class="active">Contact</li>
<li class="dropdown">
More<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li class="inverse-dropdown">Bibliography</li>
<li class="divider inverse-dropdown"></li>
<li class="inverse-dropdown">About</li>
<li class="divider inverse-dropdown"></li>
<li class="inverse-dropdown">Coming Soon...</li>
</ul>
</li>
</ul>
</div>
</div>
</div>