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/
Related
I am mainly a designer and write some HTML and CSS but am not that good at javascript which I am almost sure is causing the issue that I am having. I have a client that is working with a template that is using a Menuzord Menu. It is a one-page layout and they would like one of the links on the main nav to link to another website outside the current site. I coded the link to link out, but the link does not work. Any help would be appreciated.
This is the link to the site...http://raycomdigital.us/medplexmd/
Here is the code:
<header id="header" class="header">
<div class="header-nav navbar-fixed-top header-dark navbar-white navbar-transparent bg-transparent-1 navbar-sticky-animated animated-active">
<div class="header-nav-wrapper">
<div class="container">
<nav id="menuzord-right" class="menuzord orange no-bg"> <a class="menuzord-brand pull-left flip" href="javascript:void(0)"><img src="images/logo-wide.png" alt=""></a>
<ul class="menuzord-menu onepage-nav">
<li class="active">Home</li>
<li>Our Services</li>
<li>Questions</li>
<li>Forms</li>
<li>Contact</li>
<li>Portal</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
I need the "Portal" item to link out. Thanks in advance!
There is likely an event listener that is preventing the default click handler from triggering.
A quick fix for this is to add an onclick property which would take precedence over a listener that is attached to a parent element.
<header id="header" class="header">
<div class="header-nav navbar-fixed-top header-dark navbar-white navbar-transparent bg-transparent-1 navbar-sticky-animated animated-active">
<div class="header-nav-wrapper">
<div class="container">
<nav id="menuzord-right" class="menuzord orange no-bg"> <a class="menuzord-brand pull-left flip" href="javascript:void(0)"><img src="images/logo-wide.png" alt=""></a>
<ul class="menuzord-menu onepage-nav">
<li class="active">Home</li>
<li>Our Services</li>
<li>Questions</li>
<li>Forms</li>
<li>Contact</li>
<li><a id="portal" href="https://apps.medplexmdinjury.com/cases/" target="_blank">Portal</a></li>
<script type="text/javascript">
var portal = document.getElementById('portal');
portal.onclick = function() {
var win = window.open(portal.href, portal.target);
win = null;
}
</script>
</ul>
</nav>
</div>
</div>
</div>
</header>
At the top of my website, the main navigation class is:
navbar navbar-default navbar-fixed-top bg
I am trying to make it so when you scroll, the class changes to so I can create a more elegant and easier scroll animation:
navbar navbar-inverse navbar-fixed-top bg
How is this accomplished with Javascript? I can't find ANYTHING on the internet...the one thing I did find let you remove one class but doesn't work because I have like 10 different classes at once...
Here's an example.
Use $(window).scroll() and addClass() to add the bg class to your nav when you scroll down past a certain point. Note that addClass and removeClass allow you to add/remove individual class names from tags where multiple classes exist.
Note that you will probably need to use !important to force the color change -- bootstrap can be tenacious.
var viz=true, win = $(window), nav=$('nav');
win.scroll(function(){
pos = win.scrollTop();
if ( viz && pos > 100 ){
viz = false;
nav.addClass('bg');
}else if ( !viz && pos < 100 ){
viz = true;
nav.removeClass('bg');
}
});
body,
html {
height: 2000px;
}
.bg{background:green !important;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1-1
</li>
<li>Page 1-2
</li>
<li>Page 1-3
</li>
</ul>
</li>
<li>Page 2
</li>
<li>Page 3
</li>
</ul>
</div>
</div>
</nav>
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.
I have an issue with my two navigation menus. I’m using two of the same type navigation that comes with Bootstrap. The first navigation is using the “navbar-inverse” class and the second navigation menu is using “navbar-default” class with some minor modification. The issue appears when you click on dropdown menu in the right corner; the second navigation menu will overlap the dropdown box and only content below the menu is visible.
Please look at the attachment below for illustration.
This is my current HTML setup:
<nav class="navbar navbar-inverse navbar-static-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="navbar-brand" href="#"><span class="glyphicon glyphicon-home"></span></a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Hjem</li>
...
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Innstillinger <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
...
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div id="navbar">
<ul class="nav navbar-nav">
...
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
This is my current issue illustrated:
I have created a JSfiddle with corresponding stylesheets and frameworks to look at: http://jsfiddle.net/1L3voL3h/. Unfortunately, at this point I haven't been able to find a solution by myself. Thanks in advance for any help.
change this <nav class="navbar navbar-default navbar-static-top">
to <nav class="navbar navbar-default navbar-static"> from your second nav bar
just add this for your second navbar
<style>
.second-navbar {
top: 50px;
z-index: 999;
}
</style>
You can change the z-index of your navbar-default or of your dropdown menu. Something like:
.navbar-default {
background: #b6d24b;
border-radius: 0px;
z-index: 1;
}
or:
.dropdown-menu {
z-index: 5
}
I updated your JSFiddle
You only need to add to your CSS:
.navbar-inverse.navbar-static-top {
z-index: 800;
}
.navbar-default.navbar-static-top {
z-index: 700;
}
The problem is that you are applying z-index:1000 to both of your navigation bars. With this rule:
.navbar-static-top {
z-index: 1000;
border-width: 0 0 1px;
}
You should change this rule and/or add the ones I provided above to give your first navigation bar a higher z-index value.
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">