Achieving a layout with content above the navigation bar in Bootstrap 4

Could you help me with having the contact information displayed above the navigation? I'm facing an issue where it keeps floating to the left, but I want the content to collapse along with the navigation on mobile devices. Any suggestions on what might be missing here?

<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
<div class="container">
<a class="navbar-brand" href="#">
<img src="https://placehold.it/150x50?text=Logo" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
<div class="collapse navbar-collapse" id="navbarResponsive">
  <div class="container contactinfo">
    <div class="row">
      <div class="col-4 headerPhone">
        123-456-7890
      </div>
      <div class="col-4 headerEmail">
        <a href="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="09616c65">‎<script type='text/javascript'>...</script>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="741c1118">...</a></a>
      </div>
      <div class="col-4 headerSocial">
        <a href="#" target="_blank" title="Facebook">
          <i class="fab fa-facebook-square"></i>
        </a>
        <a href="h#" target="_blank" title="Twitter">
          <i class="fab fa-twitter-square"></i>
        </a>
        <a href="#" target="_blank" title="Pinterest">
          <i class="fab fa-pinterest-square"></i>
        </a>
      </div>
    </div>
  </div>
  <ul class="navbar-nav ml-auto">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home
            <span class="sr-only">(current)</span>
          </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Services</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Contact</a>
    </li>
  </ul>
</div>

https://codepen.io/johndu/pen/YzzxgyR

I'm aiming for a similar outcome as seen on this website:

htmlcssbootstrap-4

Answer №1

If you're looking to display the contact information above the navbar while still keeping it collapsed on mobile using the same toggle button, consider utilizing a separate navbar.

Link to example

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <div class="collapse navbar-collapse">
            <div class="nav navbar-nav w-100 flex-row">
                <div class="navbar-text headerPhone">
                    123-456-7890
                </div>
                <div class="navbar-text headerEmail text-center mx-auto">
                    <a href="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b3dbd6dfdfdcf3dbd6dfdfdc9dd0dcde">[email protected]</a>"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e9818c858586a9818c858586c78a8684">[email protected]</a></a>
                </div>
                <div class="navbar-text headerSocial text-right">
                    <a href="#" target="_blank" title="Facebook">
                        <i class="fab fa-facebook-square"></i>
                    </a>
                    <a href="h#" target="_blank" title="Twitter">
                        <i class="fab fa-twitter-square"></i>
                    </a>
                    <a href="#" target="_blank" title="Pinterest">
                        <i class="fab fa-pinterest-square"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
    <div class="container">
        <a class="navbar-brand" href="#">
            <img src="http://placehold.it/150x50?text=Logo" alt="">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home
                <span class="sr-only">(current)</span>
              </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

For more insights: Tips on combining two navbars into one with Bootstrap 4

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

What is the process for allowing right-click to open in a new tab, while left-clicking redirects to a new page in the current tab?

In my project, I have implemented a multi-page form for users to input information. The left side menu contains items that allow users to switch between different pages while filling out the form. Currently, clicking on any of these items redirects the use ...

htmlcssdjangohttp-redirect

jQuery - accessing a different class within the object

Let me explain the scenario: I have a website that will delve into 4 different subjects. Initially, I have 4 divs each representing the title of those subjects. For instance, <div><p> Physics </p></div> <div><p> Chem ...

javascriptjqueryhtmlcss

Unusual behavior observed when calculating in Angular

Utilizing Angular.js, I dynamically calculate the height and add the value to the CSS style attribute within an ng-repeat loop. The issue arises with this particular line of code: <div style="height: {{60.0 / 100.0 * (100 - (100.0 / 0.27 * (item.wert ...

javascriptcssangularjs

How can you show a green check mark next to an input field in AngularJS after inputting valid data?

I am diving into the world of AngularJS and Angular Material with my web application. As a beginner in AngularJS and Angular Material, I need some help. My current task is to display a green checkmark next to an input field only when valid data is entere ...

javascriptcssangularjsvalidationpasswords

Identical HTML elements appearing across multiple DOM pages

My question might seem silly, but I'm facing an issue. I have several HTML pages such as index.html and rooms.html, along with a main.js file containing scripts for all of these pages. The problem arises because I have variables like const HTMLelemen ...

javascripthtmldomcode-separation

Issue with Safari browser: Circular div not displaying shadow as intended

