Ways to implement a space above the navigation bar in Bootstrap 4 to accommodate text or buttons

I am trying to add a greeting message above the navigation bar, like: Welcome Sarah! Take a look at the image below to see what I currently have:

https://i.sstatic.net/4v2Fd.png

  1. As shown in the image, I want to display "Welcome Sarah" above the Login | Sign Up buttons.
  2. I also want to include a search bar above the Adidas Shoe Store starting from the top-left, and display "Welcome Sarah" on the right end before the navigation links.

This is the code I am using:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

 <div class="container">
 <div class="row float-right" >

  // Search bar
 <input type="text" placeholder="Search" name="search">
 <a href="">Hello Sarah!</a>
 </div>
 </div>


  <nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">

  <a class="navbar-brand" href="#">Adidas Shoe Store</a>
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navb" aria-expanded="true">
 <span class="navbar-toggler-icon"></span>
 </button>
 <div id="navb" class="navbar-collapse collapse hide">
<ul class="navbar-nav">



  <li class="nav-item">
    <a class="nav-link" href="#" style="color:#007bff;">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Page 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Page 2</a>
  </li>
  </ul>

<ul class="nav navbar-nav ml-auto">
  <li class="nav-item">
    <a class="nav-link" href="#"><span class="fas fa-user"></span> Sign Up</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#"><span class="fas fa-sign-in-alt"></span> Login</a>
  </li>
  </ul>
 </div>
</nav>
csshtmlnavigationbootstrap-4

Answer №1

The expected functionality is not working properly due to the Bootstrap .fixed-top class assigning a z-index value of 1030 and applying a position:fixed at the top to the nav element.

Consequently, the .container you included appears both behind and below the nav.

To resolve this issue, the .container requires a different position other than static, as well as a z-index greater than 1030 in order to be displayed above the nav. Additionally, some padding-top needs to be added to the nav to allow visual space for the contents of the .container in this particular setup.

The desired effect can be achieved by utilizing the following structure and incorporating the recommended CSS:

<div class="container" style="position: relative; z-index: 1031; padding: .5rem 1rem;">
   <div class="row">
    <div class="col-sm-6">
      <input type="text" placeholder="Search" name="search">
     </div>
    <div class="col-sm-6 text-right">
      <a href="">Hello Sarah!</a>
     </div>
   </div>
</div>

<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light" style="padding-top: 2.5rem">

