Place the text (menu) adjacent to the navigation bar

I am currently using bootsrap 4 alpha 6 in combination with midnight.js to alter the color of my navigation menu toggler. I am trying to incorporate a text element (MENU) alongside it, similar to the example shown in the Capture image. For the text toggler, I am utilizing fontawesome icons.

Thank you for your time and assistance!

Here is the HTML source code:

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

After applying midnight.js, the output will appear 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>

The current functionality works fine, but I am aiming to include text next to it. The current appearance is as follows: https://i.sstatic.net/ew1ME.png

However, I desire the final layout to resemble this:

https://i.sstatic.net/D57On.png

I attempted to implement the following code: 

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

As a result, it appears like this:

https://i.sstatic.net/i4nzz.png

javascripttwitter-bootstrapcssbootstrap-4

Answer №1

To enhance the appearance of your icon, consider incorporating display:inline;:

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

Answer №2

Give this a try

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

By changing the display property to inline-block, the icon will be displayed inline with text.

Make sure to check for any width restrictions on the element and its parent elements, as this could prevent proper inline display of the icon.

Answer №3

I have made some adjustments to the code that I provided as an answer here a while back. After testing it on my phone, I can confirm that it is working well. The code is based on Bootstrap. As I respond to this question, I am also enjoying a glass of wine. Once I post this answer, I will be closing my computer. I hope this solution meets your needs.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ensuring uniform height of columns in Bootstrap

I want all columns following the first row with col-md-6 to have equal height, regardless of dynamic content (go to full page). <html> <head> <title>Page Title</title> <meta charset="utf-8"> <meta name="viewport" ...

htmlcsstwitter-bootstrapbootstrap-5

How can Node.js and Express be used to conceal Javascript code on the backend?

I'm a beginner when it comes to Node and Express. I have a query regarding how to securely hide Javascript code on the backend. Currently, I am working with Node.js and Express. My goal is to prevent users from easily accessing the code through browse ...

javascripthtmlnode.jsexpress

Animate.css plugin allows for owl-carousel to smoothly transition sliding from the left side to the right side

I have a question regarding the usage of two plugins on my website. The first plugin is Owl Carousel 2, and the second one is Animate.css. While using `animateIn: 'slideInLeft'` with Owl Carousel 2 is working fine, I am facing an issue with `ani ...

javascriptjqueryhtmlcssowl-carousel

creating a function that sends two separate fetch requests with a pause in between each request

Currently, I am working with 2 endpoints. The first one requires a "post" request, and upon receiving the response, it should provide me with an ID that is used in the URL of the second endpoint. To ensure that I can obtain this ID before proceeding with ...

javascriptreactjsfetch-api

What causes performance issues when utilizing mouseover events in JQuery?

var mouseX; var mouseY; $(document).mousemove( function(e) { mouseX = e.pageX; mouseY = e.pageY; }); $(".test").mouseover(function(){ $('#DivToShow').css({'top':mouseY,'left':mouseX, 'display':'block&ap ...

javascriptjqueryhtml

Retrieving the file name from the line number within the trace stack or Error object

I'm working on enhancing my error handling in Node.js/express. Does anyone know a method to retrieve the filename and line number where an error occurs in my code? error-handler.js, utilizing console.trace, only handles errors at the route level...n ...

javascriptnode.jsexpresserror-handling

Creating Positioning Magic with HTML Elements

Currently working on an ASP.NET web app that utilizes a Master, with just a GridView at the bottom and a DIV at the top for further development. The goal is to keep the top DIV or header fixed while scrolling, ensuring it remains in place at the top of th ...

javascriptjqueryhtmlcssasp.net

"Enhancing website performance with JavaScript by leveraging DOM innerHTML scrollHeight

Here is a two-part question I have: The first part of the question: test A: t1 = new Date().getTime(); for (i=0; i<205; i++) { document.getElementById("divTest").innerHTML = sText; } t2 = new Date().getTime(); ...

javascriptperformancedominnerhtml

Tips for including space at the beginning and end of a dynamically created table cell

My table is dynamically generated with contents drawn from a database, creating rows based on the data. Each cell has a rounded border and 2px padding for consistency. I want all cells to appear evenly spaced and padded vertically, but I'm facing an ...

csshtml-tablecellpadding

What methods can be used to test included content in Angular?

When testing an Angular component that includes transclusion slots utilizing <ng-content>, it becomes challenging to verify if the transcluded content is correctly placed within the component. For instance: // base-button.component.ts @Component({ ...

javascriptangularunit-testingtesting

Quicker method for displaying an element in an array than utilizing a for loop

Having an array as shown below: var arra= new String [50,50]; // New entries are added to the array and for each row added, count is increased by 1. The columns go up till incount which is always less than 50. for(i=0;i<=count;i++) { for(j=0;j<in ...

javascriptarraysloopsfor-loopiteration

Is there a different alternative to @JavascriptInterface in Android WebView?

I understand how to invoke a Java method within JavaScript code using the @JavascriptInterface annotation. However, I am facing an issue when trying to determine which JS method should be called from Android. Currently, I am triggering an Android Dialog ...

javascriptjavaandroidwebview

adjusting three sections within a flexible navigation bar

Having difficulties creating a dynamic navbar that changes on scroll and keeping the elements within the nav fixed when the menu options appear. For reference, you can check out this codepen: http://codepen.io/timothyfernandez/pen/azXQPV Any assistance w ...

javascriptjqueryhtmlcss

css boxShadow merger

Looking to create a sleek horizontal navigation bar using an unordered list with list items representing each element: To ensure the elements fit perfectly within the bar, I set the width of each at 25% and added a box-shadow for a border. Using a traditi ...

htmlcss

Utilizing JSDoc's "includePattern" for various file formats

Recently, I delved into JSDocs and decided to implement it in my Vue.js project. However, since my project involves multiple file types like .js and .vue, I encountered a syntax error while trying to add them to the "includePattern". Here's the snippe ...

javascriptvue.jsjsdoc

Using line breaks and horizontal scrolling in HTML and CSS

I am struggling with a div that contains multiple small spans. My goal is to implement a horizontal scrollbar that extends up until the line break tags (a-z on each line) in order to view the full content on narrow screens. Although I have applied the &ap ...

htmlcss

Chip input component in React

I've recently upgraded to React 17 and encountered an issue with chip input fields like material-ui-chip-input not working properly. I've tried various npm packages, but none of them seem to be compatible with React version 17. Does anyone know ...

javascriptreactjsmaterial-ui

performing an AJAX call utilizing both a file and post data

I'm reaching out for help because I'm having trouble sending an ajax request with a data file and two posts included Here is the code snippet: $('#image--1').change(function (e) { e.preventDefault(); var img = new FormData(); ...

javascriptjqueryajax

What is the best way to initiate a change event using JavaScript?

I am attempting to enable my 4th checkbox automatically when there is a new value in the textbox (myinput). If the textbox is empty, I want to disable it. Currently, you have to tab out before the change event is triggered. Also, how can I check for an e ...

javascriptasp.nethtml

Reply in Loopback on remote method beforeRemote hook is to be sent

In my application, I am utilizing loopback v3. The specific use case I am tackling involves validating the presence of a token in the request header. If the token is invalid, I need to send an appropriate message in a standardized format. My approach has b ...

javascriptnode.jsexpressloopback