CODEWITHSUNDEEP
javascripttwitter-bootstrapcssbootstrap-4
user348246
user348246

Reputation: 380

insert text (menu) near navigation bar

I am using bootsrap 4 alpha 6, and midnight.js to change the color of navigation menu toggler. I want to insert a text (MENU) next to it. Example in the Capture. For text toggler I use fontawesome.

Thanks your time and help!

the source html

<div class="navigation-button">
    <button class="navbar-toggler navbar-toggler-right fixed-top" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
        <span class="fa fa-bars fa-2x"></span>
    </button>
</div>

using midnight.js, will looks like this

<div class="navigation-button">
        <button class="navbar-toggler navbar-toggler-right fixed-top" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation" style="position: fixed; top: 0px; left: 0px; right: 0px; overflow: hidden; height: 40px;"><div class="midnightHeader white-menu" style="position: absolute; overflow: hidden; top: 0px; left: 0px; right: 0px; bottom: 0px; transform: translateY(110%) translateZ(0px);"><div class="midnightInner" style="position: absolute; overflow: auto; top: 0px; left: 0px; right: 0px; bottom: 0px; transform: translateY(-110%) translateZ(0px);">
            <span class="fa fa-bars fa-2x"></span>
        </div></div><div class="midnightHeader blue-menu" style="position: absolute; overflow: hidden; top: 0px; left: 0px; right: 0px; bottom: 0px; transform: translateY(0%) translateZ(0px);"><div class="midnightInner" style="position: absolute; overflow: auto; top: 0px; left: 0px; right: 0px; bottom: 0px; transform: translateY(0%) translateZ(0px);">
            <span class="fa fa-bars fa-2x"></span>
        </div></div></button>
    </div>

It works ok, only I want to add a text to it. now it looks like:enter image description here

and I want

enter image description here

I tried 

MENU<span class="fa fa-bars fa-2x"></span>

it looks

enter image description here

Upvotes: 2

Views: 921

Answers (3)

hans-k&#246;nig
hans-k&#246;nig

Reputation: 553

I've manipulated some code which I answered here some time ago. Tested with my phone and it works. Its on Bootstrap. I am answering this question and drinking some wine. So, I will just close my computer soon after posting this answer. Hope is what you want.

 <!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script>

</script>

<style>
.navbar {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
}

.navbar-default .navbar-nav {
font-size: 15px;
}

.navbar-fixed-top {
min-height: 80px;
}

.navbar-nav>li {
position: relative;
}

.navbar-nav>li>a {
padding-top: 0px;
padding-bottom: 0px;
line-height: 80px;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #fff;
background-color: #b4a28f;
}

.navbar-default .navbar-nav .dropdown-menu {
left: 0;
right: auto;
}

.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus {
color: #ffffff;
text-decoration: none;
outline: 0;
background-color: #b4a28f;
}

@media (min-width: 768px) {
.navbar-nav>li>.nav-line {
position: absolute;
bottom: -1px;
left: 0;
background-color: #3178b9;
height: 3px;
width: 0%;
}
.navbar-nav>li:hover>.nav-line {
background-color: #3178b9;
height: 3px;
width: 100%;
-webkit-transition: all 200ms ease-in;
-moz-transition: all 200ms ease-in;
-o-transition: all 200ms ease-in;
transition: all 200ms ease-in;
}
.navbar-nav>li.active>.nav-line {
background-color: transparent;
}
}

@media (max-width: 767px) {
.navbar-nav > li > a {
line-height: 30px;
padding-top: 10px;
padding-bottom: 10px;
}
#footer {
color: #2e2e2e;
}
</style>

</head>
<body>

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header"> 

            <div class="row">
                <div class="col-sm-10 visible-sm visible-md visible-lg">
                    <a class="navbar-brand" href="">
                        <img class="img img-responsive" src="www/images/srs.png" alt="SRS Constructions">
                    </a>
                </div>

                <div class="col-xs-7 visible-xs">
                     <a class="navbar-brand" href="">
                         <img class="img img-responsive" src="www/images/srs.png" alt="SRS Constructions">
                     </a>                   
                </div>              

                <div style="margin-top:15px;text-align:right;" class="col-xs-3 visible-xs">
                <strong>Menu</strong>
                </div>

                <div class="col-xs-2">
                     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse" aria-expanded="false">
                         <span class="sr-only">Toggle navigation</span>
                         <span class="icon-bar"></span>
                         <span class="icon-bar"></span>
                         <span class="icon-bar"></span>
                     </button>
                 </div>

        </div>          

        </div>      

        <div class="collapse navbar-collapse navbar-right" id="collapse">
            <ul class="nav navbar-nav">

                <li class="active"><a class="main" href="#main">Home <span class="sr-only">(current)</span></a>
                    <div class="nav-line"></div>
                </li>
                <li class="dropdown" id="nav-about">
                    <a href="#about" class="dropdown-toggle main" role="button" aria-haspopup="true" aria-expanded="false">About
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">The Founder</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">HSE Policy</a></li>
                        <li><a href="#">Quality Policy</a></li>
                    </ul>
                    <div class="nav-line"></div>
                </li>
                <li><a class="main" href="#services">Services</a>
                    <div class="nav-line"></div>
                </li>
                <li><a class="main" href="#projects">Our Projects</a>
                    <div class="nav-line"></div>
                </li>
                <li><a class="main" href="#whyus">Why Us</a>
                    <div class="nav-line"></div>
                </li>
                <li><a class="main" href="#contact">Contact</a>
                    <div class="nav-line"></div>
                </li>
            </ul>
        </div>
    </div>
</nav>

</body>
</html>

Upvotes: 1

Sean
Sean

Reputation: 1464

Try doing this

MENU<span class="fa fa-bars fa-2x" style="display:inline;"></span>

This will make the icon an inline element (same as the text)

Also check to see if something is restricting the width of the element, also check the parent elements for this too. This may prevent the next from displaying inline with the icon.

Upvotes: 1

kastriotcunaku
kastriotcunaku

Reputation: 1179

Try by adding display:inline; to your icon:

<span class="fa fa-bars fa-2x" style="display:inline;"></span>

Upvotes: 1

Related Questions