Bootstrap menu line breaks - javascript

I am having some trouble having a 'pull-right' element in a navbar remain on the same line as the menu. I've set it up in a jsfiddle.
Here's the general outline:
<div class="navbar navbar-inverse navbar-fixed-top hidden-print">
<div class="navbar-inner">
<div class="container">
<ul class="nav nav-pills">
<li>....</li>
</ul>
<div class="pull-right">
<ul class="nav pull-right">
<li>....</li>
.... and so on
Ideally the menu items, and user dropdown would be on the same line. The menu bar should have its height determined by the button sizes.

You need to pull-left the list:
<ul class="nav nav-pills pull-left">

Related

Open Bootstrap accordion panel from menu bar

my menu put in header.html which will be loaded in all pages.
If I click the menu from index.html, it will open the corresponding accordion panel in product.html by using below js code (which place in the end of product.html markup ).
But if I click the menu from product.html, no respond from the accordion panel.
what wrong with my code?
$(function(){
// check if there is a hash in the url
if ( window.location.hash != '' )
{
// remove any accordion panels that are showing (they have a class of 'in')
$('.collapse').removeClass('in');
// show the panel based on the hash now:
$(window.location.hash + '.collapse').collapse('show');
}
});
header.html
<header>
<nav class="navbar navbar-default menu" role="navigation">
<div class="container-fluid">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li class="dropdown">
<a href="#" class="dropdown-toggle menu-item" data-toggle="dropdown">Products
<b class="caret"></b>
</a>
<div class="row">
<div class="col-md-6">
<div>
<ul>
<li>
product A
</li>
<li class="menu-li" wp-loop-skip>
product B
</li>
<li class="menu-li" wp-loop-skip>
product C
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
Thanks.

How to avoid Logo changing position on resizing of window?

