Thank you Albert,

I can make that work no problem. The ting is ... I need to make the header border with an angel no idea how to do this? Any tips?

It looks like a combination of unordered list (<ul> things) and floats (float-left 's). Those bars in betweens can be images or you can use "|" symbol.

Alright..... I can't seem to get a clear picture of what you're trying accomplish. Your border with an angel might just be simple image manipulation and sizing. Can you elaborate some more. I can't promise you anything but I'll give it a try.

Thank you I have fixed it. I was looking for the: transform: rotate(-1deg); property.

Any idea how to make the childs inside not rotate? I already try ... clear: both; Any more tips?

Thank you

One way to make the children inside not rotate would be to select them and give them the opposite degree value. So in this example you gave the line the transform property with the rotate value of -1 degree like this:

#header-border {
  transform: rotate(-1deg);
}

Now you can select the child - like in this case the menu - and give it this value:

#menu {
  transform: rotate(1deg);
}

I hope that's what you mean.

Greetings

Thank you ... But I put the header in the parrtent div pleas check:

<div id="header_nav" class="header01">

<nav class="navbar navbar-fixed-top">
  <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="logo-pro-ondernemer" id='logo' href="index.html"><img src="img/Pro-Ondernemer-venture-capital.svg" alt="Pro-Ondernemer-Venture-Capital"></a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav" id="navbar-nav01">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">Over ons</a></li>
        <li><a href="#about">Ondernemers</a></li>
        <li><a href="#about">MBI</a></li>
        <li><a href="#about">Investeerders</a></li>
        <li><a href="#contact">Contact</a></li>

        <!--
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li class="dropdown-header">Nav header</li>
            <li><a href="#">Separated link</a></li>
            <li><a href="#">One more separated link</a></li>
            -->
          </ul>
        </li>
      </ul>
      </div>
      </nav>
    </div>
    </div><!--/.nav-collapse -->

CSS

/* navbar */

.nav>li>a:focus, .nav>li>a:hover { text-decoration: none; background-color: #ea6f06; border-radius: 6%; }

.logo-pro-ondernemer { width: 260px !important; display: inline-block; padding: 20px 0; }

.navbar-nav { float: right; margin: 0; }

.navbar-fixed-bottom, .navbar-fixed-top { position: absolute; right: 0; left: 0; z-index: 1030; }

.navbar-inverse { background-color: #FFFFFF !important; background-image: none; border: none; display: block; }

.header01 { width:100%; height:100px; background: #ffffff; position:fixed; top:0; left:0; transition: height 500ms, background 500ms; border-bottom: solid 3px #ea6f06; box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.36); z-index: 100; transform: rotate(-1deg); clear: both; }

.header01.tiny { height:85px; background: #ffffff; }

.navbar-nav { float: right; margin: 20px 0; color: #292b53 !important; }

.navbar-nav a { color: #292b53 !important; }

logo.tiny {

width: 240px !important;
transition: 500ms ease-out;

}

.navbar-nav { float: right; margin: 20px 0; color: #292b53 !important; display: block; }

navbar-nav01.tiny {

font-size: 13px;
transition: 500ms ease-out;

}

.navbar-toggle { margin-top: 25px; margin-right: 30px; margin-bottom: 8px; background-color: rgb(0, 0, 0); background-image: none; border: 1px solid rgba(23, 23, 1, 0.62); border-radius: 4px; }

/* header blocks */

.header-block .col-md-4 { padding: 0; margin: 200px 0 80px 0;

}

Any idea how to fix ?