Here is the link to my website , on the laptop is working fine, but on mobile phone its not responsive. Here is the link to my site https://ticketsoko.co.ke/
and the follwing is how its showing on mobile phone . Is there a way on mobile phone it can resize the images and be viewed the same as its showing on desktop.
This is when I view it from the desktop.
<head>
<meta charset="utf-8">
<!--<meta name="viewport"-->
<!-- content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="img/logoo.png"/>
<title>Click & Pay | TicketSoko</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700%7COpen+Sans" rel="stylesheet"
type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- <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"> -->
<link rel="stylesheet" href="./css/main.css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700" rel="stylesheet">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="css/style3.css">
<link href="https://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<nav class=" navbar-default navbar-fixed-top" style="background-color:#f2f2f2;">
<ul>
<img class="logo" src="img/logoo.png" alt="logo" style="height: 100px; width:250px; float:right;">
</ul>
</nav>
<div class="container-fluid">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<br><br><br>
<div class="item active">
<img src="img/image1.jpeg" alt="Los Angeles" style="width:100%; height:500px;">
</div>
<div class="item">
<img src="img/2.jpg" alt="Chicago" style="width:100%; height:480px;">
</div>
<div class="item">
<img src="img/3.jpg" alt="New york" style="width:100%; height:480px;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
As i can see you used width as 250px. So it'll always take the 250 px of any screen whether it's a small screen or big screen.
Example for if you designed this website on a screen which is having 250px width only then it'll render completely on the screen. And if you'll run it on the big screen then also it wil take only 250 px and rest pixels will not be rendered.
So you should use the percentage for the widths. Like if you want to draw a component from left to right and 50% of the screen. Then give the width as 50%. Like that you can make it responsive.
And you can use media query too. Just read about the media query too.
Hope this will help you.
Related
i have use a slider in the project in the index file, but it does not look good when the bootstrap renders it, Im new to coding, but i dont know what to do, when i write the code in single file and only cdn links (no offline libraries), like popper.min.js, jquery.min.js , bootstrap.min.css and bootstrap.min.js these files
the slider shows up but the images do not appear one after one, i mean only the active image is shown
this is the header file some code that is automatically included in every file
<!-- link proper font here, like signica, offline font -->
<!-- <link rel="stylesheet" href="./bootstrap/css/bootstrap/signica-light.ttf">-->
<!-- <link rel="stylesheet" href="./bootstrap/css/bootstrap/signica-bold.ttf">-->
<!-- <link rel="stylesheet" href="./bootstrap/css/bootstrap/signica-regular.ttf">-->
<!-- <link rel="stylesheet" href="./bootstrap/css/bootstrap/signica-semibold.ttf">-->
<!-- -->
<link rel="stylesheet" href="./bootstrap/css/bootstrap/montserrat-regular.ttf">
<!-- this title variable is written before the page executed -->
<title><?php echo $title; ?></title>
<link rel="shortcut icon" type="image/jpg" href="./bootstrap/img/favicon.png"/>
<!-- enable these links when in production -->
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">-->
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>-->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>-->
<!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>-->
<!---->
<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- <link href="./bootstrap/js/popper.min.js" rel="stylesheet">-->
<!-- <link href="./bootstrap/js/jquery.min.js" rel="stylesheet">-->
<!-- <link href="./bootstrap/js/bootstrap.min.js" rel="stylesheet">-->
<link href="./bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="./bootstrap/css/jumbotron.css" rel="stylesheet">
<link href="./bootstrap/css/style.css" rel="stylesheet">
and this is the code of index file
<head>
<style>
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
}
</style>
</head>
<!-- slider starts -->
<div class="container">
<br>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
<li data-target="#myCarousel" data-slide-to="5"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="./bootstrap/img/cs-1.jpg" alt="Chania" width="1300" height="600">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="./bootstrap/img/cs-2.jpg" alt="Chania" width="1300" height="600">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="./bootstrap/img/cs-3.jpg" alt="Flower" width="1300" height="600">
<div class="carousel-caption">
<h3>Flowers</h3>
<p>Beautiful flowers in Kolymbari, Crete.</p>
</div>
</div>
<div class="item">
<img src="./bootstrap/img/cs-4.jpg" alt="Flower" width="1300" height="600">
<div class="carousel-caption">
<h3>Flowers</h3>
<p>Beautiful flowers in Kolymbari, Crete.</p>
</div>
</div>
<div class="item">
<img src="./bootstrap/img/cs-5.jpg" alt="Chania" width="1300" height="600">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
<div class="item">
<img src="./bootstrap/img/cs-6.jpg" alt="Chania" width="1300" height="600">
<div class="carousel-caption">
<h3>Chania</h3>
<p>The atmosphere in Chania has a touch of Florence and Venice.</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- slider ends -->
and this is offline js
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="./bootstrap/js/jquery.min.js"></script>
<script type="text/javascript" src="./bootstrap/js/popper.min.js"></script>
<script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>```
i dont know where the problem is[enter image description here][1]
[1]: https://i.stack.imgur.com/sVQZf.jpg
So im working on a blog website and i added a layout file. So i made it such that when i click on a blog it shows more info about it in another page (shows.blade.php). the shows page extends the layout page but doesn't show the css or js.It doesn't show the images either so i assume that its either i have referenced it wrongly or i havent created the right sections. When i open the layouts file everything's working correctly! However when i click on a blog to take me to the other page none of the css/js is working. Here's the shows.blade.php
#extends('layouts.layout')
#section('content')
#parent
<div class="card">
<h1>{{$post->title}}</h1>
<small>{{$post->created_at}}</small>
<small>{{$post->category}}</small>
<small>{{$post->body}}</small>
<small>{{$post->tags}}</small>
</div>
#endsection
and here's the layouts file where i included some code from a template. when i open this the styles are working just well
<!DOCTYPE html>
<html>
<head>
#section('head')
<meta charset="utf-8">
<title>Bloger</title>
<!-- Description, Keywords and Author -->
<meta name="description" content="Your description">
<meta name="keywords" content="Your,Keywords">
<meta name="author" content="ResponsiveWebInc">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Styles -->
<!-- Bootstrap CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Font awesome CSS -->
<link href="css/font-awesome.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/style.css" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" href="#">
#show
</head>
<body>
<div class="wrapper">
<!-- header -->
<header>
<!-- navigation -->
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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>
<a class="navbar-brand" href="#"><img class="img-responsive" src="images/logo.png" alt="Logo" /></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>New Blog</li>
<li>Signup</li>
<li>Login</li>
<li class="dropdown">
Menu <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Create a blog</li>
<li>Subscribe</li>
<li>Executive Team</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>
<div class="event" id="event">
<div class="container">
<div class="default-heading">
<!-- heading -->
<h2>Upcoming events</h2>
#yield('content')
</div>
</div>
</div>
<!-- events end -->
<footer>
<div class="container">
<p>Home | works | Team | Contact</p>
<div class="social">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-dribbble"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-google-plus"></i>
</div>
<!-- copy right -->
<!-- This theme comes under Creative Commons Attribution 4.0 Unported. So don't remove below link back -->
<p class="copy-right">Copyright © 2014 Your Site | Designed By : IndioWeb, All rights reserved. </p>
</div>
</footer>
</div>
<!-- Javascript files -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap JS -->
<script src="js/bootstrap.min.js"></script>
<!-- Respond JS for IE8 -->
<script src="js/respond.min.js"></script>
<!-- HTML5 Support for IE -->
<script src="js/html5shiv.js"></script>
<!-- Custom JS -->
<script src="js/custom.js"></script>
</body>
</html>
Give a / (slash) begin of your css, js and image path, Like :
href="css/bootstrap.min.css"
Change to :
href="/css/bootstrap.min.css"
Because / will return the root of the site.
It's done in order to root the path (making it an absolute path).
It ensures that the path is not relative but read from the root of the site.
This allows one to move a file around and not have to change the links to the different resources.
You need to change all the path, like :
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/font-awesome.min.css" rel="stylesheet">
<link href="/css/style.css" rel="stylesheet">
Even also change the image path :
src="/images/logo.png"
You are loading assets like:
<link href="css/font-awesome.min.css" rel="stylesheet">
So for exmaple if you are on website.com everything may load fine.
Files will be loaded from https://website.com/css/font-awesome.min.css etc.
BUT if you visit website.com/post files will be loaded from https://website.com/**post**/css/font-awesome.min.css that may result in 404 error.
So you can either add a forward slash:
<link href="/css/font-awesome.min.css" rel="stylesheet">
so all files will be loaded from the root folder.
Or a way that I prefer using the asset method
The asset function generates a URL for an asset using the current scheme of the request (HTTP or HTTPS):
<link href="{{ asset('css/font-awesome.min.css') }}" rel="stylesheet">
i have a page that shows many products and each one has a link to view its details,
this is the code that leads to the link:
<a class="btn-danger" href="{{ url('viewpartydetails/'.$party->party_id) }}">
view details
</a>
and this is the route : Route::get('viewpartydetails/{party_id}','PartyController#partydetails');
and this is the code in the controller:
public function partydetails($party_id)
{
if(!Auth::guest())
{ // $party_id=request('partyid');
$party = DB::table('party1')->where('party_id',$party_id)->get();
//dd($party_id);
return view('partydetails',compact('party'));
}
else
return redirect()->guest('login');
}
the problem is the page that i want to show is appearing without any design!!!
but when i delete this part "/{party_id}" all designs are showing up again !!!
what is the problem?
this is the view page :
#extends('layouts.app')
#section('content')
<div id="fh5co-main">
<div class="fh5co-narrow-content">
<div class="row">
<div class="col-md-5">
<h2 class="fh5co-heading animate-box" data-animate-effect="fadeInLeft">About Us Nitro <span>A Web Studio</span></h2>
<p class="fh5co-lead animate-box" data-animate-effect="fadeInLeft">Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
<p class="animate-box" data-animate-effect="fadeInLeft"> Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
</div>
<div class="col-md-6 col-md-push-1 animate-box" data-animate-effect="fadeInLeft">
<img src="images/img_1.jpg" alt="Free HTML5 Bootstrap Template" class="img-responsive">
</div>
</div>
</div>
</div>
#stop
app.blade code:
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- #Dışarıdan Çağırılan Dosyalar Font we Materyal İkonlar Bitiş -->
<link rel="stylesheet" type="text/css" href="css/style1.css">
<link rel="shortcut icon" href="favicon.ico">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic,700' rel='stylesheet' type='text/css'>
<!-- Animate.css -->
<link rel="stylesheet" href="css/animate.css">
<!-- Icomoon Icon Fonts-->
<link rel="stylesheet" href="css/icomoon.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.css">
<!-- Owl Carousel -->
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="css/style.css">
<!-- Modernizr JS -->
<script src="js/modernizr-2.6.2.min.js"></script>
</head>
<body background="images/party1.jpeg">
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-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>
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
#if (Auth::guest())
<li>Login</li>
<li>Register</li>
#else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
<li>
<a href="{{ url('viewparties') }}">
view parties
</a>
</li>
#if(Auth::user()->user_type=="organizer")
<li>
<a href="{{ url('add_party') }}">
add a party
</a>
</li>
#endif
</ul>
</li>
#endif
</ul>
</div>
</div>
</nav>
#yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
<script src="js/jquery.min.js"></script>
<!-- jQuery Easing -->
<script src="js/jquery.easing.1.3.js"></script>
<!-- Bootstrap -->
<!-- Carousel -->
<script src="js/owl.carousel.min.js"></script>
<!-- Stellar -->
<script src="js/jquery.stellar.min.js"></script>
<!-- Waypoints -->
<script src="js/jquery.waypoints.min.js"></script>
<!-- Counters -->
<script src="js/jquery.countTo.js"></script>
<!-- MAIN JS -->
<script src="js/main.js"></script>
</body>
</html>
The issue is coming from your differents css links tags.
Actually you have :
<link rel="stylesheet" type="text/css" href="css/style1.css">
<link rel="shortcut icon" href="favicon.ico">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic,700' rel='stylesheet' type='text/css'>
<!-- Animate.css -->
<link rel="stylesheet" href="css/animate.css">
<!-- Icomoon Icon Fonts-->
<link rel="stylesheet" href="css/icomoon.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.css">
<!-- Owl Carousel -->
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="css/style.css">
<!-- Modernizr JS -->
<script src="js/modernizr-2.6.2.min.js"></script>
Then when you're using the /{party_id} route, your browser try to find
localhost/{party_id}/css/style.css instead of localhost/css/style.css
The solution is to use asset() like you can see at the top of your layout view <link href="{{ asset('css/app.css') }}" rel="stylesheet">
So it should be something like that :
<link rel="stylesheet" type="text/css" href="{{ asset('css/style1.css') }}">
<link rel="shortcut icon" href="{{ asset('favicon.ico') }}">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic,700' rel='stylesheet' type='text/css'>
<!-- Animate.css -->
<link rel="stylesheet" href="{{ asset('css/animate.css') }}">
<!-- Icomoon Icon Fonts-->
<link rel="stylesheet" href="{{ asset('css/icomoon.css') }}">
<!-- Bootstrap -->
<link rel="stylesheet" href="{{ asset('css/bootstrap.css') }}">
<!-- Owl Carousel -->
<link rel="stylesheet" href="{{ asset('css/owl.carousel.min.css') }}">
<link rel="stylesheet" href="{{ asset('css/owl.theme.default.min.css') }}">
<!-- Theme style -->
<link rel="stylesheet" href="{{ asset('css/style.css') }}">
<!-- Modernizr JS -->
<script src="{{ asset('js/modernizr-2.6.2.min.js') }}"></script>
I am running investment website where user deposit money and I have to give them 10% profit of deposited amount after 24 hours of deposit. How can I do it. It should be on daily basis.
please write a comprehensive answer with some sample code. I have tried my best and added the code. I'll provide more code if needed.
Here is my code.
<?php
require_once('../function.php');
require_once("anotifier.php");
connectdb();
session_start();
if (!is_user()) {
redirect("$baseurl/signin");
}
$user = $_SESSION['username'];
$sid = $_SESSION['sid'];
$userdetails = mysql_fetch_array(mysql_query("SELECT id, firstname, mallu, block, sid, mv, activedeposit, earning FROM users WHERE email='".$user."'"));
$uid = $userdetails[0];
$mallu = $userdetails[2];
$ufnm = $userdetails[1];
$activedeposit = $userdetails[6];
$earning = $userdetails[7];
if($sid!=$userdetails[4]){
redirect("$baseurl/signout");
}
if($userdetails[3]==1){
redirect("$baseurl/signout");
}
if($userdetails[5]==0){
redirect("$baseurl/verify");
}
$gen = mysql_fetch_array(mysql_query("SELECT sitetitle FROM general_setting WHERE id='1'"));
$earning1=$activedeposit*10/100;
?>
<!doctype html>
<html lang="en">
<head>
<title>My Account - <?php echo $gen[0]; ?></title>
<meta charset="utf-8">
<!-- Meta -->
<meta name="keywords" content="" />
<meta name="author" content="">
<meta name="robots" content="" />
<meta name="description" content="" />
<!-- this styles only adds some repairs on idevices -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Favicon -->
<link rel="shortcut icon" href="<?php echo $baseurl; ?>/images/favicon.ico">
<!-- Google fonts - witch you want to use - (rest you can just remove) -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500,600,700,800,900' rel='stylesheet' type='text/css'>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- stylesheets -->
<link rel="stylesheet" media="screen" href="<?php echo $baseurl; ?>/js/bootstrap/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $baseurl; ?>/js/mainmenu/menu.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $baseurl; ?>/css/default.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $baseurl; ?>/css/layouts.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $baseurl; ?>/css/shortcodes.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $baseurl; ?>/css/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" media="<?php echo $baseurl; ?>/screen" href="css/responsive-leyouts.css" type="text/css" />
<link rel="stylesheet" type="<?php echo $baseurl; ?>/text/css" href="css/Simple-Line-Icons-Webfont/simple-line-icons.css" media="screen" />
<link rel="stylesheet" href="<?php echo $baseurl; ?>/css/et-line-font/et-line-font.css">
<link rel="stylesheet" href="<?php echo $baseurl; ?>/js/custom-scrollbar/jquery.mCustomScrollbar.css">
<link rel="stylesheet" type="text/css" href="<?php echo $baseurl; ?>/js/smart-forms/smart-forms.css">
<style>
table {
border: 1px solid #ddd;
width: 95%;
}
.btn{
border-radius: 6px;
}
</style>
</head>
<body>
<div class="site_wrapper">
<!--Notification bar-->
<!--div class="topbar white topbar-padding">
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi quod, doloremque nostrum molestiae ab, magni omnis a optio enim distinctio quos </p>
</div>
</div-->
<!--Notification bar END-->
<div class="clearfix"></div>
<div id="header">
<div class="container">
<div class="navbar navbar-default yamm">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#navbar-collapse-grid" class="navbar-toggle"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
<img src="<?php echo $mainpage; ?>/logo.png" style="width: 18px;" alt=""/> </div>
<div id="navbar-collapse-grid" class="navbar-collapse collapse pull-right">
<ul class="nav navbar-nav">
<li class=""> Home</li>
<li class=""> Dashboard</li>
<li class=""> Activity</li>
<li class=""> Deposit History</li>
<li class=""> Withdrawal History</li>
<li class=""> Add Money</li>
<li class=""> Withdraw Money</li>
<li class="" style="padding-left: auto;"> </li>
<li class="dropdown"> <a class="dropdown-toggle align-1" style="color: #000;"><i class="fa fa-user"></i> Account</a>
<ul class="dropdown-menu align-1 two" role="menu">
<li> <i class="fa fa-edit"></i> Update Profile </li>
<li> <i class="fa fa-cog"></i> Change Password </li>
<li> <i class="fa fa-sign-out"></i> Sign Out </li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--end menu-->
<div class="clearfix"></div>
I have divided my template like there is a main template and inside that template, there is a nav are and then content area but it is loading only content
my controller function is
public function index() {
return view('admin.dashboard');
}
app.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">
<title>Laravel</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" integrity="sha384-XdYbMnZ/QjLh6iI4ogqCTaIjrFk87ip+ekIjefZch0Y+PvJ8CDYtEs1ipDmPorQ+" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700">
<!-- Styles -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
{{-- <link href="{{ elixir('css/app.css') }}" rel="stylesheet"> --}}
<style>
body {
font-family: 'Lato';
}
.fa-btn {
margin-right: 6px;
}
</style>
</head>
<body id="app-layout">
#yield('nav')
#yield('content')
<!-- JavaScripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js" integrity="sha384-I6F5OKECLVtK/BL+8iSLDEHowSAfUo76ZL9+kGAgTRdiByINKJaqTPH/QVNS1VDb" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
{{-- <script src="{{ elixir('js/app.js') }}"></script> --}}
</body>
</html>
dashboard.blade.php
#extends('admin.layouts.app')
#section('content')
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-heading">Welcome</div>
<div class="panel-body">
Your Application's Landing Page.
</div>
</div>
</div>
</div>
</div>
#endsection
nav.blade.php
#extends('admin.layouts.app')
#section('nav')
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-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>
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">
Laravel
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
<li>Home</li>
</ul>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
#if(Auth::guard('admin')->user())
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ Auth::guard('admin')->user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><i class="fa fa-btn fa-sign-out"></i>Logout</li>
</ul>
</li>
#endif
</ul>
</div>
</div>
</nav>
#endsection
It's true, you need to change your code a bit.
If I use the following structure:
- views
- layouts
- app.blade.php
- nav.blade.php
- dashboard.blade.php
Here is your app.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">
<title>Laravel</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" integrity="sha384-XdYbMnZ/QjLh6iI4ogqCTaIjrFk87ip+ekIjefZch0Y+PvJ8CDYtEs1ipDmPorQ+" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700">
<!-- Styles -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
{{-- <link href="{{ elixir('css/app.css') }}" rel="stylesheet"> --}}
<style>
body {
font-family: 'Lato';
}
.fa-btn {
margin-right: 6px;
}
</style>
</head>
<body id="app-layout">
#include('layouts.nav')
#yield('content')
<!-- JavaScripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js" integrity="sha384-I6F5OKECLVtK/BL+8iSLDEHowSAfUo76ZL9+kGAgTRdiByINKJaqTPH/QVNS1VDb" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
{{-- <script src="{{ elixir('js/app.js') }}"></script> --}}
</body>
</html>
This will include the navbar inside your layout.
You dashboard.blade.php will look like:
#extends('admin.layouts.app')
#section('content')
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-heading">Welcome</div>
<div class="panel-body">
Your Application's Landing Page.
</div>
</div>
</div>
</div>
</div>
#endsection
Hope this works!
Documentation: https://laravel.com/docs/5.2/blade#extending-a-layout