Move the navigation bullets of the Nivo Slider to the bottom instead of below the slider

Currently working on a website and have incorporated Nivo Slider to develop a jQuery slider.

Encountering an issue with the bullets that indicate which slide the user is currently viewing. I'd like these bullets to be displayed on the images within the slider, rather than below them.

I was able to adjust the bullet position using the following CSS code:

.nivo-controlNav {
    text-align:center;
    padding: 15px 0;
    position: absolute;
    left: 50%;
    margin-left: -50px;
    top: 365px;
    z-index:3000 !important;
}
.nivo-controlNav a {
    display:block;
    width:22px;
    height:22px;
    background:url(../images/banner/dots.png) no-repeat;
    text-indent:-9999px;
    border:0;
    margin-right:0px;
    float:left;
}

Below is a screenshot of the desired layout:

However, when I resize the browser window, the bullets shift off the slider as shown here:

I also tried changing top: 365px; to a percentage, but it yielded the same outcome.

Is there a way to ensure the bullets remain on the slider even when the browser window is resized? The slider spans 100% of the width, so it adjusts along with the window size. Ideally, I would like to maintain this responsive behavior.

Any assistance on this matter would be highly valuable.

UPDATE: A test version has been uploaded to www.fearless-music.net/test/

javascriptjqueryhtmlcssnivo-slider

Answer №1

It's highly likely that if the width of an image is changing as the browser is resized, then the height is also changing.

In such a scenario, any code specifying "top: 365px;" may become irrelevant if the height is fluctuating.

In my opinion, it would be wise to adjust the distance from the top of the wrapper using a media query. Something along these lines:

.nivo-controlNav {
    text-align:center;
    padding: 15px 0;
    position: absolute;
    left: 50%;
    margin-left: -50px;
    top: 365px;
    z-index:3000 !important;
}

@media (max-width: 960px) {

.nivo-controlNav {
    text-align:center;
    padding: 15px 0;
    position: absolute;
    left: 50%;
    margin-left: -50px;
    top: 265px;
    z-index:3000 !important;
}

}

@media (max-width: 768px) {

.nivo-controlNav {
    text-align:center;
    padding: 15px 0;
    position: absolute;
    left: 50%;
    margin-left: -50px;
    top: 165px;
    z-index:3000 !important;
}

}

@media (max-width: 400px) {

.nivo-controlNav {
    text-align:center;
    padding: 15px 0;
    position: absolute;
    left: 50%;
    margin-left: -50px;
    top: 65px;
    z-index:3000 !important;
}

}

To determine the correct value for "top" in your CSS, it would be helpful to identify the specific breakpoints you need to address and observe how the image height changes accordingly.

For further insights, check out this resource.

Answer №2

Without seeing the specific code, it's difficult to provide a detailed solution. However, based on your description of needing to work with .nivo-controlNav, the key is to ensure that its container has the CSS property position: relative. This will help keep the bullets contained within that designated area.

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

When making cross-origin requests, characters inside the <style> tags are transformed into Unicode HTML Entities

I am currently working on a NextJS application with react-jss integration. Within my CSS, I have a specific rule targeting '& .working[style="display: block;"] ': {...} Everything works perfectly when accessing the page from the s ...

htmlreactjscross-domainnext.jscss-in-js

Facing issues with Express, http-proxy-middleware, and encountering the error net::ERR_CONNECTION_REFUSED

For some time now, I've been troubleshooting an issue with my Express App that utilizes http-proxy-middleware to forward requests to another backend service. The problem arises when a third-party application makes a request to my server using an IP ad ...

javascriptnode.jsexpressproxyhttp-proxy-middleware

Use jQuery to showcase all the selected items in a list separated by commas

The code snippet below contains a variable called thatparticularsel which retrieves the value of the checkbox that is currently checked. The alltheselectedvalues variable will return values of all the checked checkboxes. For example, if 2 checkboxes were ...

jquery

Preventing Jquery hover event from continuously triggering

