Bootstrap menu bug on desktop - html

Question

The navigation on my desktop version looks fine when I remove the clear from the mobile version. But when I do, the collapsed menu on my mobile version is bugged. Yet I can't seem to set my clear to default in my media query. I've tried float and position:relative but nothing seems to work to get my brand and my navigation on the same line.
#media only screen and(min-width:786px){
.custom-navbar .navbar-collapse {
clear:none;
}
EDIT: here's a minimal 'working' example: Codepen

Answer 1

You need to restructure your HTML. You have your SVG as in lieu of a button, it should be place inside the toggle-button which is then inside the navbar-header, not after. Also, navbar-right belongs with the ul, not navbar-collpase.
See Docs and working Snippet.
body {
font-size: 62.5%;
}
.navbar.custom-navbar .navbar-nav li a {
font-family: 'Open Sans', sans-serif;
color: #DFBA68;
font-size: 1rem;
}
.navbar.custom-navbar {
background-color: #252626;
}
.navbar.custom-navbar .navbar-brand {
font-family: 'sharpie';
color: #DFBA68;
}
.navbar.custom-navbar .navbar-brand:hover {
color: #DFBA68;
}
.navbar.custom-navbar .navbar-toggle {
z-index: 1;
padding: 0;
margin-top: 10px;
margin-left: 15px;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-fixed-top custom-navbar" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
<svg height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<path d="M0,40C0,40,100,40,100,40C100,40,100,60,100,60C100,60,0,60,0,60" fill="#f7f4ea"></path>
<path d="M0,20C0,20,100,20,100,20M100,80C100,80,0,80,0,80" stroke="#dfba68" style="stroke-width: 4px;"></path>
</svg>
</button> <a class="navbar-brand" rel="home" title="Help">Hannelore Goovaerts.be</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>ABOUT
</li>
<li>PORTFOLIO
</li>
<li>CONTACT
</li>
</ul>
</div>
</div>
</nav>

Answer 2

Remove clear:both from .custom-navbar .navbar-collapse. clear:both; force an element to be placed in the new line after the elements which have float:right; or float:left;.
Codepen
.custom-navbar .navbar-collapse {
/* clear: both; */
float: none;
}