I am facing an issue with a div element that has the following CSS styling close: { position: 'fixed', boxShadow: '1px 1px 6px 0px rgba(0,0,0,0.5)', borderRadius: '50%' } This styling behaves as ex ...

htmlcsssafari

Elements are randomly glitching out with CSS transitions in Firefox

Chrome is working perfectly for me, but when I switch to Firefox it behaves differently than expected I am attempting to create a simple animation (utilizing transitions) that continuously runs on mouseover and smoothly returns to the starting position on ...

javascriptjquerycsscss-transitionscss-transforms

The collapsible toggle menu fails to collapse on mobile-sized screens

I've experimented with basic Bootstrap in order to create a toggle menu, but I'm encountering issues. The menu collapses instead of expanding when the screen size is maximized ('m'). Furthermore, clicking on the toggle icon does not cau ...

htmljquerycss

Exploring ways to distribute the height of parent div among child divs

I am looking to dynamically adjust the height of child divs within a fixed-height parent div. The parent div's height is fixed, but the number of child divs can vary. I want each child div to have a height equal to the parent div's height divided ...

htmlcssangularjs

Unexpected PHP Error Thrown

Every time I run this code, I encounter the following error message: Notice: Trying to get property of non-object in C:\wamp\www\HoneysProject\function.php on line 1178 The error pertains to this specific line of code: $number_ph ...

phphtml

Navigating through a HTML email Listserv with a click event scrolling feature

I am looking to create an interactive HTML email with a link that can scroll the recipient's browser to a specific section within the email. I am considering using Javascript and jQuery for this functionality. Can someone guide me on how to implement ...

javascriptjqueryhtmlcss

What happens in the React tutorial when the clear fix is commented out and the appearance does not change?

Currently, I am working through the React tutorial and have encountered a question regarding their starter code: class Square extends React.Component { render() { return ( <button className="square"> {/* TODO */} </butto ...

javascripthtmlcssreactjs

Ways to Place Image and Icons at the Bottom of a Video with CSS

I'm looking to enhance my video by adding images and icons using CSS, but I'm not sure how to go about it. The image that will serve as a profile picture and the icons should be similar to the ones shown in the image below: https://i.sstatic.ne ...

htmlcsstwitter-bootstrapflexboxbootstrap-5

How do I prevent the default submission behavior in an asp:ImageButton when the user presses the enter key in ASP.NET using C#?

Whenever I attempt to use this code snippet, it doesn't seem to work properly. How can I prevent the submit behavior of an asp:ImageButton? Here is the HTML code I am working with: <td class="style101"> <asp:ImageButton ID="imgBtnPos ...

c#htmlasp.net

Is it possible to alter the HTML structure using JavaScript?

Looking to shift the positions of 2 divs using JavaScript DOM manipulation, all without altering the HTML. <div class="div1"> this should move downwards</div> <div class="div2"> while this should move upwards</div&g ...

javascripthtmldom

How to Position Elements using Bootstrap and CSS

I am facing a simple issue with my webpage: I am unable to center the div-image in the header and align the content vertically. This is the current setup: https://i.sstatic.net/uFViw.png The desired position for the image is POS. I have tried methods lik ...

htmlcssbootstrap-4

The symbol for expanding and collapsing sections in the Bootstrap accordion is not dynamically updating

I'm facing an issue with my bootstrap accordions. I have two accordions and each one has an inner accordion. The first one is set to be opened by default. However, when I click on the second accordion, the icon of the first one does not update to a pl ...

htmlcssbootstrap-4

Combine several CSS classes into a single class for easier styling

I have implemented specific styling on my webpage based on the city or state of the user. For instance, if someone is from New Jersey, the background color will be red. Currently, I am achieving this using the following method: Using a combination of HTML ...

phphtmlcss

Creating structured paths for retrieving data via HTTP GET requests

In my Laravel project, I have routes set up for requests in a traditional way: Route::get('edit/{user}', 'AdminUserController@getUser'); Route::post('delete', 'AdminUserController@deleteUser'); However, I am facing ...

javascriptphphtmllaravelget

The modal is functioning properly on Firefox and Internet Explorer, but it is experiencing issues

Having an issue with my modal not functioning properly in Chrome. When I click on it, only the background fades and both the before and after content load in the Chrome Dev tools simultaneously with no visible content in between. Here is a link to the Cod ...

javascriptcssmodal-dialog