CSS not working in laravel

Question

I'm using Laravel to create a web application. So I created a header.css file and it is in public/assets/css/header.css. What I am trying to do is just style the header, but it isn't working.

In my default.blade.php I have

<!doctype html>
<html>
<head>
    @include('includes.head')
</head>
<body>

        @include('includes.header')

    <div id="main" class="row">

            @yield('content')

    </div>

    <footer class="row">
        @include('includes.footer')
    </footer>

</div>
</body>
</html>

My head.blade.php includes the link for the external stylesheet and it is

<meta charset="utf-8">
<meta name="description" content="blah blah.">
<meta name="author" content="Hunter Marshall">

<title>Elite Training Pro</title>

<!-- load bootstrap from a cdn -->
<!--<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/3.0.3/css/bootstrap-combined.min.css">-->

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link media="all" type="text/css" rel="stylesheets" href="{{ URL::asset('assets/css/header.css') }}"></link>

My header.blade.php is

<div class="navbar nav-background">
    <div class="navbar-inner">
        <a id="logo" href="/">Elite Training Pro</a>
        <ul class="nav">
            <li><a href="/">Home</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/projects">Projects</a></li>
            <li><a href="/contact">Contact</a></li>
        </ul>
    </div>
</div>

My header.css is

.nav-background {
    background-color:green;
}

Now I've tried HTML::style(), just assets(), HTML::to() but nothing seems to work. I can see the link to the stylesheet in my head when I look at the source code, but there is no background color. I also don't see the file in the inspect source.

Cache, try : https://laravel.com/docs/5.4/cache https://stackoverflow.com/questions/31455829/laravel-5-clear-cache-in-shared-hosting-server — pokeybit, May 22 '17 at 20:33
Obligatory your `rel` is wrong, it is `stylesheet` (singular) not `stylesheets` (plural) — Ohgodwhy, May 22 '17 at 20:51
Go to your page, press Ctrl + U (view source) find the link to your CSS and copy it to a new tab. Do you get the file? Do you even see the link to it? If answer to first question is no, you probably didn't copy your CSS to correct directory. If answer to second question is no, you probably didn't include your partials correctly. — DevK, May 22 '17 at 21:03
Not sure if this was the issue, but I just changed the rel to stylesheet. It works now. — hjcoder18, May 22 '17 at 22:55

Vengadesh KS · Answer 1 · 2021-05-02T17:00:44.947

1

Just use / before the folder path directive

<link rel="stylesheet" href="/assets/css/styles.css">

In your code try like this

<link media="all" type="text/css" rel="stylesheets" href="{{ URL::asset('/assets/css/header.css') }}"></link>

edited May 02 '21 at 17:00

answered May 02 '21 at 16:54

Vengadesh KS

103
1
5

score 0 · Answer 2 · answered May 23 '17 at 11:17

0

This works href="{{ asset('assets/css/header.css') }}

answered May 23 '17 at 11:17

Daniel Carr

481
6
11

CSS not working in laravel

2 Answers2