incorporating a header into the menu bar of my website

I'm having trouble adding a header to my navigation menu, specifically positioning it below the main header like so: https://i.sstatic.net/xVD8W.png

My attempts using Bootstrap and adding another row have resulted in this display:

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

This is the snippet of code I'm working with: 

<div class="container">
  <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">


         <a class="navbar-brand js-scroll-trigger" href="#page-top">Bunk.</a>
         <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
           Menu
           <i class="fa fa-bars"></i>
         </button>
         <div class="collapse navbar-collapse" id="navbarResponsive">
           <ul class="navbar-nav ml-auto">
             <li class="nav-item">
               <a class="nav-link js-scroll-trigger" href="#tenant">TENANT</a>
             </li>
             <li class="nav-item">
               <a class="nav-link js-scroll-trigger" href="#landlord">LANDLORD</a>
             </li>
             <li class="nav-item">
               <a class="nav-link js-scroll-trigger" href="#bunkfaqs">BUNK FAQs</a>
             </li>
             <li class="nav-item">
               <a class="nav-link js-scroll-trigger" href="#blog">BLOG</a>
             </li>
             <li class="nav-item">
               <a class="nav-link js-scroll-trigger" href="#team">TEAM</a>
             </li>
             <li class="nav-item">
               <a class="nav-link js-scroll-trigger" href="#login">LOG IN</a>
             </li>
           </ul>
         </div>
     <div class="row">
       <header id="header">
         <div class="container">
           <div class="row">
           <h2> Tenants </h2>
           </div>
         </div>
       </header>
     </div>

Any advice on how to properly position the additional header?

htmlcssnavigationbootstrap-4

Answer №1

Learn more about Bootstrap's Navbar and grid system.

  • The navbar should only have supported content.
  • The header should not be inside the navbar; place it below.
  • A .container should not be nested within another .container.
  • .row is intended to contain only col-*.

Check out the demo on Codeply

<div class="container">
    <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top" id="mainNav">
        <a class="navbar-brand js-scroll-trigger" href="#page-top">Bunk.</a>
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            Menu
            <i class="fa fa-bars"></i>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link js-scroll-trigger" href="#tenant">TENANT</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link js-scroll-trigger" href="#landlord">LANDLORD</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link js-scroll-trigger" href="#bunkfaqs">BUNK FAQs</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link js-scroll-trigger" href="#blog">BLOG</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link js-scroll-trigger" href="#team">TEAM</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link js-scroll-trigger" href="#login">LOG IN</a>
                </li>
            </ul>
        </div>
    </nav>
</div>
<div class="container-fluid bg-light">
    <header id="header" class="d-flex align-items-center">
        <h2 class="mx-auto">Tenants</h2>
    </header>
</div>

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

JavaScript - Utilizing an image file in relation to a URL pathway

Is there a way to reference an image URL using a relative path in a JavaScript file similar to CSS files? To test this, I created two divs and displayed a gif in the background using CSS in one and using JavaScript in the other: -My file directory struct ...

javascriptcss

Loading necessary CSS when needed in React JS

I am currently in the process of converting a bootstrap template to react framework. My question is, is there a way for me to load stylesheets on demand? For instance, if I have 2 components and I import the same stylesheet separately in both components, ...

javascriptcssreactjs

Angular is known to raise the error ExpressionChangedAfterItHasBeenCheckedError

I am currently developing an Angular application using Angular version 7.0.4. My objective is to automatically set focus on the first input element of a modal if the list of working times contains more than one element. However, I am facing an issue where ...

htmlangulartypescript

What is the best way to add timestamps to derivative posts or comments related to a post?

Currently working on a tutorial and I think it would be great to timestamp comments as well. For the main posts, the timestamp works fine, but not for the child posts or comments as we can call them for simplicity. Since I am using Firebase, I'm uns ...

javascripthtmlangularjsfirebase

Tips for avoiding storing duplicate data in local storage?

I have encountered a challenge in my code where I am trying to alert the user when they attempt to save data that is already stored in local storage. Essentially, when the user clicks on a save button to add data to favorites (local storage), I want a mess ...

javascriptjqueryhtmljson

What is the best way to increase the spacing between images in a navbar?

