Search code examples
htmlcsstwitter-bootstrapjekyllgithub-pages

Why does Jekyll load navbar.less?

I am generating a site with Jekyll, locally and on Github pages. Both instances load up a navbar.less file (which is throwing off my navbar), but I cannot find in my code.

How is this navbar.less file getting loaded in?

Here is my head.html file:

<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>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
  <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="{{ "/css/style.css" | prepend: site.baseurl }}">
  <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
  <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}">
</head>

My style.css file does not make reference to this. Could it be Bootstrap that's loading it in or Jekyll somehow?

Solution

  • What you see is a chrome/firefox interpretation of the map file generated from less transformation. You can see a reference to it at the very end of you bootstrap css file. This file is here for debugging preprocessor code like less or sass with chrome.

    In fact, your css rule is in bootstrap.min.css file.

    You just have to overwrite it by replacing, in your css/style.css :

    .navbar .navbar-header .navbar-brand img {
    max-height: 43px;
    margin-top: -14px;
}

    by :

    .navbar .navbar-header .navbar-brand img {
    max-height: 43px;
    margin-top: -14px;
    display: inline;
}