I am trying to position a logo just above the nav overlaying a responsive carousel. The trouble is, depending on the window size, the logo doesn't stay anchored to the nav. I don't know how to even approach this problem. Here is the project I am currently working on. Is there even a way to accomplish this?
How to overlay div on top of responsive carousel
1.2k Views Asked by Beverly Lodge At
1
There are 1 best solutions below
Related Questions in CSS
- How to use custom font during html to pdf conversion?
- Storing the preferred font-size in localStorage
- mp4 embedded videos within github pages website not loading
- Is there any way to glow this bulb image like a real light bulb
- What can I do to improve my coding on both html and css
- Uncaught TypeError: google.maps.LatLng is not a constructor at init (script.js:7:13)
- Bootstrap modal not showing at the desired position on a web page when the screen size is smaller
- How to increase quality of mathjax output?
- Hover animation resetting( seemingly reverting back to original CSS and then again to hover)when moving mouse horizontaly accross a part of an element
- Storing selected language in localStorage
- How to clip grid cell and provide scroll as well?
- KeyboardAvoidingView makes a messy the flexbox
- Rotate an object around another object in javascript
- Understanding Scroll Anchoring Behavoir
- how to use only block layout in this css code?
Related Questions in CSS-POSITION
- Dropdown menu in a fixed navbar
- How to keep scroll and height shrink for content of absolutely positioned element?
- SVG export from Adobe Illustrator generates strange code
- Useless horizontal scrollbar in Firefox with absolute positioned div with fixed height
- How to Place a "Copy to Clipboard" Icon Inside of an Input Text Box?
- How to get position of a div dynamically in react?
- CSS cube overlay
- How to absolutely position pin icons to different locations when you zoom in an image using the react-zoom-pan-pinch npm package
- How do I shrink my images according to adjusted screen size?
- Some flexbox outlining problems in my project
- How to center text at the bottom of the page with css?
- Absolute positioned element is getting cut off (hidden) from only top
- Grow a div in priority before its sibling
- How can I have a fixed div at bottom with margin to show information?
- Absolute Element inside Relative Overflows From Container
Related Questions in RESPONSIVE-SLIDES
- A centered swiper slider/owl carousel with variable aspect ratio images
- I have a responsive menu that i want to display his respective sections when each is clicked just plain javascript, no libraries or so
- ResponsiveSlides.js not working in https protocol
- Bootstrap 4, want four item in slider
- Applying Responsive-slides theme to multiple sliders not working
- How to add play button inside responsive slide
- How to add pause and play function on responsive slide
- Slider not responsive and creates extra height into the section below it
- Adding Captions to Bootstrap Responsive Modal Image Gallery
- ResponsiveSlides.js Stretching Image
- wowslider doesn't work properly after hosting the website
- Responsive Slides - overlaps another div when resized
- Image Slideshow widget with AJAX and responsiveSlides.JS not loading (noConflict issue?)
- JavaScript slide stay on the same slide after page refresh
- Is ResponsiveSlides working on Safari 9?
Trending Questions
- UIImageView Frame Doesn't Reflect Constraints
- Is it possible to use adb commands to click on a view by finding its ID?
- How to create a new web character symbol recognizable by html/javascript?
- Why isn't my CSS3 animation smooth in Google Chrome (but very smooth on other browsers)?
- Heap Gives Page Fault
- Connect ffmpeg to Visual Studio 2008
- Both Object- and ValueAnimator jumps when Duration is set above API LvL 24
- How to avoid default initialization of objects in std::vector?
- second argument of the command line arguments in a format other than char** argv or char* argv[]
- How to improve efficiency of algorithm which generates next lexicographic permutation?
- Navigating to the another actvity app getting crash in android
- How to read the particular message format in android and store in sqlite database?
- Resetting inventory status after order is cancelled
- Efficiently compute powers of X in SSE/AVX
- Insert into an external database using ajax and php : POST 500 (Internal Server Error)
Popular Questions
- How do I undo the most recent local commits in Git?
- How can I remove a specific item from an array in JavaScript?
- How do I delete a Git branch locally and remotely?
- Find all files containing a specific text (string) on Linux?
- How do I revert a Git repository to a previous commit?
- How do I create an HTML button that acts like a link?
- How do I check out a remote Git branch?
- How do I force "git pull" to overwrite local files?
- How do I list all files of a directory?
- How to check whether a string contains a substring in JavaScript?
- How do I redirect to another webpage?
- How can I iterate over rows in a Pandas DataFrame?
- How do I convert a String to an int in Java?
- Does Python have a string 'contains' substring method?
- How do I check if a string contains a specific word?
The problem is that your logo (I assume you meant the transparent white round logo) is absolute positioned to the top of the browser, AND you're trying to make its position move with the resizing carousel. Try moving the logo inside the
#slider1_containerand absolute position, bottom:0 (instead of top:0)This will force it to stick to the bottom of the carousel, regardless of the height of the slider, so it will appear to move with it.
Then, you've got the issue of resizing the logo to shrink with the window as well. If you set the logo's width to a percentage, and its height to auto, with a max-width set to whatever the greatest size you want to allow it to become, then that should manage that.