(I've added two .col-sm-6 divs inside your .row to simplify arrangement on mobile screens; it should also be noted that the .container class has a limited width compared to nav, so consider changing it to .container-fluid)

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

Transforming an Associative Array into a Structured Table

I have a task of converting an Associative Array into an HTML Table. This is how the Array is structured: Array ( [] => Harvest_Project Object ( [_root:protected] => project [_tasks:protected] => Array ( ) ...

phphtmlarrays

Achieving a transparent background color for a div without affecting the content with CSS

I am attempting to design a div element with a basic background color and some text displayed on it. I would like to lower the opacity of the background color in this div, but every time I try, the opacity of the text also changes. Is there a way to adjust ...

htmlcss

Ensuring Bootstrap retains fullscreen tables while adjusting window size

I have set up a webpage containing a table and a footer. Utilizing bootstrap, I ensured that the footer remains visible while the table adjusts its height based on the remaining space on the screen. While this resizing works perfectly when the window size ...

javascriptcssnode.jsbootstrap-4electron

Challenges with the dropdown menu navigation bar

I am struggling with my dropdown menu and sign up/sign in buttons as they are not aligning properly. I have tried various coding methods but haven't been able to fix the issue. Can someone provide me with suggestions on how to rectify this problem? c ...

javascriptphphtmljquerycss

Rotate images every 5 seconds, pulling them directly from the server

I am looking to update the users every seven seconds on my website. To do this, I need to retrieve all user information from the server using JavaScript. What is the most efficient way to accomplish this task? My initial thought is to send an HTTP request ...

jquerypythonhtmldjango

The width of Highcharts increases proportionally to the growth of the chart's width

I want to create a highcharts graph where the width increases as data points increase. Currently, I have: I am using vuejs with highcharts, but it should work similarly with jquery or other frameworks. <div class="col-md-6" style= ...

javascriptcsshighcharts

What could be the reason for the inconsistent resizing behavior of this DIV container?

Upon viewing this demo, it becomes evident that there is an outer DIV containing an inner DIV on the left side with two inner SPANS. The challenge lies in positioning the two SPANS next to the DIV. If a line break (BR) is used to separate them, the width o ...

htmlcss

The background image refuses to load

I've been working on a website project using nodejs, expressjs, and pug as my template engine. I designed the home page in pure pug but ran into an issue when trying to add a background image to a specific section of the site. Despite double-checking ...

cssnode.jsexpressbackendpug

Finding the error related to Jquery's .siblings() function has been quite challenging for me

Hello, I need some help troubleshooting my jQuery code. I am attempting to create a hover effect where hovering over one text element will apply CSS to the other two elements. I'm not sure if the issue lies in the $(".yo") or the ('blur') pa ...

jqueryhtmlcss

Each row will have two carousels

Having some trouble with Bootstrap 4 and trying to display two carousels next to each other on a laptop screen (col-md-6) and full width on mobile (col-sm-12). Can't seem to get it working, maybe I'm targeting the wrong elements? <div id="col ...

bootstrap-4

html - automatically populating input fields when the page loads

Currently, I have an HTML form embedded in the view and I am looking for a way to automatically populate specific input fields with json variables obtained from the server. Instead of manually writing JavaScript code for each field, my goal is to access th ...

javascriptjqueryhtmljsononload

Introducing whitespace nowrap disrupts the CSS grid layout

I've encountered an issue with a grid layout featuring 2 columns. I'm trying to insert an element into one of the columns that will display an ellipsis if its content is too long. However, when I add whitespace: nowrap; to the CSS, it causes the ...

htmlcsscss-grid

Selenium can be used to locate elements between two specific spans

I'm on a mission to locate specific text within this HTML code using Selenium <span class="value"> Receiver 1 <br> </span> Is there a way to make it more straightforward, like perhaps using span[class=value]? ...

cssselenium

Cannot locate module: Error: Unable to find the path '../containers/Layout' in '/home/yusquen/Projectss/react-shop/src/components'

https://i.stack.imgur.com/U1097.png description of image goes here Issue with module: Error: The file '../containers/Login' could not be found in the 'react-shop/src/components' directory. ...

javascripthtmlcssreactjsnpm

demonstrating how to display a bootstrap tab by clicking a button`s onClick function

I'm struggling to activate/display a Bootstrap tab using the onClick event of a Bootstrap button (with updated code and additional declarations). Below are the tab definitions: <ul class="nav nav-tabs"> <li class="nav-item& ...

bootstrap-4

What is the best way to extract text from a string that is enclosed by two particular words?

Using Ajax, I am extracting the complete HTML code from JSON. Once fetched, the string appears as follows : <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" cont ...

javascriptjqueryhtmlajax

What is the best method for storing a variety of HTML form data in a database?

I am currently working on developing a survey system that includes the feature of creating various types of questions through a drag & drop HTML form builder. The idea is for a client to create their survey form, which will then be stored in a database tab ...

phphtmlmysqlformszend-framework

scrapy css last-child selector unable to target text

I am currently facing a challenge in selecting and matching elements within an HTML document using CSS selectors in the Scrapy framework. My issue lies with extracting information from a specific field using the last-child selector. Below is the snippet o ...

htmlcssscrapy

Press one button to activate another button

I am looking to activate a button's class by clicking on another button. The button I have is: <button class="clear-cart banner-btn">clear cart</button> This button is used for clearing a cart. On the order confirmation page, I click on ...

javascripthtmlbutton

Having trouble deactivating a select option value in the select tag on IE6Ha

Within a select box containing values (a,b,c,d), I am attempting to disable only 'c' within the dropdown. While the disabled property works in all browsers, it unfortunately does not function in IE6. I am seeking a solution to make this work in ...

phphtmljqueryhtml-select