Position Navbar Links on the Right Side using fullPage.js

I'm facing an issue with my navbar placement. I want it to be at the bottom of the viewport with the links aligned to the right side. Although I have successfully placed the navbar at the bottom, I'm unable to align the links to the right no matter what I try.
Below is my HTML code:

<body>
  <nav class="nav" id="myMenu">
    <a data-menuanchor="sec1"  class="nav-link"  href="#sec1">Section 1</a>
    <a data-menuanchor="sec2" class="nav-link"  href="#sec2">Section 2</a>
  </nav>
  <div id="fullpage">
    <div class="section" id="secc1" >Section 1</div>
    <div class="section" id="secc2" >
      <div class="slide">Slide 1</div>
      <div class="slide"> Slide 2 </div>
      <div class="slide"> Slide 3 </div>
      <div class="slide"> Slide 4 </div>
    </div>
  </div>
</body>

This is my JQuery code:

<script>
  $(document).ready(function() {
    $('#fullpage').fullpage({
      menu:'#myMenu',
      anchors: ['sec1', 'sec2'],
      sectionsColor: ['#fc6c7c', '#69a366'],
      scrollingSpeed: 1000,
      fixedElements: "#myMenu",
    });
  });
</script>

Lastly, here is the CSS code:

<style>
  #myMenu{
    width: 100%;
    bottom:0px; 
    position:absolute;
  }

  .section{
    text-align: center;
  }

  .nav-link{
    color:white;
    position: relative;
    right: 0px;
  }

  .nav-link:hover{
    color:red;
  }
</style>

As a side question- can someone explain what the menu: function and
data-menuanchor= attribute do? It seems that neither of them makes any difference in this case.
Thank you!

Answer №1

Give it a shot

.nav-link {
  color: #ffffff;
  position: relative;
  text-align: right;
}

Answer №2

Implement these custom styles and ensure they are included after the fullpage.js stylesheet:

.fp-slidesNav{
    left: auto !important;
    right: 20px; /* adjust margin as needed */
}

View Demo Online

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

What is the best way to implement <li> in place of <div> to ensure the tool-tip code functions properly?

To see an example, please refer to this fiddle: http://jsfiddle.net/66nLy/12/ I am looking to achieve a similar functionality on a webpage, but using <li> instead of <div>. Here is the HTML code snippet: <table class="base-table selection- ...

Error alert: The $ symbol is not defined

I followed a tutorial to create an auto-advancing slideshow in JavaScript/jQuery and it worked perfectly on jsfiddle. However, when I transferred everything to Dreamweaver, it stopped functioning. I have triple-checked that all the necessary files are link ...

"Incorporate multiple data entries into a table with the help of Jquery

How can I store multiple values in a table row using jQuery or JavaScript when the values come from a database via Ajax? <html> <head> <style> table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th ...

I am encountering unexpected exponential values when using SVG.js group, even though I have stored the values as strings within the group

Utilizing SVG.js to store a numeric value as a String within a group (specified attribute). How can one retrieve the value as a string instead of an exponential numeric value? Despite converting the value to a String before adding it to the group, upon r ...

What is the best way to change the location of a jQuery Mobile global popup?

I have a jQuery Mobile global popup that is initially empty and generated dynamically. I am utilizing the beforeposition event to detect when the popup opens. At this point, I load a configuration file or content file, create the content, and then add it t ...

Designating a class for the main block

Having an issue with a slider in uikit. When the slide changes, the visible elements also change their class to uk-active. I'm trying to select the central element from the active ones but css nth-child doesn't work. Any suggestions on how to do ...

The PNG image keeps getting cropped

The bottom of a PNG image is being cropped off. View the picture illustrating the issue .loadMoreBtn-label { background-image: url(picture); background-repeat: no-repeat; padding-left: 30px; background-size: 23px 23px; background-posit ...

What could be the reason for JQuery not updating the CSS class?

Seeking assistance with a jQuery issue. When clicking a link in the navbar, I am attempting to change its style (background and font color). Here is the code I am using: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery ...

What are the techniques for implementing an if statement in CSS or resolving it through JavaScript?

Demo available at the bottom of the page Within my code, there is a div called #myDiv that defaults to an opacity of 0. Upon hovering over #myDiv, the opacity changes to 1. See the CSS snippet below: #myDiv { opacity: 0; } #myDiv:hover { opacity: 1 ...

What is the process for showing a table based on a selected value?

I could use some help - I am working on a <select> element with 4 different options in the form of <option>. What I want to achieve is to have tables that are initially not visible, and then when an option is clicked, the corresponding table wi ...

Adjust size of element in relation to Background Cover using jQuery

Can you help me solve a challenge I'm facing? I have a website with a fullsize background image, and I need to attach a div to a specific position on the image while ensuring that it scales in the same way as the background image with the "background ...

Ways to eliminate excess white space or margins on the right-hand side of a webpage

After applying some CSS to reduce the height of the images, I encountered an issue where the last image expands in width, creating a white space or margin on the right side of the page. The first three images do not exhibit this problem, leaving me puzzled ...

What is the best way to ensure that the size of a header is balanced on both margins?

I just recently began learning CSS about a week and a half ago, and I'm facing a challenge that I'm struggling to overcome. I want my webpage to have the same design as shown in this image, but despite trying various solutions, I can't seem ...

Error with Bootstrap's right-aligned navbar functionality

I am currently facing an issue with using Bootstrap classes to align my items to the right in the navbar. I am working on a Django tutorial and incorporating Bootstrap into my HTML page. Below is the code snippet: <!-- Individual items in the navbar -- ...

Crafting a unique rounded rectangle with an Inverted S-curve design using CSS and HTML

In an attempt to replicate the design showcased in the image provided via link, I am working on creating a rounded rectangle with an "S-curve" effect at the bottom. To achieve this, my current approach involves utilizing a parent element (hero_right) with ...

Populate DataTable with HTML content by fetching it through Ajax requests

My goal is to dynamically load the HTML returned from a controller into a div when a user clicks on a row in a table. Check out my code snippet below: // Add event listener for opening and closing details jQuery('#exRowTable tbody').on ...

Issue with the height of sections in the active menu

While the set-up below is functional for content within section height limits, it fails when exceeding the limit causing overflow. Adding "display: table" or "overflow: hidden" to fix the overflow issue affects the menu's active state behavior. Sett ...

Creating a CSS navigation sub menu

I am having trouble with my CSS code regarding the sub navigation menu. It seems to close as soon as I try to select an option. I suspect that there might be something wrong with the last CSS style. Currently, it only shows when you hover over it but disap ...

Import calendar information into FullCalendar

I have integrated FullCalendar into my Symfony project to display events from a database on a calendar for the user. Following the documentation, I have set up an AJAX request on my calendar.html.twig page to retrieve the data and store it in localStorage. ...

Modifying data-iconpos Dynamically with jQuery Mobile

Currently, I am developing a jQuery Mobile app and I am facing an issue. I want to have the ability to change the attributes of navbars across multiple HTML files using a single function in a separate .js file. I attempted to modify the class during page c ...