Is there a way to make the opacity transition repeat with each hover? I need some assistance with this. $(document).ready(function(){ $(".item1").hover(function(){ $('.mask1').css({"visibility":"visible","opacity":"1"}); }, ...

jqueryhovertransitionopacity

Using VueJs's createElement() to dynamically insert HTML content

I am currently working on a component that converts all icons to SVG format. By the end of my code, I have included the following: return createElement('i', '<SVG>CODE</SVG>' ) In the spot where the SPA ...

javascriptvue.jscreateelement

Can using the jQuery.clone method impact other functions?

Assuming $dom is a jQuery element, can the following line be safely removed if a is not utilized thereafter? var a = $dom.clone(true,true); When using $dom.clone(false,false), it appears that there are no side effects. I believe this method doesn't ...

javascriptjquerygoogle-closure-compiler

The custom HTML menu implementation is causing the jQuery autocomplete to lose its "Select" functionality

Seeking assistance in implementing jQuery autocomplete with a custom drop down menu. I have managed to customize menu items using the data()._renderItem method (which is currently commented out), however, this approach disables the menu "Select" function ...

jqueryhtmlmenuautocomplete

Generate a customizable button in Bootstrap using JavaScript extensions

After some investigation on Bugzilla, I discovered that by setting the options URL in install.rdf to arbitrary JavaScript, it can run smoothly. However, a strange issue arises where the window deactivates, as if an invisible dialog has appeared over it, ma ...

javascriptfirefox-addon

Bootstrap 4 Multinav Navigation with Adjusted Z-index

Using Bootstrap 4, I have created a modified multi-flyout navigation menu. The HTML code for this structure is as follows: <ul class="nav"> <li class="nav-item dropdown IFSUB"><a href="#" class="nav-link">Destinations</a> < ...

htmlsassbootstrap-4z-index

What repercussions come from failing to implement an event handler for 'data' events in post requests?

If you take a look at the response provided by Casey Chu (posted on Nov30'10) in this particular question: How do you extract POST data in Node.js? You'll find that he is handling 'data' events to assemble the request body. The code sn ...

javascriptnode.js

Different methods for defining functions in jQuery

I'm struggling to understand the various ways of declaring functions in jQuery. Sometimes I waste time trying to call a function that doesn't exist in a particular context, and I'm not sure if it's due to different syntaxes or if there ...

jquery

Enhance your Angular material datepicker with additional content such as a close button

I'm currently working on customizing my Angular Material datepicker by adding a button. The goal is to have this button placed in the top right corner and enable it to close the datepicker when clicked. In addition, I also want to include extra conte ...

htmlangulartypescriptdatepickerangular-material

Exploring the capabilities of Typescript arrays by implementing a forEach loop in conjunction with the

I possess an array: set Array ( [0] => Array ( [name0] => J [name1] => L [name2] => C ) [1] => Array ( [data0] => 3,1,3 [data1] => 5,3 ...

javascriptarraysangulartypescript

Looking to create a GitHub example in Fiddle but running into issues with getting the result?

I've been working on an example on Fiddle, but it's not functioning as expected. I want to implement i18next so that the text changes when the user switches languages. After searching for a solution, I came across this GitHub repository: https:// ...

javascriptjqueryi18next

Issue: $injector:unpr Unknown Provider (app.js is appearing to be properly defined)

Struggling with the unknown provider issue, I've searched through other threads and tried their solutions to no avail. My goal is to inject 'MockSvc' service into a controller without encountering any errors. Any advice would be greatly appr ...

javascriptangularjs

Is there a way to tally the checked mat-radio-buttons in Angular?

I am seeking a way to determine the number of radio buttons checked in a form so I can save that number and transfer it to a progress bar. <mat-radio-group name="clientID" [(ngModel)]="model.clientID"> <mat-radio-button *ngFor="let n of CONST ...

javascripthtmlangular

What are the steps to setting up Webpack-simple with Vue Cli 3?

I'm completely new to Vue Cli and the Vue framework in general, so any help is appreciated! From what I understand, in Vue Cli 2, the command was something like this: Vue init webpack-simple xxx However, with the latest major update (3), it has cha ...

javascriptwebpackvue.js

Problem arises with chai-http middleware when employing dynamic imports in chai 5.1.1 version

Currently, I am utilizing npm chai version 5.1.1 which has transitioned to supporting only imports and not requires. My use of dynamic imports has been successful so far. However, I have encountered an issue when incorporating the chai-http middleware with ...

javascriptnode.jsnpmchaichai-http

Rotate the main container element without affecting the content of its children

I'm trying to keep the text centered inside a spinning div by using absolute positioning on the children. I haven't found a solution yet, but I attempted to position it absolutely and disable the transition in the child element. I've include ...

htmlcss

javascript loop that runs on every second element only

After completing an ajax query, the following JavaScript code is executed. All of my images are named "pic". <script type="text/javascript> function done() { var e = document.getElementsByName("pic"); alert(e.length); for (var i = 0; ...

asp.netjavascriptajaxloopsgetelementsbyname