Utilize Bootstrap4 to position content above the navigation icon

I need assistance to modify my code so that it will have the following appearance:

I successfully created a navigation bar icon and inserted the logo, but I am struggling to position the data above the navigation icon:

My current code:

 <nav class="navbar navbar-light bg-dark">
     <a class="navbar-brand text-light" href="#">
      <img src="logo.png" width="30" height="30" alt="">
      My Photos
      </a>
      <div class="row">
        <div class="collapse" id="navbarToggleExternalContent">
          <div class="bg-dark p-4">
            <h3 class="text-white h3 ">Contact</h3>
                <span class="text-white">Follow on Twitter</span>
                    <p class="text-white">Like on Facebook</p>
                    <p class="text-white">Email me</p>
                   </div>
                  </div>
                </div>
          <nav class="navbar navbar-dark bg-dark">
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
          </button>

        </nav>
javascripthtmlcssbootstrap-4navigation

Answer №1

Make sure the elements you want to display above the navigation are not included in the navigation section. You can easily achieve the desired layout by following the code snippet below:

.myNav {
  background: #343a40;
  color: #fff;
  padding: 0 16px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class='row myNav'>
  <div class='col-lg-8 col-md-8 col-sm-8 col-6'>
    <h2>About </h2>
    <p>an album of nice pictures, enjoy it.</p>
  </div>
  <div class='col-lg-4 col-md-4 col-sm-4 col-6'>
    <h2>Contact</h2>
    <span class="text-white">Follow on Twitter</span><br/>
    <span class="text-white">Like on Facebook</span>
    <p class="text-white">Email me</p>
  </div>
</div>
<nav class="navbar navbar-light bg-dark">

  <a class="navbar-brand text-light" href="#">
    <img src="https://www.akberiqbal.com/favicon-32x32.png" width="30" height="30" alt=""> My Photos
  </a>

  <nav class="navbar navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data- toggle="collapse" data-target="#navbarToggleExternalContent" aria- controls="navbarToggleExternalContent" aria-expanded="false" aria- label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
          </button>

  </nav>

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

"Need help solving the issue of generating a random number for a Firebase DB column after adding a new user

Whenever I add a new user using JavaScript, it generates a random number below the Admins column like this. However, I want to adjust this so that it appears as shown in these tables, displaying the username value. If anyone can help me modify the code acc ...

javascripthtmljsonfirebasefirebase-realtime-database

Establishing a dynamic database feature (such as a real-time leader board) on a website

Recently, I designed a fun JavaScript game for my website and now I am contemplating adding a leaderboard feature. However, I am unsure about which type of database would be the best fit - MongoDB, SQLite, or something else entirely. I have heard that SQ ...

javascriptmongodbsqlitewebdatabase

What is the process of developing a straightforward Node.js script to encapsulate a binary or executable file?

I am looking to develop a Node.js file that can seamlessly execute an executable binary file and handle all inputs and outputs, specifically targeting Windows operating systems. Reason for this: I aim to install an executable tool via npm install -g in or ...

javascriptnode.jsnpmbinarywrapper

jquery makes it easy to create interactive hide and show effects

The main concept is to display the element upon clicking and hide it when there is any mouse click event. Below is the HTML code I'm using: <ul> <li> <span class="name">Author 1</span> <span class="affiliation"&g ...

javascriptjquerytoggle

Finding a character that appears either once or thrice

In my work on JavaScript regex for markdown formatting, I am trying to match instances where a single underscore (_) or asterisk (*) occurs once (at the beginning, end, or surrounded by other characters or whitespace), as well as occurrences of three under ...

javascriptregex

Trouble with HTML and CSS design layout

I'm struggling to create a responsive design for my webpage. The layout should consist of black blocks that display images. Ensuring the layout adapts to different screen sizes is proving challenging. It needs to maintain its shape on smaller screens ...

htmlcsslayoutresponsive-design

What is the reason behind the success of this location?

Curious about the functionality of this particular JavaScript code with its corresponding HTML structure: function getCityChoice() { const location = document.querySelector("form").location.value; console.log(location) } <form name="reserve" a ...

javascripthtml

Substituting Div containers with elements imported from external files

Imagine I have <div> <div id="stuff"> <!-- stuff --> </div> </div> Could I move the content of <div id="stuff"> into a separate file named stuff.html, and then replace the code above with something simi ...

htmlangularjs

React's constructor being invoked twice

As a newcomer to react, I am in the process of developing a simple web application but encountering an issue. It seems like my Constructor is being called twice when I load a class component. Can anyone provide some assistance? Home.js import React from ...

javascriptreactjs

Is there an alternative method to retrieve the client's user agent if getStaticProps and getServerSideProps cannot be used together?

I am currently facing a challenge with the website I'm working on as it lacks a responsive design. This means that the view I display is dependent on the user agent of the client. In order to achieve this, I have been using getServerSideProps to deter ...

javascriptnext.js

jQuery's feature to select all elements except one and its children appears to be malfunctioning in Safari

My goal is fairly simple. I want to make the entire section clickable, except for the span and anything beneath it, so that the link redirects elsewhere. <section id="id" class="message"> <div class="message_body"> <font color="color"> ...

javascriptjqueryhtml

Organizing the dropdown menu in alphabetical order

I am facing an issue with the following element <li id="li_15" class="dropdown dropdown-alpha highlighted" style=""> <label class="description" for="element_15">Name <span id="required_15" class="required">*</span></labe ...

javascriptjquerysorting

Tips for efficiently rendering over 200 views in React Native without sacrificing performance

I've been working on a game project using react-native and I'm facing an issue with rendering over 200 views on the Game screen. Each view should have a pressable functionality that, when pressed, will change the background color of the view and ...

javascriptreactjsreact-nativereact-hooksexpo

What is the best way to compile an array of permissible values for a specific CSS property?

One interesting aspect of the CSS cursor property is its array of allowed values, ranging from url to grabbing. My goal is to compile all these values (excluding url) into an array in JavaScript. The real question is: how do I achieve this without hardco ...

javascriptcss

establish a distinct row color pattern for the initial column

I am currently working on a table that has sticky columns. I am trying to create alternating row colors in the first column only. Below is the code for the table: <div class="table-responsive"> <table class="table table-bordered table-stripe ...

cssbootstrap-4

Creating tilted divs with dynamic height to perfectly fit the content

I'm struggling to incorporate this design into my webpage; I can't seem to get the right div's height to match the left div as depicted in the second image. Can someone offer some assistance? Additionally, when viewed on mobile, the squares ...

htmlcssbootstrap-4

The contents of the image are currently unable to be viewed

I have a Blob of an image that I am trying to display in the browser. However, when I use the code below to open the image, it shows some Mandarin scripts on the window. Here is the code snippet: var url="http://....link..../downloadFile?fdsFileId="+file ...

javascriptangularjsbrowserblob

What's the best way to use the keyboard's enter key to mark my to-do list

I'm looking to update my todo list functionality so that pressing enter adds a new todo item, instead of having to click the button. <h1 style="text-align:center">Todo List</h1> <div class="container"> ...

htmlangulartypescript

Modify HTML content according to the response received from the backend

I am trying to dynamically update the text content of an HTML tag based on a response from the backend. My application is running on a Django server where I have a timer in the backend measuring the processing time. I need to send this processing time to t ...

javascriptpythonjquerydjango

Deactivate a chosen anchor button when clicked within a loop of elements

In my laravel project, I have a foreachloop that is rendering multiple buttons. I want to disable or remove only the button that is clicked, so I tried the following code: @foreach() <a onclick="remvebtn()" class="btn">My ...

javascriptjquery