Incorporate a personalized menu into the FullPage.js section

Seeking advice on fullpage.js for my website - Can a non-sticky menu be added to all sections without affecting loading speed? I attempted to include the menu code in each section, but it slowed down my website. Any suggestions or tips?

Answer №1

If you're looking to give each section its own menu, you can try the following approach:

Here is the code snippet:

<div id="fullpage">
  <div class="section">section 1</div>
  <div class="section">
    <div class="sectionMenu">This is the menu for section 2</div>
    section 2
  </div>
  <div class="section">
    <div class="sectionMenu">This is the menu for section 3</div>
    section 3
  </div>
  <div class="section">section 4</div>

You can style the menu using the following CSS:

.sectionMenu {
  position: absolute;
  top: 0px;
}

Check out the JSFiddle link for a demonstration. When you use fullpage, it will adjust the sections and make them fixed, so any absolute positioning within a section will be relative to that section. Hopefully, this clarifies things for you!

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

Styling CSS for Centering a Heading on an Image's Center

Struggling to center an h3 heading in the middle of an image within a grid? Look no further, as I have 3 images across one row - four columns per image/heading. Check out the desired layout https://i.stack.imgur.com/8VFRt.png I've managed to center t ...

Having trouble accessing a CSS file through HTML

Is there a reason why I am facing difficulties accessing main.css from app.html to enable Tailwind CSS? When I try putting it in the style brackets in the .svelte file itself, it throws an error. Can anyone explain why this is happening? <link rel= ...

I attempted to implement a login feature using a prompt within a React application, but I encountered a situation where the browser asked me for the same details twice. How can I resolve

https://i.sstatic.net/nhuC1.png I've been working on adding a login feature to my webpage where the content is only rendered if users input valid credentials. However, I've encountered a problem where the browser prompts for credentials twice in ...

How to extract keys with the highest values in a JavaScript hashmap or object

Here is an example for you to consider: inventory = {'Apple':2, 'Orange' :1 , 'Mango' : 2} In this inventory, both Apple and Mango have the maximum quantity. How can I create a function that returns both Apple and Mango as t ...

Using placeholder in number and range input in Angular.js to display a placeholder text instead of a value when the input is 0

I am using Angular.js to link a number and range input so they work together with the same value. I have set the default value to 0 when the page loads as $scope.lbs_needed = 0;. My goal is to display a placeholder="0" whenever the user sets the value of e ...

Transferring a variable through a Navigation Bar selection

Currently, I have a PHP/HTML select box that is generated dynamically based on database variables. I utilize $_POST to identify the selection and handle it as needed. My goal is to transition this functionality into a dropdown menu within a navigation bar ...

Prevent duplicating ReactJs when using Gulp: A guide

My current project involves using ReactJS as the view library for client-side rendering. Additionally, I am utilizing a lot of components from Material-UI in my application. One challenge that I have encountered is the need to use gulp for setting up brows ...

I aim to generate a JavaScript string that, when placed within a div tag, will display as a list

I need assistance with formatting a string that contains a list of items to display in a specific way within a div tag using JavaScript. The string has multiple items that I wish to show as a bulleted list. Here is an example of the string: const items = & ...

Using Stylus and Nib CSS in a secure Node/Express application is causing Chrome to flag insecure JavaScript warnings

System notifications: The website at [...] encountered insecure content from http://fonts.googleapis.com/css?family=Quicksand. as well as The site at [...] showed insecure content from http://themes.googleusercontent.com/static/fonts/quicksand/v2/sKd0EM ...

What is the best way to customize the appearance of only one of two identical tables using HTML and CSS?

I have two tables that look identical: <html> <head> <style> td, th { text-align: left; padding: 28px; } </style> </head> <body> <table> <tr> ...

Performing a $.POST request on a Squarespace webpage

I created a custom form on my website for booking appointments, and it posts to a third-party server. When I submit the form using the <form> tag, I receive the email notification. However, I want to submit the form using $.POST so that I can customi ...

Issue with Node.js OAuth authentication

As someone new to Node.js and specifically OAuth, I have been exploring the use of Google APIs with Node.js. So far, here is what I've accomplished: var fs = require('fs'); var readline = require('readline'); var google = require( ...

Positioning of the navigation menu

After customizing my Bootstrap navbar, I noticed that when the responsive size changes to mobile, the burger menu opens on the left side. Is there a way to move it to the right? Any help would be appreciated. Here is the HTML code: <!DOCTYPE html> ...

Issue with Google Cloud Task failing to forward body data to an HTTP Cloud Function

I have a Google Cloud task where I took most of the code from the Cloud Tasks documentation. You can find the documentation here: https://cloud.google.com/tasks/docs/creating-http-target-tasks The purpose of the cloud function is to receive dateTo and dat ...

When evaluating code with eval, properties of undefined cannot be set, but the process works seamlessly without

Currently, I am attempting to utilize the eval() function to dynamically update a variable that must be accessed by path in the format myArray[0][0[1][0].... Strangely enough, when I try this approach, I encounter the following error: Uncaught TypeError: ...

Deactivating a button if the input fields are blank using ReactJS

Hi there, I'm new to reactJS and recently encountered an issue with my code. Everything seems to be working fine except for the NEXT button not being disabled when text fields are empty. My expectation is that the NEXT button should only be enabled af ...

Providing UI field attributes within server JSON data

Suppose I have numerous form fields that need to be displayed on the user interface. Additionally, in a standard Modify workflow, let's assume that these fields will have various attributes like value, mandatory, editable, disabled, label, regex (for ...

Why does the Select2 Drop down eliminate the mandatory border color?

Within my application, I have implemented a feature where required fields are designated with a red border. To achieve this effect, I utilized the following CSS code: input[data-val-required], select[data-val-required] { border: 1px solid #EFA4A4 !imp ...

Can Express not use await?

Why am I encountering a SyntaxError that says "await is only valid in async function" even though I am using await inside an async function? (async function(){ 'use strict'; const express = require("express"); const bodyParser = ...

Share identification but display the label

I'm currently utilizing the jQuery plugin Tag-It for managing auto-suggestion and tagging functionalities. The data retrieval through an Ajax call is operating smoothly. Right now, the data is being fetched in the following format: {"itemID":"ItemNa ...