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
Related
I'm tasked to correct this from an outside developer, but am stumped.
I reviewed two very similar Stackoverflow questions, from 6 years ago,
but could not resolve this.
The following is roughly how it renders in a browser:
<HTML lang="en">
<head>(this is completely empty)</head>
<body >
<nav></nav>
<div class="header-nav">
</div>
links display
Finally, the 'head' section from the code below, renders here
(meta tags, title etc.) but without the 'head' tags.
Frontapp.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', 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.0">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Some website</title>
<!-- Favicon -->
<link href="{{ asset('argon') }}/img/brand/favicon.png" rel="icon" type="image/png">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
<!-- Extra details for Live View on GitHub Pages aaaddd -->
<!-- Icons -->
<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
{{-- <link href="{{ asset('argon') }}/vendor/nucleo/css/nucleo.css" rel="stylesheet"> --}}
{{-- <link href="{{ asset('argon') }}/vendor/#fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"> --}}
{{-- Animation link --}}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
{{-- Bootstrap --}}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- Argon CSS -->
{{-- <link type="text/css" href="{{ asset('argon') }}/css/argon.css?v=1.0.0" rel="stylesheet"> --}}
<link type="text/css" href="{{ asset('argon') }}/css/web.css" rel="stylesheet">
</head>
<body class="{{ $class ?? '' }}">
{{-- #auth()
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
#csrf
</form>
#include('layouts.navbars.sidebar')
#endauth --}}
{{-- <div class="main-content">
#include('layouts.navbars.navbar')
#yield('content')
</div> --}}
{{-- #guest()
#include('layouts.footers.guest')
#endguest --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg=="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js"
integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous">
</script>
#stack('js')
<script>
setTimeout(() => {
let allAlerts = document.querySelectorAll(".alert");
allAlerts.forEach((alert) => {
alert.remove();
});
}, 6000);
</script>
{{-- <script>
var d = new Date();
var n = d.getFullYear();
document.querySelector(".year").innerText = n;
</script> --}}
<!-- Argon JS abcd-->
{{-- <script src="{{ asset('argon') }}/js/argon.js?v=1.0.0"></script> --}}
<script src="{{ asset('argon') }}/js/custom.js"></script>
<script src="{{ asset('argon') }}/js/animation.js"></script>
</body>
</html>
Edit, I was requested to provide the controller for FrontApp.Blade.php
I'm not completely certain what to put here but here's what I found.
home.blade.php (first 16 lines)
#extends('layouts.frontapp')
#include('layouts.frontlayout.header')
<div class="jumbotron homeBanner">
<h1>Somewebsite</h1>
<h4 class="lead">text</h4>
<h4 class="lead">text</h4>
<br>
<a class="btn btn-lg banner-button" href="#" role="button">EXPLORE MORE <i class="las la-arrow-right text-white"></i></a>
</p>
<div class="row text-center">
<div class="col-md-12">
<a class="ct-btn-scroll circle-down-arrow-icon" href="#first-section"><i class="las la-chevron-circle-down"></i></a>
</div>
</div>
</div>
Header.blade.php (first 25 lines)
#extends('layouts.frontapp')
<nav class="navbar navbar-expand-sm bg-faded navbar-light shadow-sm">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#" style="color: #666 !important"><i class="las la-phone-volume"></i> phone</a>
</li>
<li class="nav-item">
<a class="nav-link" href="mailto:info#Somewebsite.com"
target="_blank" style="color: #666 !important"><i class="las la-envelope"></i> info#Somewebsite.com</a>
</li>
</ul>
<div class="navbar-collapse collapse" id="navbar1">
<ul class="navbar-nav rightNav">
<li class="nav-item">
<a class="nav-link" href="#"><i class="lab la-facebook-f"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="lab la-twitter"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="lab la-instagram"></i></a>
</li>
</ul>
</div>
</nav>
Here is how the full page renders, the head from the Blade is in the wrong position. Putting the head at line 73 to line 132 in the html
<html lang="en"><head></head><body class="" data-new-gr-c-s-check-loaded="8.878.0" data-gr-ext-installed=""><nav class="navbar navbar-expand-sm bg-faded navbar-light shadow-sm">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#" style="color: #666 !important"><i class="las la-phone-volume"></i> phone</a>
</li>
<li class="nav-item">
<a class="nav-link" href="mailto:info#somewebsite.com" target="_blank" style="color: #666 !important"><i class="las la-envelope"></i> info#somewebsite.com</a>
</li>
</ul>
<div class="navbar-collapse collapse" id="navbar1">
<ul class="navbar-nav rightNav">
<li class="nav-item">
<a class="nav-link" href="#"><i class="lab la-facebook-f"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="lab la-twitter"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="lab la-instagram"></i></a>
</li>
</ul>
</div>
</nav>
<div class="header-nav">
<div class="sticky-top">
<nav class="navbar navbar-expand-lg navbar-light navbarcolor">
<div class="container-fluid">
<div class="navbar-brand">
<a href="/">
<img src="https://www.somewebsite.com/argon/img/websiteImages/Somewebsite-new-logo.png" alt="Logo" id="navIcon">
</a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="las la-bars text-white"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav rightNav my-2 my-lg-0">
<li class="nav-item active">
<a class="nav-link webnav" id="home-nav" href="/">HOME</a>
</li>
<li class="nav-item ">
<a class="nav-link webnav" id="about-us-nav" href="/about">ABOUT US</a>
</li>
<li class="nav-item ">
<a class="nav-link webnav" id="electrical-nav" href="/electrical">ELECTRICAL</a>
</li>
<li class="nav-item ">
<a class="nav-link webnav" id="stab-nav" href="/stabalizers">STAB</a>
</li>
<li class="nav-item ">
<a class="nav-link webnav" id="partners-nav" href="/partners">PARTNERSHIP</a>
</li>
<li class="nav-item ">
<a class="nav-link webnav" id="blog-nav" href="/blog">BLOG</a>
</li>
<li class="nav-item ">
<a class="nav-link webnav" id="contact-nav" href="/contact">CONTACT</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="csrf-token" content="y8br0kSwVHC1QSvZqPdxaw3MyykzAKlTa80MvaS8">
<title>Somewebsite</title>
<!-- Favicon -->
<link href="https://www.somewebsite.com/argon/img/brand/favicon.png" rel="icon" type="image/png">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
<!-- Extra details for Live View on GitHub Pages aaaddd -->
<!-- Icons -->
<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- Argon CSS -->
<link type="text/css" href="https://www.somewebsite.com/argon/css/web.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous">
</script>
<script>
setTimeout(() => {
let allAlerts = document.querySelectorAll(".alert");
allAlerts.forEach((alert) => {
alert.remove();
});
}, 6000);
</script>
<!-- Argon JS abcd-->
<script src="https://www.somewebsite.com/argon/js/custom.js"></script>
<script src="https://www.somewebsite.com/argon/js/animation.js"></script>
<div class="jumbotron homeBanner">
<h1>Somewebsite</h1>
<h4 class="lead">text</h4>
<h4 class="lead">Services</h4>
<br>
<a class="btn btn-lg banner-button" href="#" role="button">EXPLORE MORE <i class="las la-arrow-right text-white"></i></a>
<p></p>
<div class="row text-center">
<div class="col-md-12">
<a class="ct-btn-scroll circle-down-arrow-icon" href="#first-section"><i class="las la-chevron-circle-down"></i></a>
</div>
</div>
</div>
<section id="first-section" class="pt-5">
<div class="container">
<div class="row pt-5">
<div class="col-md-6 p-5">
<h4 class="animated-left animate__animated">Engineering</h4>
<br>
<p class="animated-left animate__animated">
Text
</p>
<p class="animated-left animate__animated">
Text
</p>
</div>
<div class="col-md-6 text-center">
<img class="animated-fadein animate__animated" src="https://www.somewebsite.com/argon/img/websiteImages/home_first_para.jpg" alt="home_image-01" id="home_image-01">
</div>
</div>
<br>
<div class="row pt-5">
<div class="col-md-6 text-center">
<img class="animated-fadein animate__animated animate__delay-1s" src="https://www.somewebsite.com/argon/img/websiteImages/home_second_para.png" alt="home_image-02" id="home_image-02">
</div>
<div class="col-md-6 p-5">
<h4 class="animated-right animate__animated animate__delay-1s">Engineering</h4>
<br>
<p class="animated-right animate__animated animate__delay-1s">
Text
</p>
<p class="animated-right animate__animated animate__delay-1s">
Text
</p>
</div>
</div>
</div>
</section>
<p> </p>
<section id="second-section" class="pt-5">
<div class="row">
<div class="col-md-6 business-solutions-col text-center p-5">
<h3>business solutions</h3>
<br>
<div class="row">
<div class="col-md-4">
<img src="https://www.somewebsite.com/argon/img/websiteImages/Complete-Care.png" id="img-complete-care">
</div>
<div class="col-md-8">
<p class="text-justify animated-down animate__animated animate__delay-1s"><span id="complete-care">Complete Care</span><br>
Text</p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<img src="https://www.somewebsite.com/argon/img/websiteImages/Electrical-Solutions.png" id="img-electrical-solutions">
</div>
<div class="col-md-8">
<p class="text-justify animated-down animate__animated animate__delay-1s"><span id="electrical-solutions">Electrical</span><br>
Text</p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<img src="https://www.somewebsite.com/argon/img/websiteImages/Stab.png" id="img-stab">
</div>
<div class="col-md-8">
<p class="text-justify animated-down animate__animated animate__delay-1s"><span id="stab">Stab</span><br>
Our sister company,
<a class="btn btn-sm product-button" href="https://www.SisterWebsite.com" role="button">Please visit SisterWebsite.com</a>
</p>
</div>
</div>
</div>
<div class="col-md-6 business-solutions-video animated-zoomin animate__animated animate__delay-1s">
<div id="video-col" style="margin-right: 0%;margin-left: -3%;" hidden="">
<video class="bs-video" id="bs-video" controls="">
<source src="https://www.somewebsite.com/argon/img/websiteImages/New_3.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
</section>
<section id="third-section">
<div class="third-sec-with-img">
<div class="container">
<h3 class="animated-right animate__animated animate__delay-3s">ENGINEERING</h3>
<p class="lead animated-right animate__animated animate__delay-3s">Engineering</p>
<p class="animated-right animate__animated animate__delay-3s">
text removed
</p>
<a class="btn btn-outline btn-lg btnoutline-white animated-right animate__animated animate__delay-3s" href="https://www.somewebsite.com/electrical" role="button">Electrical| <i class="las la-arrow-right text-white"></i></a>
<a class="btn btn-outline btn-lg btnoutline-white animated-right animate__animated animate__delay-3s" href="#" role="button">Service Request Form | <i class="las la-arrow-right text-white"></i></a>
<p></p>
</div>
</div>
</section>
<section id="third-section">
<div class="container">
<div class="row">
<div class="col-md-6 pb-5 text-right" id="abc-d-img">
<img src="https://www.somewebsite.com/argon/img/websiteImages/sister_new.png" alt="sister">
</div>
<div class="col-md-6 pt-5 pb-5 text-left sister-colum">
<h6 style="color: #890304;">sister</h6>
<p>Excellence </p>
<h4>Products</h4>
<br>
<div>
<a class="btn btn-sm product-button" href="https://www.somewebsite.com/stab" role="button">PRODUCT <i class="las la-arrow-right text-white"></i></a>
</div>
</div>
</div>
</div>
</section>
<footer class="bg-white text-center text-lg-start footerMain">
<div class="border-top-2" id="main-footer">
<div class="container p-4">
<div class="row">
<div class="col-md-4">
<a href="/">
<img src="https://www.somewebsite.com/argon/img/websiteImages/somewebsite-new-logo.png" alt="Logo" id="footer-logo">
</a>
</div>
<div class="col-md-4">
<h3 id="footer-address">ADDRESS</h3>
<p>
text
</p>
</div>
<div class="col-md-4" id="footer-icon">
<i class="lab la-facebook"> </i>
<i class="lab la-twitter"></i>
<i class="lab la-linkedin"></i>
</div>
</div>
</div>
</div>
<div class="text-center p-3 second-footer">
somewebsite <span class="year">2021</span> | All Rights Reserved <strong>
</strong></div><strong>
</strong></footer><strong>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="csrf-token" content="y8br0kSwVHC1QSvZqPdxaw3MyykzAKlTa80MvaS8">
<title>Some Webstite</title>
<!-- Favicon -->
<link href="https://www.somewebsite.com/argon/img/brand/favicon.png" rel="icon" type="image/png">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
<!-- Extra details for Live View on GitHub Pages aaaddd -->
<!-- Icons -->
<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- Argon CSS -->
<link type="text/css" href="https://www.somewebsite.com/argon/css/web.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous">
</script>
<script>
setTimeout(() => {
let allAlerts = document.querySelectorAll(".alert");
allAlerts.forEach((alert) => {
alert.remove();
});
}, 6000);
</script>
<!-- Argon JS abcd-->
<script src="https://www.somewebsite.com/argon/js/custom.js"></script>
<script src="https://www.somewebsite.com/argon/js/animation.js"></script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="csrf-token" content="y8br0kSwVHC1QSvZqPdxaw3MyykzAKlTa80MvaS8">
<title>SomeWebsite</title>
<!-- Favicon -->
<link href="https://www.somewebsite.com/argon/img/brand/favicon.png" rel="icon" type="image/png">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
<!-- Extra details for Live View on GitHub Pages aaaddd -->
<!-- Icons -->
<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- Argon CSS -->
<link type="text/css" href="https://www.somewebsite.com/argon/css/web.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous">
</script>
<script>
setTimeout(() => {
let allAlerts = document.querySelectorAll(".alert");
allAlerts.forEach((alert) => {
alert.remove();
});
}, 6000);
</script>
<!-- Argon JS abcd-->
<script src="https://www.somewebsite.com/argon/js/custom.js"></script>
<script src="https://www.somewebsite.com/argon/js/animation.js"></script>
</strong></body></html>
```
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>
Published
Unpublished
My Navbar went missing i use Laravel and the function blade
Bootstrap is working seeing that the Jumbotron is activated
Can someone help?
Here is the navigation Code
<!DOCTYPE html>
<html>
<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>#yield('title')</title>
<!-- Bootstrap Core Css -->
<link href="plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Sweet Alert Css -->
<link href="plugins/sweetalert/sweetalert.css" rel="stylesheet" />
<!-- Design Css -->
<link href="plugins/pagecss/front_master.css" rel="stylesheet" />
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" >
<div class="container-fluid">
<div class="navbar-header">
<img id = "brnd" style="float:left;margin-top: 0.7em;margin-right: 1em;" alt="Brand" src="../images/index.jpg"> <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="/">i-Kasal</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="#">Home</li>
<li><div class="fb-share-button" data-
href="https://ikasal.uphero.com" data-layout="button_count" data-
size="small" data-mobile-iframe="true"><a
class="fb-xfbml-parse-ignore" target="_blank"
href="https://www.facebook.com/sharer/sharer.php?
u=https%3A%2F%2Fikasal.uphero.com%2F&src=sdkpreparse"><button
id = "sharebtn" class="btn btn-primary navbar-btn">Share
#Facebook</button></a></div></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class = "#yield('Signup')"><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li class = "#yield('Login')"><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
<!-- Jquery Core Js -->
<script src="plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap Core Js -->
<script src="plugins/tether-master/dist/js/tether.min.js"></script>
<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
<!-- Jquery Validation Plugin Css -->
<script src="plugins/jquery-validation/jquery.validate.js"></script>
<!-- Sweet Alert Plugin Js -->
<script src="plugins/sweetalert/sweetalert.min.js"></script>
#yield('body')
</body>
</html>
And here is the welcome page code
#extends('layout.main.front_master')
#section('title','iKasal')
#section('body')
<!-- Design Css -->
<link href="../../../plugins/pagecss/welcome.css" rel="stylesheet" />
<div class="jumbotron" style = "padding-top:100px;">
<div class="container">
<h1 style="font-size:200px;">i-Kasal</h1>
<p style="font-size:80px;">Welcome to iKasal</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button"
style="font-size:50px;width: 25%">Learn more</a></p>
</div>
</div>
#endsection
I am using this bootstrap blade view in Laravel. But my view file did not display correctly. That means my #extends('layouts.app') override <div class="container">
#extends('layouts.app')
#section('content')
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<h1>ABOUT US</h1>
<h5>Wealth Lanka Management (Private) Ltd (Wealth Lanka or WLM) is a specialized investment banking and financial consultancy firm engaged in feasibility studies , project advisory services, investment banking, capital market and corporate advisory services as well as consultancy services.The main promoters, Messrs Mangala Boyagoda and Asoka Sirimane possess over three decades of local and international expertise in financial and business management, banking and financial services.</h5>
</div>
</div>
</div>
#endsection
How can I fix this?
updated
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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="{{asset('favicon.ico')}}">
<title>Wealth Lanka</title>
<!-- Bootstrap core CSS -->
<link href="{{asset('css/bootstrap.min.css')}}" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="{{asset('css/ie10-viewport-bug-workaround.css')}}" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="{{asset('js/ie-emulation-modes-warning.js')}}"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Custom styles for this template -->
<link href="{{asset('css/carousel.css')}}" rel="stylesheet">
</head>
<!-- NAVBAR
================================================== -->
<body>
<div class="navbar-wrapper">
<div class="container">
<nav class="navbar navbar-default
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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 src="{{asset('/imgs/logo.png')}}"></a>
{{-- <a class="navbar-brand" href="#">WEALTH LANKA MANAGEMENT</a>--}}
</div>
<div id="navbar" class="navbar-collapse collapse">
{{-- <ul class="nav navbar-nav">--}}
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li class="dropdown">
About<span class="caret"></span>
<ul class="dropdown-menu">
<li>About Us</li>
<li>Boad of Ditectors</li>
<li>Senior Team</li>
{{-- <li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>--}}
</ul>
</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
#yield('content')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="{{asset('js/bootstrap.min.js')}}"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="{{asset('js/vendor/holder.min.js')}}"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="{{asset('js/ie10-viewport-bug-workaround.js')}}"></script>
</body>
</html>
I am developing an e-commerce website based in Laravel. I have the following file:
<!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">
<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>
#if(!Auth::guest())
<span class="icon-bar">Cart</span>
#endif
#if(Auth::user()->user_level == 1)
<span class="icon-bar">Create item</span>
#end
</button>v
<!-- 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::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><i class="fa fa-btn fa-sign-out"></i>Logout</li>
</ul>
</li>
#endif
</ul>
</div>
</div>
</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>
But when I run any page in my local browser I get the following error message:
1 FatalErrorException in 12864a26e90179d06aed7c0f8dcccf47c0f50961.php line 86: syntax error, unexpected end of file
I'm not sure if it's because I'm using model references. I'm still new to Laravel and am not sure where the error lies in my syntax or the use of models in the view.
Looks like you have a syntax error on the following line:
#if(Auth::user()->user_level == 1)
<span class="icon-bar">Create item</span>
#end
Should be #endif instead of just #end.