Reputation: 219

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

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><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>

Upvotes: 1

Answers (4)

Alex Cushing

Reputation: 286

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>

Upvotes: 1

Luca

Reputation: 1626

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><a href="#about" data-toggle="collapse" data-target=".navbar-collapse.in">about</a></li>
                <!--<li><a href="#portfolio">PORTFOLIO</a></li>-->
                <li><a href="#pricing" data-toggle="collapse" data-target=".navbar-collapse.in">products</a></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><a href="#CPR_WEB" data-toggle="collapse" data-target=".navbar-collapse.in">CPR-Web</a></li>
                        <li><a href="#SC_TRACKER" data-toggle="collapse" data-target=".navbar-collapse.in">SC-Tracker</a></li>
                        <li><a href="#" data-toggle="collapse" data-target=".navbar-collapse.in">Page 1-3</a></li>
                    </ul>
                </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>

Upvotes: 0

JDavila

Reputation: 449

JavaScript might work. Just add another link and hide it. Am using an error in this example for when the alert is shown.

<li><a href="#alert" id="alert" data-toggle="collapse" data-target=".navbar-collapse.in">Alert!</a></li>

Example of JavaScript:

$("#alert").hide();

var error == false;

if (error == true){
$("#alert").show();
}

Upvotes: 0

Lee

Reputation: 4323

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?

Upvotes: 0

Bootstrap HTML fit alert into navbar

Answers (4)

Related Questions