Css file works only on one page

Kirby 3 Solved ✅
#1

Hi, I have link the „index.css“ In every of my .php (template) file like this.

<?= css('assets/index.css') ?>

After I change one thing in the index.css.file, to have a fixed menu:

.menu {
position: fixed;
right: 30;
}

But it only works on the first page of the menu. Only on one page.

Do you have any idea why it doesn’t change on all pages?
I’ve already cleared the caches.

#2

Don’t you use a header snippet where you include the stylesheet only once instead of in every template?

Is the path to the stylesheet really correct?

#3

Sorry it was wrong

#4

No, I don’t use snippets. I’m just getting to know that.

This is the page:

http://www.christinasperling.com

The menu is only fixed on the „art“ page.

This is part of my index.css file:

a {
  font-family: 'Poppins';
  font-weight: 500;
  opacity: 0.8;
  font-size: 16px;
  color: #000000;
  text-decoration: none;
  letter-spacing: 2px;
}

html {
  font-family: sans-serif;
  line-height: 150%;
  font-size: 10pt;
}

header {
  margin-bottom: 2rem;
  display: flex;
  justify-content: space-between;
}

body {
  background-size: cover;
  margin: 3rem; 
  background-repeat: no-repeat;
}


img {
  width: 50%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;
  height: auto;
}

.menu {
  position: fixed;
  right: 30;
}

.menu a {
  margin-right: 4rem;
}

And the art.php:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= $site->title() ?></title>

<?= css('index.css') ?>

</head>

<body>

    <header>

   <a class="logo" href="<?= $site->url() ?>"><?= $site->title() ?></a>

        <nav class="menu">
            <?php foreach ($site->children()->listed() as $subpage): ?>
            <a href="<?= $subpage->url() ?>"><?= $subpage->title() ?></a>
            <?php endforeach ?>
        </nav>

   
    </header>
    <?= $page->text() ?>


<?php foreach($page->images() as $file): ?>
    <img src="<?= $file->url() ?>">

<?php endforeach ?>

</body>

</html>

For example the contact.php:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?= $site->title() ?></title>

<?= css('index.css') ?>

</head>

<body>

    <header>

        <a class="logo" href="<?= $site->url() ?>"><?= $site->title() ?></a>

        <nav class="menu">
            <?php foreach ($site->children()->listed() as $subpage): ?>
            <a href="<?= $subpage->url() ?>"><?= $subpage->title() ?></a>
            <?php endforeach ?>
        </nav>

 
    </header>
    <?= $page->text() ?>

</body>

</html>
#5

Oh sorry. It look different if I post the code here… (I´m a beginner :D)

#6

No worries, you have to wrap blocks of code within three backticks before and after the code, like this:

Bildschirmfoto 2021-02-21 um 18.52.04

To me the site looks alright, I see no issues in console with the styles not getting loaded and the menu has the position: fixed attached on every page.

Screenshot of about page:

Bildschirmfoto 2021-02-21 um 18.55.06
Bildschirmfoto 2021-02-21 um 18.55.062122×1418 401 KB

There is an issue with a font not being loaded though.

#7

Thank you very much!!

Yes, this is on every page, but it don’t work on every page. :grimacing:

#8

If I scroll down the page on “art” the menu is fixed, not on other pages, although it should

#9

Since the other pages are almost empty, I had to reduce the window height quite a bit, but for me the menu is fixed on all pages.

Bildschirmfoto 2021-02-21 um 19.29.12
Bildschirmfoto 2021-02-21 um 19.29.121802×328 19.9 KB

#10

Ok. Thanks! Now I a got a idea what was my problem. :joy::+1: Sorry