Bootstrap navigation right appearing on new line?

[jbonnett]

Hi All,

 

I have tried with no luck the navigation just doesn't want to stay on the same line...

 

HTML:

        <div id="nav-menu" class="navbar navbar-style-dark navbar-default navbar-fixed-top">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#"><span><img src="img/Logos/george-little-logo.png" alt="George Little Logo" /></span></a>
            		
                    <button type="button" id="navbar-toggle-menu" class="navbar-toggle" data-toggle="offcanvas" data-target="#myNavmenu" data-canvas="body">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    
                    <div class="search">
                        <button type="button" class="navbar-toggle">
                            <span><i class="glyphicon glyphicon-search search-mobile-btn"></i></span>
                            <div class="search-box">
                                <form action="" method="get">
                                    <input type="text" placeholder="Search..." name="search">
                                </form>
                        	</div>
                        </button>
                    </div>
                </div>
                
                <div id="myNavmenu" class="collapse navbar-collapse" id="navbar-ex-collapse" role="navigation">
                    <ul class="nav">
                        <li>
                            <a class="active" href="#">Home</a>
                        </li>
                        <li>
                            <a href="#">Showings</a>
                        </li>
                        <li>
                            <a href="#">Photos</a>
                        </li>
                        <li>
                            <a href="#">Videos</a>
                        </li>
                        <li>
                            <a href="#">Mixes</a>
                        </li>
                        <li>
                            <a href="#">Hire</a>
                        </li>
                    </ul>
                </div>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="/users/sign_up">Sign Up</a></li>
                    <li class="divider-vertical"></li>
                    <li> 
                        <a class="dropdown-toggle" href="#" data-toggle="dropdown">Sign In <strong class="caret"></strong></a>
                        <div class="more-drop">
                            <form action="[YOUR ACTION]" method="post" role="form" class="form-horizontal">
                                <input class="form-control" id="inputEmail1" placeholder="Email" type="email" style="margin-bottom:.5em">
                                <input class="form-control" id="inputPassword1" placeholder="Password" type="password" style="margin-bottom:.5em">
                                <div class="checkbox">
                                    <label><input type="checkbox"> Remember me</label>
                                </div>
                                <input class="btn btn-primary" style="margin-top:.75em;width: 100%; height: 32px; font-size: 13px;" type="submit" name="commit" value="Sign In">
                            </form>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

jQuery:

function renderMenu() {
	if($(window).width() < 768 || isMobile.any()) {
		$("#myNavmenu").removeClass("collapse");
		$("#myNavmenu").removeClass("navbar-collapse");
		$("#myNavmenu ul.nav").removeClass("navbar-nav");
		$("#myNavmenu ul.nav").removeClass("navbar-left");
		$("#myNavmenu ul.nav").addClass("navbar-right");
		$("#myNavmenu").addClass("navmenu-fixed-right");
		$("#myNavmenu").addClass("offcanvas");
		$(".navbar-toggle").css("display", "block");
		$(".navbar-header").css("float", "none");
	} else {
		$("#myNavmenu").removeClass("navmenu-fixed-right");
		$("#myNavmenu").removeClass("offcanvas");
		$("#myNavmenu").addClass("collapse");
		$("#myNavmenu").addClass("navbar-collapse");
		$("#myNavmenu ul.nav").addClass("navbar-nav");
		$("#myNavmenu ul.nav").addClass("navbar-left");
		$("#myNavmenu ul.nav").removeClass("navbar-right");
		$(".navbar-toggle").css("display", "none");
		$(".navbar-header").css("float", "left");
	}
}

$(window).ready(function() {
	renderMenu();
});

$(window).resize(function() {
	renderMenu();
});

if($(".navbar").width() >= 768) {
	alignMenu();
}

$(window).resize(function() {
	$("#myNavmenu .nav").append($("#myNavmenu .nav li.more ul").html());
	$("#myNavmenu .nav li.more").remove();
	alignMenu();
});

function alignMenu() {
	var w = 0;
	var mw = ($(".navbar").outerWidth(true) - $(".navbar .navbar-brand img").outerWidth(true)) - 350;
	if($(".more").length) {
		mw = ($(".navbar").outerWidth(true) - $(".navbar .navbar-brand img").outerWidth(true)) - $(".more").outerWidth(true);
	}
	var i = -1;
	var menuhtml = '';
	jQuery.each($("#myNavmenu .nav").children(), function() {
		i++;
		w += $(this).outerWidth(true);
		if($(".navbar").width() >= 768 && !isMobile.any()) {
			if (mw < w) {
				menuhtml += $('<div>').append($(this).clone()).html();
				$(this).remove();
			}
		}
	});
	if(menuhtml != "") {
		$("#myNavmenu .nav").append('<li class="more">'
			+ '<a href="#">More <i class="glyphicon glyphicon-chevron-down"></i></a>'
			+ '<div class="more-drop"><ul>' + menuhtml + '</ul></div>'
		+'</li>');
	}
}

I'll attach two screenshots to show the menu before and after. Any help would be much appreciated.

[CroNiX]

2 UL's in the same div#navbar. First UL appears on left, 2nd UL appears on right. Both ULs have "nav navbar-nav" classes. The one to appear on the right has an additional "navbar-right" class.

<div id="navbar" class="collapse navbar-collapse">

  <ul class="nav navbar-nav">

    <li class="active"><a href="/">Left Menu</a></li>

  </ul>

  <ul class="nav navbar-nav navbar-right">

    <li><a href="#">Right Menu</a></li>

  </ul>

</div><!--/.nav-collapse -->

 

I think yours shows on next line because your 2nd UL, the one that's supposed to show on the right, is outside of the div#navbar container.

Edited April 13, 2015 by CroNiX