Adding a see-through Bootstrap Navbar to a Fullpage.js website: A step-by-step guide

I am trying to incorporate a transparent Bootstrap Navbar into my page that is using fullpage.js. The desired outcome is for the navbar to stay on top of the page without affecting the layout of the website content. I have referenced an example here, but my attempts with the code below have been unsuccessful. Despite researching online, I was unable to find a solution. Here is a snippet of the code where the navbar is not being displayed.


<html>

<head>
    <meta charset="UTF-8">

    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.css" integrity="sha512-TD/aL30dNLN0VaHVoh9voFlNi7ZuWQYtV4bkIJv2ulZ8mEEkZJ7IyGvDthMKvIUwzLmPONnjQlAi55HTERVXpw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js"></script>

    <link href="css/master.css" type="text/css" rel="stylesheet" />

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

</head>

<body>
    
    <div id="fullpage">
        <nav class="navbar navbar-light bg-transparent" id="myMenu">
            <!-- Brand -->
            <a class="navbar-brand" href="#">Logo</a>
    
            <!-- Toggler/collapsibe Button -->
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"
                style="border: none;">
                <span class="navbar-toggler-icon"></span>
            </button>
    
            <!-- Navbar links -->
            <div class="collapse navbar-collapse" id="collapsibleNavbar">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="index.html">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="about-us.html">About us</a>
                    </li>
                </ul>
            </div>
        </nav>

        <div class="section">
            <div class="container-fluid">
                <h2>Lorem ipsum</h2>
            </div>

        </div>

        <div class="section">
            <div class="container-fluid">

            </div>
        </div>

        </div>

    <script>
        new fullpage('#fullpage', {
            //options here
            menu: '#myMenu',
            autoScrolling: true,
            scrollHorizontally: true,
            navigation: true,
        });

        //methods
        fullpage_api.setAllowScrolling(true);
    </script>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
    </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
    </script>
</body>

</html>
javascripthtmlcssbootstrap-4fullpage.js

Answer №1

After some troubleshooting, I was able to come up with a solution on my own. By making adjustments to the css within the "navbar" class and changing its position from relative to fixed, I successfully achieved the desired outcome!

Answer №2

Here are the styles added to the navbar:

<html>
   <head>
      <meta charset="UTF-8">
      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.css" integrity="sha512-TD/aL30dNLN0VaHVoh9voFlNi7ZuWQYtV4bkIJv2ulZ8mEEkZJ7IyGvDthMKvIUwzLmPONnjQlAi55HTERVXpw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js"></script>
      <link href="css/master.css" type="text/css" rel="stylesheet" />
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
         integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   </head>
   <body>
              <nav class="navbar navbar-light bg-transparent" id="myMenu">
            <!-- Brand -->
            <a class="navbar-brand" href="#">Logo</a>
            <!-- Toggler/collapsibe Button -->
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"
               style="border: none;">
            <span class="navbar-toggler-icon"></span>
            </button>
            <!-- Navbar links -->
            <div class="collapse navbar-collapse" id="collapsibleNavbar">

               <ul class="navbar-nav">
                  <li class="nav-item">
                     <a class="nav-link" href="index.html">Home</a>
                  </li>
                  <li class="nav-item">
                     <a class="nav-link" href="about-us.html">About us</a>
                  </li>
               </ul>
            </div>
         </nav>
      <div id="fullpage">

         <div class="section">
            <div class="container-fluid">
               <h2>Lorem ipsum</h2>
            </div>
         </div>
         <div class="section">
            <div class="container-fluid">
            </div>
         </div>
      </div>
      <script>
         new fullpage('#fullpage', {
             //options here
             menu: '#myMenu',
             autoScrolling: true,
             scrollHorizontally: true,
             navigation: true,
         });
         
         //methods
         fullpage_api.setAllowScrolling(true);
      </script>
      <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
         integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
         integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
         integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
   </body>
</html>

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

Executing an xajax/ javascript function simultaneously

Is there a way to simultaneously execute the same function? Here is an example: function convert_points() { show_loading(); xajax_ConvertPoints(); xajax_GetRegularGamingCards(); } When xajax_ConvertPoints is called, there seems to be a mill ...

phpjavascriptfunctionxajax

Accessing the locally stored data and displaying it in ng-bind

My journey to learn javascript through this project has hit a roadblock. I have stored an exchange rate in local storage: localStorage.gbpUSD = "1.42746"; Now, I want to utilize it instead of the hardcoded exchange rate in the code below... <input t ...

javascriptangularjsionic-frameworklocal-storagecurrency

Tips on Including Static Header and Footer in Multiple HTML Pages

What is the best way to reuse a header and footer on multiple HTML pages without repeating code? I have 5 HTML pages that all need to include the same header and footer elements. How can I efficiently reuse these components across all pages? ...

javascriptjquerycsshtml

Tips on how to retrieve an Observable Array instead of a subscription?

