Issue with positioning ControlNav and thumbnails in Nivo Slider

This is my first attempt at using Nivo Slider, so please be patient with me.

I am attempting to place my controlNav thumbnails INSIDE the slider (specifically in the center, 15px from the bottom of the slider), however, when I use position:absolute along with left and top attributes, the positioning of the thumbnails seems to be relative to the body rather than the slider itself.

Am I missing something? I have been searching online for solutions but haven't had any luck. Could it be that I am using the wrong keywords in my search?

The website I am testing this on is [link removed]. I have reverted the thumbnails back to their original centered below slider layout, so feel free to experiment with them in the console if needed.

javascriptjqueryhtmlcssnivo-slider

Answer №1

If by "thumbnails", you are referring to the small pager icons, you can modify the css like this:

#front-showcase .nivo-controlNav {
z-index: 10;
position: relative;
bottom: 40px;
}

In this adjustment, I have eliminated display:block and you have the flexibility to customize the 40px according to your layout requirements.

Answer №2

To implement the positioning properties in your CSS, make sure to target .nivo-control instead of nivo-controlNAV.

I found success by including the following code snippet in your <head>:

<style type="text/css">
    .nivo-control {
        position:relative;
        top:-45px;
    }
</style>

Answer №3

Oh, success! Thanks to the guidance of @aditya and @mToce, I finally discovered the solution.

It turns out, my mistake was forgetting to set the #front-showcase element as relative, causing the controlNav to position itself based on the body instead of the slider.

For a more in-depth explanation, check out this resource:

http://css-tricks.com/absolute-positioning-inside-relative-positioning/

To fix the issue, I simply added position:relative; to my #front-showcase and position:absolute; to .controlNav.

I hope this information is beneficial to 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

Arrange floating elements in a three-column layout

Can anyone help me with a CSS solution to make boxes with different heights stack underneath each other neatly, similar to Tetris? Here's my code: CSS #page .equipeBox{ float:left; width:280px; padding:10px; margin:10px; backgro ...

htmlcsscss-float

Here is how you can include a date picker with the ability to choose the day, month, and year

Can someone help me create a datepicker with options to select days, months, and years? I've been able to find resources for selecting months and years, but I'm having trouble adding the option to choose specific days. If anyone has experience ...

javascriptjqueryhtmldatejquery-ui

Activate the 'li' element within the 'ul' whenever a 'ui-sref' link on the

I have been working on building a dashboard that consists of an abstract state called dashboard, with subdashboard as the immediate child state. https://i.sstatic.net/YTHky.png Previously, clicking on user details would take the user to the dashboard.tab ...

javascripthtmlcssangularjstwitter-bootstrap

When using Selenium with Java, interacting with checkboxes produces varying results compared to manually clicking on them

I'm encountering an issue with clicking on a specific checkbox that should be checking all the other checkboxes below it (root parameter). Previously, when using the following code on the element: arguments[0].click(); Attempting to use the regular ...

javascriptjqueryhtmlseleniumcheckbox

Steps to vertically shift an image downwards within a navigation bar using HTML and CSS

Currently, there is a fully functional navigation menu that can be toggled within a webpage. An image is also included in the navigation menu and positioned below the text. I would like to move the image to the very bottom of the navigation menu to remove ...

htmlcssvertical-alignment

Can we invoke a function through Ajax?

Apologies for my lack of experience, I am just getting acquainted with Ajax. Please bear with me if my question seems unrefined. I attempted to do something, but unfortunately, I did not achieve success. Let me explain what I was trying to accomplish: I ...

javascriptphpjqueryajax

Error: The hook call is invalid and can only be made within the body of a function component in ReactJS

Hello everyone, I am currently facing an issue with saving the lat and lng variables in the state within a hook. When trying to do so, I encounter the following error message: "Error: Invalid hook call. Hooks can only be called inside the body of a functio ...

javascriptreactjsreact-hooksnext.js

Guide to choosing a default setting in an ng2 framework by utilizing a child component

Currently, I am in the process of developing an application where I have created an input component that can adapt to various types such as text input, select, text area, and more. To achieve this flexibility, I set up a model to provide all necessary inf ...

javascriptangularangular2-formsangular-ngselect

Is the setInterval function in JavaScript only active when the browser is not being used?

I am looking for a way to ensure proper logout when the browser is inactive using the setInterval() function. Currently, setInterval stops counting when the browser is active, but resumes counting when the browser is idle. Is there a way to make setInterv ...

javascriptphp

Establish the height of the root to be the same as the height

As a newcomer to HTML and CSS, I am struggling with setting the background color of my root div on a webpage. My code is quite complex, but let me simplify the issue for you by providing a sample problem below. <style> #background{ background-c ...

htmlcss

jqGrid and the use of prototype functions

When using prototype functions in my code, I encounter an issue where adding a select box to the jqgrid results in an extra option being added at the bottom with a value that is a function. However, when I remove the prototype functions, everything works a ...

javascriptjqueryjqgrid

There was an error loading the resource as the Object does not have the method 'adGallery'

For the past two days, I have been attempting to implement the jQuery plugin "ad-gallery" on my website without success. I must mention that my knowledge in JavaScript and CSS is limited, so the issue could be something simple. The peculiar thing is that ...

jquerycssgallery

Could a complex, intricate clipping path be created using CSS 3?

Here is an example: Can this be achieved using only CSS? I wish to create two divs: A circle without any background or border. A div with a background. I aim to have point 1 clip the background from point 2. This will allow me to rotate the backgroun ...

htmlcss

What is the most effective method for centering the title text in a div while keeping the remaining text left-aligned?

I am trying to create a layout with 6 divs arranged in two rows of 3. Each div should have a centered title, a centered image, and text aligned to the left underneath. What is the best approach to achieve this layout? Is it possible to center the title u ...

csshtmlcenter

Arrangement of SVGs within one another

I am working on achieving a layout with multiple SVG elements arranged in a specific way. This layout involves a top-level gray box containing several orange boxes, each of which holds red boxes. The width and height of the top-level SVG are known. https: ...

htmlcsssvg

The div element is shifting as the page is being resized

When I increase the zoom level of my page to 110%, the div inside the larger one keeps getting bigger and eventually moves to a new line. Is there a way to stop it from shifting? If so, please provide guidance on how to fix this issue without criticizing m ...

htmlcss

Exploring methods for handling svgs incorporated in angular.js templates with webpack

I'm currently working on cache-busting my SVGs and other files like translation JSON. The issue I'm facing is that webpack does not seem to recognize imported svgs in the following format: <md-icon md-svg-src="assets/icons/ic-edit.svg">&l ...

javascriptangularjswebpack

Electron JS-powered app launcher for seamless application launching

Currently, I am working on a project to develop an application launcher using HTML, CSS, and JS with Electron JS. Each application is linked through an a href tag that directs users to the respective application path. If a normal link is used in the a hr ...

javascriptnode.jsnpmelectron

What is the reason for jQuery scripts not functioning properly when the scripts are placed above the jQuery library?

this script is functioning correctly: <div class="demo-gallery" data-pswp-uid="1"> <a class = "delete_button">click</a> <script src="https://code.jquery.com/jquery-2.1.4.js"></script> <script> ...

javascriptjquery

Determining the height of a jQuery mobile page

Struggling for the last 24 hours to adjust the min-height styling on a jQuery mobile page specifically for mobile safari. Despite trying various methods like inline styles and overriding ui-page styles, I have not been successful in changing the height of ...

jqueryjquery-mobilecss