I am working on Bootstrap navbar and after resizing as the hamburger menu shows the logo shifts its position and even overflows the navbar. How can I make the logo responsive so that it changes its size or position as the navbar is resized in the window?
<!-- Navigation Bar -->
<div class="navbar navbar-default" id="navbar-outer">
<div class="container-fluid" style="margin:0px;">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
<span class=" glyphicon glyphicon-menu-hamburger"></span>
</button>
</div>
<a class="navbar-brand" href="#">
<img src="../images/LOL_LOGO_NEW-01.png" />
</a>
<div class="collapse navbar-collapse" id="menu">
<ul class="navbar navbar-nav" id="navbar-menu">
<li><a href="#" >WHAT WE DO</a></li>
<li>WHO WE ARE</li>
<li>OUR WORK</li>
<li>VENTURES</li>
<li>BLOG</li>
<li>CONNECT</li>
</ul>
</div>
</div>
Also, along with the answer if you could provide me with the reason as to why it happened then it'll be appreciated as I am still in the learning phase.
Thanks. :)
without resizing it looks normal
look how it overflows on resize
I added some background color so you can easily see the block for each container. The logo will be red, the navbar-header will be yellow, and the navbar-collapse will be green.
navbar-brand has a float: left so it will float to the left of the block, if you have it after navbar-header(which has display:block so it will take the whole width of the screen) block it will just floating left below, you can move it inside navbar-header or move it up outside of container-fluid.
.navbar-brand {
background: red;
float: right;
display: block;
}
.navbar-header {
background: yellow;
}
.navbar-collapse {
background: green;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Navigation Bar -->
<div class="navbar navbar-default" id="navbar-outer">
<div class="container-fluid" style="margin:0px;">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="../images/LOL_LOGO_NEW-01.png" />
</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
<span class=" glyphicon glyphicon-menu-hamburger"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="menu">
<ul class="navbar navbar-nav" id="navbar-menu">
<li>WHAT WE DO</li>
<li>WHO WE ARE</li>
<li>OUR WORK</li>
<li>VENTURES</li>
<li>BLOG</li>
<li>CONNECT</li>
</ul>
</div>
</div>

Bootstrap toggle menu with google maps

I want to create a template with Bootstrap. Firstly, I added two navbar. I used position is fixed. I want to use toogle menu with Detail, List and Map links. Later I created three div elements. First element have col-md-2 class. Second element have col-md-4 class. Third element have col-md-6 class. When the page is loaded the third element default class have col-md-12. Detail is clicked the map class should be col-md-10 and first div should be visible. Later List is clicked if first div is not visible List should be visible and map should be col-md-8. When the first div is visible and second div is clicked. First div should be col-md-2. Second div should be col-md-4 and map should be col-md-6. How can I solve? Also map didnt work on https://jsfiddle.net. Fiddle link is https://jsfiddle.net/sgq0oqeb/5/ .
HTML code
<nav class="navbar navbar-default navbar-fixed-top" style="border-bottom:1px solid #cdcdcd; min-height:40px;">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav pull-right">
<li>Home</li>
<li>Place</li>
<li>Profile</li>
</ul>
</div>
</nav>
<nav class="navbar navbar-default"style="margin-top:50px; margin-bottom:0px; background-color:#cafd96; border:0 !important; height:40px;">
<div class="container-fluid">
<ul class="nav navbar-nav pull-right">
<li><a id="menu-toggle">Detail</a></li>
<li><a id="menu-toggle2">List</a></li>
<li class="active">Map</li>
</ul>
</div>
</nav>
<div class="col-md-2 hidden" style="border:1px solid black" id="detail">
<div class="container-fullwidth">
<div id="wrapper">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Start Bootstrap
</a>
</li>
<li>
Dashboard
</li>
<li>
Shortcuts
</li>
<li>
Overview
</li>
<li>
Events
</li>
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<div id="page-content-wrapper">
<div class="container-fluid">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 hidden" id="list">
Second Div
</div>
<div class="col-md-12" style="padding:0px;" id="harita">
<nav class="navbar navbar-default"style=" margin-bottom:0px; border-radius:0px; background-color:#cdcdcd">
<div class="container-fluid">
<ul class="nav navbar-nav pull-right">
<!--<li class="active">Home</li>-->
</ul>
</div>
</nav>
<div id="map"></div>
</div>
<nav class="navbar navbar-default navbar-fixed-bottom" style="z-index:1 !important; background-color:#cdcdcd">
<div class="container-fluid">
<ul class="nav navbar-nav pull-right">
<!--<li class="active">Home</li>-->
</ul>
</div>
</nav>
Javascript code
var map;
var marker;
var infowindow = new google.maps.InfoWindow();
function initialize() {
var mapOptions = {
center: {
lat: 38.72837591823979,
lng: 35.13427734375
},
zoom: 7,
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
};
google.maps.event.addDomListener(window, 'load', initialize);

Twitter Bootstrap 3 layout issue

I am brand new to Bootstrap 3 and am trying to achieve a header that looks like the following:
As you can see there are several components here:
Logo; left-aligned
Menu items to the right of the logo
Message of the day (MOTD) in the top-right
"Hi, username!", right-aligned
"Envelope" Glyphicon to the left of the Username
"Heart" Glyphicon to the left of the Envelope Glyphicon (in the picture above it is a star but it should be a heart)
Here is my jsFiddle representing my best attempt, and here is the main <body> element of that fiddle:
<!DOCTYPE html>
<html>
<head>
<!-- Stuff goes here -->
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Logo</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Menu 1 | Menu 2 | Menu 3</li>
<li class="active">This is the message of the day up here!</li>
<li class="active"><span class="glyphicon glyphicon-heart"></span></li>
<li class="active"><span class="glyphicon glyphicon-envelope"></span></li>
<li class="active">Hi, smeeb!</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
When I run this in jsFiddle, nothing is laid out properly and I can't even see most of the <li> elements. Any idea as to where I'm going awry?
Put the class "in" after the class "navbar-collapse" in the div with the id property "navbar".
With the class "in", your navbar will begin visible.
<!DOCTYPE html>
<html>
<head>
<!-- Stuff goes here -->
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Logo</a>
</div>
<div id="navbar" class="collapse navbar-collapse in">
<ul class="nav navbar-nav">
<li class="active">Menu 1 | Menu 2 | Menu 3</li>
<li class="active">This is the message of the day up here!</li>
<li class="active"><span class="glyphicon glyphicon-heart"></span></li>
<li class="active"><span class="glyphicon glyphicon-envelope"></span></li>
<li class="active">Hi, smeeb!</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
You can use this markup and style it according to your css. Make menus to left and others name and icons to right menu. then seperate the top message and position absolute it to the parent nav bar relative.
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Menu 1 </li>
<li class="active">Menu 2</li>
<li class="active">Menu </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active"><span class="glyphicon glyphicon-heart"></span></li>
<li class="active"><span class="glyphicon glyphicon-envelope"></span></li>
<li class="active">Hi, smeeb!</li>
</ul>
</div>
<div>This is the message of the day up here!</div>
Ok, I run the risk of getting down voted here, but from a design perspective you could run into issues with the "quote of the day" in the navbar, especially when on smaller devices as things "scoot in".
Might I suggest having a top bar right above the nav?
<div class="top-bar-wrap">
<div class="container">
<div class="top-bar">
<div class="pull-right"> <!-- This will keep your quote to the right. Just change it to pull-left if if you want it to start from the left. -->
<p>Quote of the day</p>
</div>
</div>
</div>
</div>
Then you will be freed up to have your nav and icons next to the links. Just make sure to add "navbar-right" to your navbar holding your li items. You can add these gliphs in as li items if you'd like, or you can add them following the li with a -- display:inline -- property in your CSS and that should work. ALTHOUGH, might I suggest one more thing?
As a designer first that came to the dark side of development... the icons and code to display the username might also be best served in a bar just below your nav. You can duplicate the code for the "top-bar" section and place it just under your nav.
/* For the topbar above the nav */
.top-bar-wrap {
padding: 6px 0;
background-color: #333; }
.top-bar {
min-height: 20px;
line-height: 20px; }
/* For the bar just below the nav "Member-bar" */
.member-bar-wrap {
padding: 6px 0;
background-color: #333; }
.member-bar {
min-height: 20px;
line-height: 20px; }
<div class="member-bar-wrap">
<div class="container">
<div class="member-bar">
<div class="pull-right">
<!-- Gliphs and code for your member name display -->
</div>
</div>
</div>
</div>
That will keep everything nice and tidy... and you won't run into issues for smaller screens.

AngularJS getting & setting element height

I am trying to do the following where bootstrap style is being applied. navbar-fixed-top bring that element position to be fixed at top. #subnav will show or hide depend on showsubnav value.
<div id="backnav">
<div id="topnav" class="container-fluid navbar-fixed-top">
<nav id="mainnav" class="navbar navbar-default"></nav>
<nav id="subnav" class="navbar navbar-inverse" ng-show="showsubnav"></nav>
</div>
</div>
http://jsfiddle.net/20f02378/
How can I have the #backnav height to be the same as #topnav?
The problem with what you want to achieve falls under this question Fixed position but relative to container
Getting the height of the element wont help you unless you intend to add a padding to the top of the content you wish to push down, or override the CSS. However, to answer the question, to get the height of an element:
var height = angular.element('#backnav').height();
As I had commented, you can achieve this using ngStyle. Here is a solution.
<div ng-style="myStyle" ng-controller="MainController">
<div id="topnav" class="container-fluid navbar-fixed-top">
<nav id="mainnav" class="navbar navbar-default">
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
</ul>
</nav>
<nav id="subnav" class="navbar navbar-inverse" ng-show="Config.showsubnav">
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
</ul>
</nav>
</div>
</div>
And in the controller
app.controller('MainController', ['$scope','Config', function($scope,Config){
$scope.Config = Config;
$scope.myStyle={};
$scope.myStyle.border="1px solid blue";
$scope.myStyle.height="59px";
if(Config.showsubnav)
{
$scope.myStyle.height="118px";
}
}]);
I hope, this is what you were looking for.
http://jsfiddle.net/paje007/a7n2xtad/

Categories