Is there a way to modify this forkJoin function so that it returns an observable array instead of a subscription? connect(): Observable<any[]> { this.userId = this.authService.userId; this.habits$ = this.habitService.fetchAllById(this.userId); this.s ...

javascriptarraysangulartypescriptobservable

Tips for declaring a particular type during the process of destructuring in Typescript

I have my own custom types defined as shown below: export type Extensions = | '.gif' | '.png' | '.jpeg' | '.jpg' | '.svg' | '.txt' | '.jpg' | '.csv' | '. ...

javascripttypescripttypescript-typingstypescript-generics

How can I customize button colors in react-bootstrap components?

Changing colors in react-bootstrap may be a challenge, but I'm looking to customize the color of my button beyond the primary options. Any suggestions on how I can achieve this using JS and SCSS? ...

javascriptcssreactjsbootstrap-4react-bootstrap

Angular's onreadystatechange event is triggered when the state

Hey there, I'm new to Angular and had a question. Is it possible to use the $http service in Angular to trigger a function whenever there is any change in the ready state/status, not just for success or failure? If so, what would be the equivalent ang ...

javascriptangularjsajax

Having trouble with sending information to the PHP server, unable to determine the root cause

Can someone help me figure out why the data from a form being sent to a php script for sending an email isn't working correctly? It's part of a template code but I suspect there might be an error. Specifically, I believe the {'userName' ...

phpjavascripthtmlemail

Unable to interact with web element using JavaScript

Struggling to find a solution for simulating a click on a button element on Outlook.com mobile website using JavaScript. Despite numerous attempts from online sources, the button remains unresponsive to clicks. An interesting discovery was made that the c ...

javascriptseleniumclickappium

Fetching information via AJAX to populate a whitelist for Tagify

Attempting to retrieve data via ajax for tagify whitelist, but encountering the following error: ReferenceError: Can't find variable: clist Here is the code snippet: $.ajax({ url: '/ajaxget/tags', method: &ap ...

javascriptajaxtagify

Having trouble getting the Vue checkbox change event to work?

I am currently utilizing Vue to handle a function that is not triggering on the change event when a checkbox is checked. I am uncertain if the issue lies in the fact that I have placed it within the mounted lifecycle hook or if there is another underlying ...

htmlvue.js

Developing web applications using a combination of PHP, MySQL, and

I am in need of creating an HTML form that functions as CRUD. This form should be able to record inputs such as "row_number", "channel_name", and "ip_address". It will store all the data in a MySQL table using the "ORDER BY row_number" function. The form i ...

javascriptphphtml

What is the best way to send information from a component on one page to a component on another page in React/Next.js?

Overview In my Next.js application, I have two pages: index.js and results.js. The index page features two Location Autocomplete fields that provide the address and LatLng of a selected location. This data is stored in a variable named markers on the inde ...

javascriptreactjsnext.jsreact-google-maps

When using CSS border-width:1px, I notice that the borders aren't consistently thin

I'm attempting to add thin borders to a div. My CSS code is as follows: border: solid; border-width: 1px; However, the resulting borders appear unevenly thin in my browser. The borders on the left and bottom seem thicker than those on the right and ...

css

Is it necessary to reset (local storage, session storage) once the countdown timer reaches zero?

I have successfully implemented a countdown timer using session storage in my code. However, I am looking to enhance its functionality further by: Clearing the local session if the user leaves the site before the countdown timer finishes. Automatically c ...

javascripthtmltimerlocal-storage

Overlapping spans

I am trying to stack these spans on top of each other without much success, http://jsfiddle.net/76NNp/79/ <td class="rtf hov"> <div>Investment</div> <div class="mub eub"> <span style="float:left">Test</spa ...

jqueryhtmlcss

Pass information from ColdFusion to jQuery

I'm attempting to achieve a similar result as this, but I believe the syntax is not quite right: <cfset details = '{ name: "name", address:"address"}' /> <img data-details='#details#' onClick="DisplayDetails()" /> &l ...

javascriptjquerycoldfusion

Tips for ensuring a custom list item remains at the top when the screen size decreases

My unordered list with custom bullets is displaying some unexpected behavior. When the screen size drops below 364px, the list items wrap to two lines. However, the custom bullet ends up on the second line instead of the first. How can I fix this for smal ...

htmlcsstwitter-bootstrapbootstrap-5

Tips for effectively utilizing Vuelidate to display errors selectively after the user has completed input:

I have implemented a form using Bootstrap-Vue with some Vuelidation code applied to it. <b-form @submit.prevent="onSubmit"> <input type="hidden" name="_token" :value="csrf" /> <transition-group name="fade"> <b-form ...

javascriptvue.jsbootstrap-vuevuelidate

What is the correct way to establish an array variable containing objects?

What is the correct way to declare an object within an array variable? I encountered the following error message: "TypeError: Cannot set property 'name' of undefined" Here is the code snippet in question: let data = [] data[0].name = "john" ...

javascript