nav bar fixed to top.

[zenlaboratory]

I'm trying to keep the nav bar fixed to the top of the web page.

Try this option in header.html but nothing happens, any idea?

<header id="header">
<nav class="navbar navbar-fixed-top">
<div class="container">
{% for item in site.data.settings.menu %}
<a href="{{ item.url }}">{{ item.name }}</a>
{% endfor %}
</div>
</nav>
<h1><span>{{ site.data.settings.title }}</span></h1>
<p class="kicker">{{ site.data.settings.description }}</p>
</header>

Thank's for this great theme!

[Peshyy]

can you post the CSS as well?

[zenlaboratory]

Ohhh, sorry.

This is an example of de nav that i would like to have in my site: http://ojs.xyz/solid-jekyll/

This is the _header.sass...

header
  @extend %background-image
  background:
    position: 30px 20px, 50% 50%
    image: url(../img/#{$logo-path}), url(../img/#{$hero-path}) 
  padding-bottom: 50px

  .logo
    +size(70px)
    float: left
    margin: 10px 0 0 30px

    path
      fill: rgba(0,0,0,0.4)

  nav
    float: right
    padding: 30px 30px 0 0

    a
      display: inline-block
      margin-left: 20px

      color: rgba(0,0,0,0.7)
      @extend %small-bold

      &:hover
        color: rgba(0,0,0,1)

  h1
    text-align: center
    font:
      size: 72px
      weight: 700
    color: white
    text-transform: uppercase
    letter-spacing: 0.05em
    margin-bottom: 20px
    clear: both
    padding-top: 100px

    span
      display: inline-block
      padding: 0.2em 0.5em
      border: white solid 10px

  .kicker
    @extend %small-bold
    text-align: center
    letter-spacing: 0.05em
    color: white
    line-height: 1

@media (max-width: 640px)
  header
    background:
      position: 50% 20px, 50% 50%

    nav
      float: none
      text-align: center
      padding-top: 90px

    h1
      padding-top: 0px

Thank's in advance.

[Peshyy]

From what I can see, there's no class in the css file named 'navbar-fixed-top'. Maybe you forgot to add it?

[zenlaboratory]

Many thanks Peshyy. I'll Try to fix it.

[DylanSpicker]

Just as a follow up here, "navbar-fixed-top" is a default Twitter Bootstrap class. It does not work in any HTML page simply as the styles are not included. Bootstrap can be awesome to use, but completely unnecessary in other cases (this project for instance!)

Try reading up on positioning https://developer.mozilla.org/en-US/docs/Web/CSS/position and really be verbose in your markup/css with what you want to do. Try and describe it, and the language should match!

Let us know if you need some further help.

[niklasravnsborg]

@zenlaboratory @ZDesign Or you may wanna watch @travisneilson's beginner series about position in CSS. :relaxed:

[zenlaboratory]

Many thanks all for your help. I'm going to watch the links that you suggest. TNX!