Bailey Miller Bailey Miller - 4 months ago 22
CSS Question

Bootstrap HTML fit alert into navbar

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
enter image description here

Mobile
enter image description here

Current appearance:
enter image description here

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><a href="#about" data-toggle="collapse" data-target=".navbar-collapse.in">about</a></li>
<li><a href="#pricing" data-toggle="collapse" data-target=".navbar-collapse.in">products</a></li>
<li><a href="#contact" data-toggle="collapse" data-target=".navbar-collapse.in">contact</a></li>
<li><a href="#recentnews" data-toggle="collapse" data-target=".navbar-collapse.in">recent news</a></li>
</ul>
</div>
</div>
</nav>

Answer

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"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></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><a href="#">Link</a></li>
             </ul>
          </div>
          <!-- /.navbar-collapse -->
       </div>
       <!-- /.container-fluid -->
    </nav>

Comments