I am trying to create a web page with snap scroll and a fixed navbar that remains at the top. However, I'm facing an issue where the navbar is overlapping the right scroll bar, which should not be happening. If I remove the overflow-y property from the main section, the issue is resolved but then the snap scroll stops working. How can I fix this problem?
You can view the code on Tailwind Play here: https://play.tailwindcss.com/zOVGwmnNzE
One solution could be to remove the CSS property position: fixed from the <nav> element. By doing this, the <nav> element will be part of the page layout flow and won't cover the scrollbar of the <main>.
However, removing the fixed position of the <nav> may cause the bottom of the <main> to overflow the screen due to the height of the <nav>. To maintain the previous behavior, you can implement a vertical flex layout on the <body> element so that the <main> dynamically adjusts its size based on the remaining space available.
<html lang="en">
<script src="https://cdn.tailwindcss.com/3.4.0"></script>
<body class="flex flex-col h-screen">
<nav
class="flex flex-no-wrap items-center justify-between px-10 py-2 bg-slate-500"
>
<div>
<p>logo</p>
</div>
<div class="flex flex-row gap-10">
<ul class="flex flex-row items-center gap-5">
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/about">About</a>
</li>
<li>
<a href="/about">Profile</a>
</li>
</ul>
<div
class="w-10 h-10 rounded-full flex items-center justify-center overflow-hidden"
>
<img
src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="profile"
width="40"
height="40"
/>
</div>
</div>
</nav>
<main class="snap-y snap-mandatory overflow-y-scroll grow">
<div class="flex flex-1 h-full w-full bg-black snap-start">
<p>page 1</p>
</div>
<div class="flex flex-1 h-full w-full bg-slate-500 snap-start">
<p>page 2</p>
</div>
<div class="flex flex-1 h-full w-full bg-amber-300 snap-start">
<p>page 3</p>
</div>
</main>
</body>
</html>Similar Question: JavaScript data formatting/pretty printer var theobject_string = '{...}'; // I have a JSON object as a string. Is there a way to present this string in a visually appealing manner on an HTML webpage? I would like the ...
I am in need of assistance with a question I have. On a page, an AJAX function is executed after the page finishes loading, creating a table in PHP that contains two buttons: one for changing passwords and the other for deleting. This table is then injecte ...
I am currently attempting to showcase data in a table where each row features an info icon that is only visible upon hovering. Additionally, I want a pop-up to appear when the info icon is clicked (there is an onclick function assigned to this button). He ...
Below is the table content: <table> <tr> <td>"James"</td> <td>"do"</td> <td>"you</td> <td>"like</td> <td>"your life"</td> </tr> </table> <butt ...
I'm currently facing an issue with aligning two side-by-side divs to the same height when the content is generated using an ng-repeat function. Using flexbox is causing responsiveness issues, and I'm unsure of the appropriate time to call a jQuer ...
Within my controller, I have a function $scope.remove() that triggers a request to the usercart, which then calls an API. The JSON response from the API includes an object with an array of cart items. Despite using an ng-repeat in the HTML to iterate thro ...
UPDATE: I have discovered that the issue lies with Internet Explorer which alters the class attribute of an HTML element from: "<img class="blah".." to "<img class=blah..". This inconsistency only occurs in IE for me. It does not affect other attr ...
I have a unique URL that generates canvas images with specific parameters. It functions properly when loaded in a browser. The final line of code is: window.location = canvas.toDataURL("image/png"); However, when attempting to use this URL from another ...
Let's consider a scenario where there is a web page containing a form: <form> <label for="FirstName">First:</label> <input name="FirstName" type="text"> <label for="MiddleName">Middle:</label> <input n ...
I have successfully created a next.js app that allows users to customize their own profile page. Currently, each user is assigned a unique sub-domain such as jake.app-name.com and ben.app-name.com. My goal is to enable users to connect their own domains ...
I am facing a challenge with manipulating a string of characters by adding span tags to highlight specific words and change their color. While I have successfully implemented the changes for one pattern using regex, I'm struggling to do the same for a ...
I'm fairly new to HTML/CSS and haven't delved into javascript yet, but I have a good understanding of reading other people's code. Currently, I'm putting together my portfolio website and would like to include my resume on the page in a ...
I'm currently working with an SVG element and trying to incorporate a <text> element with a gradient. Interestingly, the same LinearGradient successfully applies to one SVG but not to another. My question is whether a gradient can be applied to ...
Getting started with vue.js, I have a task where I need to loop through user data and display it in bootstrap cols. The number of cols grows based on the number of registered users. Each col contains user data along with a select element. These select ele ...
I'm seeking a solution to enable scrolling within a div container that can scroll both horizontally and vertically. body { height: 100%; width: 100%; overflow: hidden; } .wrapper { width: 75%; padding: 0px 5px 0px 8px; top: 20px; whit ...
I'm currently working on a sailing website, and I've run into an issue with the left and right controls and indicators in the testimonials section. They don't seem to be responding properly. Could this be due to me not including or calling t ...
<style type="text/css"> .square { width:251px; height:207px; border: 1px solid #d6d6d6; -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,.1); -moz-box-shadow: 1px 1px 3px rgba(0,0,0,.1); box-shadow: 1px 1px 3px rgba(0,0,0,.1); ...
I'm struggling to incorporate font-awesome icons in my Rails view. I had a static standalone HTML code snippet that I added into the Rails view: <span class="icon-white"> <a href="https://twitter.com/xyz"> <i class="icon icon-tw ...
I'm working on a website that includes a select list with images. Here's what I have so far: When I choose an image from the list, it should display below. <?php // Establish database connection $con=mysqli_connect("******","***","*** ...
For the telephone number on my mobile site, I employed the <a href="tel:+1800229933">Call us free!</a> code. However, it seems to be malfunctioning on several devices. Any insight on this issue would be greatly appreciated. Thank you. ...