What is the best way to create a sticky/fixed navbar that conceals the div above it while scrolling on the page?

When I am at the top of the page, I want to display the phone number and email above the navigation bar. However, as soon as I start scrolling down, I want the phone number and email to disappear and only show the navigation bar. I have attempted using fixed-top, but it always hides the phone/email.

How can I achieve this layout across all device sizes?

I am currently utilizing Bootstrap 4.

<body class="d-flex flex-column h-100">

    <header>

        <div class="container">

            <div class="float-right mt-1">
                <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="553c3b333a15302d34382539307b3639">info@example.com</a>" class="ml-4 text-dark"><i class="fas fa-envelope"></i><span class="ml-1 text-dark d-none d-sm-inline">info@example.com</span></a>
                <a href="tel:1-555-555-5555" class="ml-4 text-dark"><i class="fas fa-phone-alt"></i><span class="ml-1 d-none d-sm-inline">+1 (555) 555-5555</span></a>
            </div>

            <br>

            <nav class="navbar navbar-expand-lg fixed-top navbar-light bg-white mt-1">
                <a class="navbar-brand" href="#">Example</a>
            </nav>

        </div>

    </header>
htmlcssbootstrap-4

Answer №1

To achieve the desired effect, simply apply the .sticky-top class to the nav element. Once you scroll past it on the page, the nav element will remain fixed at the top, ensuring it is always visible.

<nav class="sticky-top navbar navbar-expand-lg fixed-top navbar-light bg-white mt-1">
  <a class="navbar-brand" href="#">Example</a>
</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

Conceal the PayPal Button

Currently, I'm facing a challenge where I need to dynamically show or hide a PayPal button based on the status of my switch. The issue is that once the PayPal button is displayed, it remains visible even if the switch is toggled back to credit card pa ...

htmlcssangulartypescriptpaypal

Using Django and Jquery to pass multiple values to HTML, with one value stored in a .js file

Here is an example of HTML code: {% for m in mortgages %} <input id ='mortgages_counter' name='mortgages_counter' type='hidden' value='{{ m.MonthlyPaid }}'> {% endfor %} If used for a selection menu: {% for ...

jqueryhtmldjango

What could be causing the alignment issue with this html photo gallery?

Struggling to center a photo library on my webpage is really frustrating me. Does anyone have any tips? I've experimented with different ways to center it in the code, but nothing seems to do the trick :/ HTML: <div style="display: inline-block; ...

htmlcssweb

Ways to center an image within a div using Bootstrap 4

I am currently using Bootstrap version v4.0.0-beta.3 and facing a challenge with aligning an image in the absolute center of a fixed-height div tag. While I have successfully aligned the image horizontally using the mx-auto and d-block classes, I am strugg ...

twitter-bootstrapcssbootstrap-4vertical-alignment

Showcase -solely one property object- from numerous property objects enclosed within an array

Hello, I am seeking assistance as I have recently begun learning about angularJS. I am working with objects that have keys such as: scope.eventList=[]; for(){ var event = { id : hash, ...

javascripthtmlarraysangularjsangularjs-ng-repeat

Identify modifications in the input and at the same time update another input

I currently have two input text boxes. My goal is to synchronize the content of the second input box whenever the first input box is changed. I attempted to achieve this using this code snippet. However, I encountered an issue where the synchronization on ...

javascriptjqueryhtml

Centered at the bottom of the screen lies a Bootstrap button

As a beginner with bootstrap, I am currently exploring new concepts and experimenting with different features. One thing I am attempting is to center a bootstrap button at the bottom of the screen. Here is my current code: .bottom-center { position: a ...

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-3

Which file directory should I specify when using ng-include?

My project structure in Angular looks like this web server.py ##flask server program app static app.js controllers.js etc... templates index.html home.html In my index.ht ...

htmlangularjsfilepathpartialsangularjs-ng-include

Customizing CSS to override Semantic React UI styles

Is there a way to customize the default Header provided by react semantic UI? Currently, I have placed my Header within a div so that I can apply custom styles. <div className="portfolioTitle"> <Header as="h1">Check out this amazing ...

cssreactjssemantic-uisemantic-ui-react

"Get rid of the arrow in Bootstrap's dropdown menu

I'm currently using a bootstrap template that features an accordion menu. However, I have come across a scenario on one section of the page where I do not require the items to expand and show additional text, therefore, I would like to remove the arro ...

htmlcssdrop-down-menubootstrap-5

How to eliminate margins in Django's easy_pdf module

For generating PDF from HTML, I utilize easy_pdf in conjunction with xhtml2pdf. Below is a brief example: In view.py from easy_pdf.rendering import render_to_pdf_response context = dict({'user_company': 'test'}) template_name = "pdf ...

pythoncssdjangopython-3.xdjango-templates

Adjust the jQuery resizable handlers on the fly

I am encountering an issue when attempting to change the handler on a resizable element. Initially, I used : $(line) .draggable({containment:"parent"}) .resizable({ containment:"parent", handles: "e, w" }); N ...

javascriptjquerycsshandlerresizable

Tips for transferring information in JavaScript games

While browsing an HTML-based website, I am able to send POST and GET requests. However, in a JavaScript game like agar.io, how can similar actions be performed? Specifically, when playing a popular game like agar.io, how is my game state (such as positio ...

javascripthtmlpost

I am having trouble with the Bootstrap 5 column not functioning properly within my design

Currently working on a project with Bootstrap, where I am trying to create a footer that looks like the one in the image below: https://i.stack.imgur.com/XIbDk.png Below is the HTML code snippet for my footer: <footer class="footer"> <div class ...

htmlcsstwitter-bootstrap

Pass an image into an input field with the attribute type="filename" using JavaScript directly

My goal is to automate the process of uploading images by passing files directly to an input type="filename" control element using JavaScript. This way, I can avoid manually clicking [browse] and searching for a file in the BROWSE FOR FILES dialog. The re ...

javascripthtmlupload

Guide to turning off the pinch-zoom feature on Windows 8 laptops

I'm currently working on a Windows 8 desktop application where I am using C#, JavaScript, and HTML5. Specifically in the C# portion, I am utilizing the WebView object. My goal is to disable pinch-zoom within my application. I already know how to achi ...

c#htmlinternet-explorerwindows-8internet-explorer-10

What is the method used to calculate the heights of flex items when the flex-direction property is set to column?

I'm currently grappling with the concept of flexbox layout and have been exploring the flex-direction: column option. HTML <div class="container"> <div class="item"> Lorem ipsum dolor sit amet consectetur a ...

htmlcssflexbox

Html5 canvas not resizing to fit container

I'm currently working on creating a square canvas using CSS to ensure it is instantly sized when the page loads. To achieve this, I am wrapping the canvas in a div and applying the following styles: http://jsfiddle.net/evopgwzd/ body { backgrou ...

csshtmlcanvashtml5-canvas

Tips for designing a webpage where a div element adjusts to fit the screen, regardless of the width of the content inside

Can CSS3 or a JavaScript library be used to create a webpage with a div that contains content wider than the screen, such as a large image or newsletter, and still fits it to the screen without scrolling or clipping any content? Below is an image demonst ...

csshtml

Create a JavaScript and jQuery script that will conceal specific div elements when a user clicks on them

Within my navigation div, there exists another div called login. Through the use of JavaScript, I have implemented a functionality that reveals additional divs such as login_name_field, login_pw_field, register_btn, do_login_btn, and hide_login upon clicki ...

javascriptjqueryhtml