Bootstrap HTML fit alert into navbar - html

Question

This is probably a simple CSS trick. I need an alert to fit inside the navbar after the home icon between the other icons which are pull-right.
The alert needs to fit inside the spot given.
Examples:
Desktop
Mobile
Current appearance:
CSS that affects the navbar:
.navbar {
margin-bottom: 0;
background-color: #396B99;
z-index: 9999;
border: 0;
font-size: 12px !important;
line-height: 1.42857143 !important;
letter-spacing: 4px;
border-radius: 0;
font-family: Montserrat, sans-serif;
}
.navbar li a, .navbar .navbar-brand {
color: #fff !important;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
color: #396B99 !important;
background-color: #fff !important;
}
.navbar-default .navbar-toggle {
border-color: transparent;
color: #fff !important;
}
Current navbar HTML:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<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="#myPage"><span class="glyphicon glyphicon-home logo-inverse"></span></a>
<!-- Where the alert should go? -->
<div class="alert alert-info">
<strong>Service Alert</strong> There is something wrong, and we need to alert you about it.
</div>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right text-uppercase">
<li>about</li>
<li>products</li>
<li>contact</li>
<li>recent news</li>
</ul>
</div>
</div>
</nav>

Answer 1

Hope this helps, threw together a quick bootstrap menu with an alert in it
.alert-float{
height: auto;
max-width: 500px;
top: 0;
margin: 0 auto;
}
/*the following just removes mobile scaling so I can properly show you the alert*/
.navbar-collapse.collapse{
display: block !important;
}
.navbar-nav>li, .navbar-nav{
float: left !important;
}
.navbar-nav.navbar-right:last-child{
margin-right: -15px !important;
}
.navbar-right{
float: right !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
</ul>
<div class="alert-float" style=" position: absolute; top: 0; left: 130px; right: 30px; z-index: 9999;width: 65%">
<div class="alert alert-success alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
Test
</div>
</div>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>

Answer 2

You just need to tweak the CSS stylign to get it to fit where you want. Mainly the display appearance should be inline-block.
After that, you might want to set max-widths so it doesn't spill over to the nav. Some media queries might be needed also.
Or try floating it left, and see what that looks like.
Can you make a JSFiddle?

Answer 3

JavaScript might work. Just add another link and hide it. Am using an error in this example for when the alert is shown.
<li>Alert!</li>
Example of JavaScript:
$("#alert").hide();
var error == false;
if (error == true){
$("#alert").show();
}

Answer 4

You can add the alert where you put your comment, using the navbar-text class
You can see it here in action
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<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="#myPage"><span class="glyphicon glyphicon-home logo-inverse"></span></a>
<p class="navbar-text">Put you alert HERE with class navbar-text</p>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right text-uppercase">
<li>about</li>
<!--<li>PORTFOLIO</li>-->
<li>products</li>
<!--<li class="dropdown">
<a class="dropbtn" data-toggle="dropdown" href="">
products
<span class="caret"></span>
</a>
<ul style="list-style:none !important; padding:0px 0px !important;" class="dropdown-content">
<li>CPR-Web</li>
<li>SC-Tracker</li>
<li>Page 1-3</li>
</ul>
</li>-->
<li>contact</li>
<li>recent news</li>
</ul>
</div>
</div>
</nav>