CSS Navigation buttons shifted to the lower left corner

The navigation buttons are positioned on top of the image title section. They both drop down when hovered over. However, when moving to the next image, the navigation buttons appear correctly. But clicking on the previous button causes the entire navigation screen to shift to the bottom right corner!

  nav {
         position: absolute;
  width: 100%
  height: 20px;
  padding-bottom: 2px;
  z-index: 1;
  float: right;
  margin-top: -20px;
  transition: margin-top 200ms ease-in;
  background: black;
  opacity: 0.4;
  right: 1px;

}
.title {
  position: absolute;
  width: 85%;
  height: 20px;
  padding-bottom: 2px;
  margin-top: -25px;
  transition: margin-top 200ms ease-in;
  background: black;
  color: white;
  opacity: 0.6;
}

.title-text {
  float: left;
  padding-left: 5px;
}

.slides:hover .title {
   margin-top: 0px;
}

For a demo, you can check out this link to view a live example.

css

Answer №1

This section has been corrected, however the code itself is a bit inefficient.

Nevertheless, here is an example provided: jsfiddle

Firstly, you forgot to add a ";" in .nav { between height and width. Secondly, avoid using both position: absolute and float as they conflict with each other. Attempt to group similar classes like your buttons.

.btn-prev,
.btn-next{
  color: black;
  background:white;
  border: 2px solid white;
  margin: 0px 5px 0px 0px;
  cursor: pointer;
  padding: 0px 5px 0px 5px;
  display: inline-block;
}

A quick explanation: I have set text-align on the .nav element so that the buttons align to the right side within the .nav, and applied .btn-* for display: inline-block; (by default it's display: block; which would make it behave differently than text).

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

Customizing the underlineFocusStyle of a material-ui TextField component using regular CSS styling

When working with Material-UI components, you have the option to provide a style object for the component itself within the JSX tag. However, in certain cases like the underlineFocusStyle of a TextField component, you need to use a separate style object. ...

cssreactjsmaterial-uiinline-styles

The element is unclickable due to being obstructed by another element

https://i.sstatic.net/pomMS.png My task is to click on a button using this code: browser.find_element_by_id('btnSearch') However, the button is being blocked by a div tag with the following attributes: <div id="actionSearch" class="row pull- ...

pythonhtmlcssseleniumselenium-chromedriver

Submenu animation that "bursts onto the scene"

I'm facing an issue with my menu that has sub-items inside it. To achieve the animation effect I desire, I need to extract the width, height, and first-child's height of the sub-menu. While my animation is working most times, there are instances ...

javascriptjqueryhtmlcssanimation

How can I create a three-column layout in CSS grid where there is one large column on the left and two smaller columns on the right?

https://i.sstatic.net/E1uQP.png Hi there! I'm currently working on replicating the image above using CSS grid and I've almost got it, but I'm facing an issue with the main content section that includes "Your Projects," "Announcements," and ...

htmlcsscss-grid

The content in the flex box item with horizontal scroll is overflowing beyond its boundaries

I am working with a flex box container that contains two child elements: a left side and a right side. I want the right side item to have a horizontal scrollbar in order to fit its content. .container { display: flex; overflow: hidden; height: 300 ...

htmlcssflexbox

The Art of Checkbox Design

Seeking help in replacing the default check mark on a checkbox with an image. Here is the code snippet I am currently using: <html> <head> <style> .bl { background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #175899), c ...

javascripthtmlcss

Strange floating elements wrapping inside Bootstrap 3 column divs

Essentially, I have a series of twitter-bootstrap square divs with classes like col-md-x, col-sm-x stacked together to form an image list. It's functioning smoothly for the most part. However, there are instances (which remain a mystery to me) where t ...

htmlcsstwitter-bootstrap

Centralize and confine the menu division

I have been working on creating a hover menu using CSS and Bootstrap, specifically for flex grid layouts. However, I have run into an issue where my menu is only as wide as its parent div. Furthermore, I am struggling to center the hover menu relative to ...

htmlcss

Opacity filter malfunctioning

It seems that the filter: opacity property is not functioning as expected in IE8. Despite having used it successfully before, I am currently facing issues with its implementation. Strangely enough, Firebug does not display the filter rule at all; only norm ...

cssinternet-explorer-8opacity

What causes the entire page to disappear when the screen is adjusted to mobile width?

I'm facing an issue with my ReactJS screen. Everything works perfectly until I resize the screen to mobile width (sm of Material UI) and then everything turns into a WhiteScreen. I've been trying to debug this but can't seem to find the root ...

cssreactjs

What is the reason for the svg animateTransform only being triggered on the initial item?

When hovering over the first item, the animations for the others would also trigger. However, when hovering over the second item, the other items wouldn't work. How can I ensure that each item's animation triggers one by one? body { displa ...

javascripthtmlcsssvg

How to achieve automatic width with absolute positioning in Bootstrap 4 within a display flex layout

My HTML code includes a div with the display set to flex using Bootstrap 4. I then inserted another div inside it and applied position: absolute along with a transform: rotate property. Here is an example: <div class="container"> <div ...

htmlcsstwitter-bootstrapbootstrap-4

Aligning text vertically in a div using Bootstrap, alongside additional content within the same div

I'm attempting to vertically align some text within a div that also contains an image. When I apply the classes "d-flex align-items-center," the text does move to the center, but it appears slightly shifted towards the top. How can I fix this issue? ...

htmlcsstwitter-bootstrapbootstrap-5

What is the best way to align elements within a row/column layout in Angular Material when working with divs?

To set up two div blocks in a row, I'm utilizing the code below: <div layout="column" layout-gt-xs="row" layout-align="center center" id="row"> <div id="a">a</div> <div id="b">b</div> </div> The CSS for this ...

cssangularjsangular-material

Perfect CSS Menu Hover Effect

I created my own navigation menu, and I'm struggling with one thing... How do I change the A tag color to white when hovering over the ul id "navitemul"? I've tried #lovedating#navitemul:hover #lovedating a {color:white} and other methods, but no ...

csscolorshover

Having difficulty modifying the styling of a paragraph within a div container

I have been working on a function that is supposed to adjust the font-size and text-align properties of a paragraph located within a div tag once a button is pressed. function customizeText() { document.getElementById('centretext').innerHTML = ...

javascriptcssfonts

How can I use Jquery to slide one div over another and replace it in its position?

I am working on creating a unique animation using CSS and jQuery. The animation involves a green box sliding (or growing) over a fixed red box, and then toggling back so that the green box shrinks while the red one reappears. One issue I encountered was u ...

javascriptjquerycsscss-animations

Customizing the appearance of the Bootstrap Typeahead

I've been experimenting with the Bootstrap Typeahead for my search feature. I successfully implemented the dropdown list using Ajax. However, I am looking to customize the width, padding, and background color of the dropdown menu, which is currently w ...

javascriptjqueryhtmlcsstwitter-bootstrap

Achieving priority for style.php over style.css

Having trouble with theme options overriding default CSS settings in style.css. Here's what I have in my header.php: <link rel='stylesheet' type='text/css' media='all' href="<?php bloginfo( 'stylesheet_url&apo ...

phphtmlcsswordpress

What considerations should I keep in mind when changing the DOCTYPE from html 4.01 transitional to 'html'?

Firefox is telling me that my pages are being rendered in 'standards compliance mode' based on the doctype... <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> After changing it to < ...

htmlcss