Having trouble aligning images in navbar with bootstrap. Tried various solutions without success. Here is my code snippet and image of my current page: <body> <header id="header" class="fixed-top"> <nav class=" ...

cssbootstrap-4menunavbarspacing

Toggle the visibility of select options based on another select option

Hello everyone, I need some assistance. I am attempting to display a set of select options based on the selection made in another select option. There is a select option named "children" with a group of other select options that should be hidden by default ...

javascriptjqueryhtml

Adjustment of Facebook button positioning in floating bar on Firefox

My floating bar currently has 5 social buttons, but I've noticed that the Facebook button is shifting about 20 pixels to the left. Could this be an issue with the CSS elements? After inspecting the elements, I found that when I remove position: absol ...

htmlcssfacebookfirefoxmozilla

Ways to swap out unique symbols for HTML elements

I'm currently facing a challenge where I need to locate all strings between two specific characters and then replace those characters with HTML tags. For example, $str = "dog *cat* ping goat *pizza* cow rabbit*"; I would like a function tha ...

phphtml

Tips for Keeping Footer Aligned with Content:

When checking out this website, you may notice that the footer appears to be affixed to the left side. The CSS code responsible for this is as follows: #footer { width: 800px; clear:both; float:right; position:relative; left:-50%;} I would appreciate it ...

htmlcss

The inserted button's click event does not trigger the contentEditable DIV

I have a contentEditable DIV that I manage using the directive below: <div class="msg-input-area" [class.focused]="isMsgAreaFocused" contenteditable [contenteditableModel]="msgText" (contenteditableModelChang ...

javascripthtmlangulardomdom-events

Persist AJAX request across page reloads

Seeking a solution to a perplexing dilemma that has left me incapable of finding a swift resolution. Perhaps there is someone here who can provide guidance. I am curious: if I initiate an AJAX request on my HTML page using jQuery and then trigger a refres ...

phpjqueryhtmlajax

Exploring the intricacies of iterating within the .append function in

I have received 2 arrays of elements from PHP. I saved the elements in 2 variables in javascript and then looped through one variable to create a table displaying the elements. Now, I am trying to append another element and iterate through the second arra ...

javascriptphpjqueryhtml

Smooth Slide-in Animation

I've been working on improving my understanding of animations, but keyframes are still a bit confusing for me. To help with my learning process, I decided to create a simple box slider that fades in each layer and then repeats the process. My goal is ...

css

Ensure that two div elements are always aligned, regardless of the circumstances

Is it possible to ensure that my two divs are always aligned, regardless of the content inside them? Sometimes the left div may contain images of varying sizes, while the right div may have text with different lengths. I initially tried setting a min-heigh ...

htmlcsstwitter-bootstrapbootstrap-4

When reopening, the Navigation Drawer with Fragment (accompanied by ViewPager) disappears

I am currently working on implementing a navigation system for my app. One of the fragments in my navigation drawer, specifically the HomeFragment, contains a ViewPager that holds three other Fragments (Bundy Clock, Announcement, Calendar). Initially, eve ...

javaandroidnavigationandroid-viewpager

Alter label text using jQuery with the selections made in two dropdown lists

<script> $(document).ready(function(){ $("#method,#paper").on("change", function(){ var paper= $('option:selected',this).text() var method = $('option:selected', th ...

javascriptphpjqueryhtml

What is the reason for AngularJS rendering boxes in a new row during loop iterations

I have a collection of items that I would like to showcase next to each other in rows. The static HTML code I have currently works perfectly. <div> <div class="box"></div> <div class="box"></div> <div class="b ...

javascripthtmlcssangularjs

Extract information from a database table for presentation as simple text

I am looking to extract information from each row and display it as plain text on the same page within a paragraph. Here is an example table for reference: <table> <thead> <tr> <th class="a header">A</th ...

javascriptphpjqueryhtml

Executing an HTTP Post "explicitly" using Python

I am seeking clarification on the distinction between an HTTP GET and an HTTP Post, as my understanding is limited in this area. Here is a code snippet I have composed: <form action="https://na.leagueoflegends.com/user/login" method="post"> < ...

pythonhtmlpostget