Jump to content
jbonnett

Bootstrap navigation right appearing on new line?

Recommended Posts

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.

post-127725-0-32930600-1428477028_thumb.png

post-127725-0-01380200-1428477110_thumb.png

Share this post


Link to post
Share on other sites
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 by CroNiX

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.