I am using next.js and tailwind Css building my portfolio.
I already add scroll-behavior : smooth in globals.css file. And in Navbar, I used to navigate to home page, and the rest of them I used id to navigate. However, I can only see the smooth effect when navigating to Home page, others not working. Could you please help me ? Thanks
I want to use scroll smooth effect in my page when navigating.
Your problem comes from what does <Link>in Next.js.
By default, <Link> will go to the top, and then scroll back. You can read that from the Link Documentation, and that is totally expected: when you make the user go to another page, you don't want him to be at a random scroll position, but at the top of that new page. But here, we are staying on the same page, so we need to tell NextJS about that.
There is a way to prevent that behavior, by adding scroll={false} to it, which corrects your problem. But there are others issues as to how NextJS works and how you implemented that smooth behavior too. (From there, your initial problem is fixed tho)
So it'll looks like:
<Link href="#link" scroll={false}>
I'd suggest you to take usage of the _document.js file included in NextJS to manipulate body & html properties.
Here's my take on it according to your example:
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html className="scroll-smooth">
<Head />
<body className="bg-[#ecf0f3] text-[#1f2937] tracking-wide ">
<Main />
<NextScript />
</body>
</Html>
)
}
That way, you can clean down your CSS and have a native solution applied, you can be sure of that, to every page (as _document.js is the "template" of each page rendered in next)
You also should remove the "/" before your #id in the href as it deserves no purpose.
Links that you can read from
_document.js documentation
Tailwind Smooth Scroll
Related
I just want to add a basic banner at the top of my tumblr website. The code (posted below) is just below the <body> part of the html, however I can't figure out why any img link that I put into the 'imgurlhere' section only shows up as a broken icon (see picture).
<a href=“myurlhere”><center><img src=“imgurlhere” width=“500”></center></a>
broken image icon that's showing up
My idea is to upload a short gif to tumblr, and then copy the code into the html so that it is placed at the top of my website as an advertisement. However, every url I put into the 'imgurlhere' section shows up as broken - regardless of advice I've found online stating that's all one needs to do.
I'm making sure to include the correct link, such as .png etc
And making sure to copy it straight from the 'copy image address'.
Any idea?
Thanks!
I think that setting width="500" in img tag was causing this issue.
-The best way would be to add a class and then set the width of the image.
.image{
width:500px;
}
</center>
Try using your image there and let me know if it works or not.Thank You
I'm trying to edit some background on a page. I don't have access to the html file, only .css and .js. The page has a default theme that won't expand the background on the whole screen (bottom) because of the structure. I managed to swap the default background .png with an animated gradient through css but now I need to change the div. Tried with the #import url at the very top of the css file to call an external css but it won't work. Are there any ways to override the html structure? thank you
Forgot to say that I don't have access to the default template's css either. The service keeps everything on the server and once I installed the template in the local folder (the whole thing works with dropbox) I found an additional .css and .js in which I can add other code, though they come basically blank. What I need to do is to override the template's div structure from one of those 2 files. Using DevTools i found the name of the template div class and I guess I can download the relative .css. Still don't know how to override it... I'm not too familiar with coding in general...
Not clear with what you're trying to do. But you can always use Javascript DOM manipulation functions.
Check out this link for that: http://callmenick.com/post/basics-javascript-dom-manipulation.
You can also use jquery which provides better API.
If it is in some class definition or in a stylesheet file then use selector with high Specificity to get your definition on high priority
.oldclass{
width:328px;
height:328px;
background-image:url('http://via.placeholder.com/328x328');
}
/*Your New definition*/
div.oldclass{
background-image:url('http://via.placeholder.com/328x328');
}
<div class="oldclass">
</div>
If it is in inline style, then use !important tag
.oldclass{
width:328px;
height:328px
}
/*Your New definition*/
div.oldclass{
background-image:url('http://via.placeholder.com/328x328') !important;
}
<div class="oldclass" style="background-image:url('https://www.gravatar.com/avatar/fca24c2acab4d63343d4608ce256dcec?s=328&d=identicon&r=PG&f=1');">
</div>
I have this accordion built using only HTML and CSS but whenever one of the tabs on the accordion is clicked the page will jump so that the tab is at the top of the page.
Example:
<div id="tab-1">502-831
I'e looked around online and have tried a few solution such as JavaScript and onlick solutions but either the solution does nothing or causes the tab to stop functioning. I am using Joomla so there isn't much support for JavaScript. Here is the bare bones code for the accordion on jsfiddle, if you watch the scroll bar on the right when you click the accordion tab you will see it jump.
http://jsfiddle.net/1pjudu4j/4/
I added this line code of CSS to your example and it worked as intended.
.accordion div:blur .content {
display: none;
}
Do play around with your CSS with this in mind.
Please do note, you are not using JavaScript at all for this, therefore this has been posted in the wrong section. Please edit it and remove the "javascript" and "jquery" tags.
Since you are using Joomla, replace:
502-831
with:
502-831
I am actually making a small website for my company, but i'm not good into HTML.
I am placing an image in background.
But i want some think special.
When someone is reading the site and go down, the image doesn't move.
But when we hit the end of this image's background, the image's background follow the user to the down.
I know the code for making it fixe, and making it following.
But i don't know how to
IMG go Fixe;
IF (End of IMG) {IMG go Follow;}.
If I understand your question correctly, you want a background of an image that has text over it and scrolls/moves with the page when the user scrolls down. If this is what you are asking, and please correct me if I am wrong, then some CSS will do the trick!
Since you are new to HTML, I will assume that you don't know CSS but you know HTML. So create a new file called 'stylesheet.css' inside of the same folder as your webpage. Between the head tags in your HTML, add the following line of code:
<link rel="stylesheet" type="text/css" href="stylesheet.css">
Now, in your HTML body, put the image inside and give it an id of "background". Do this by writing:
<div id="background">
<code for image>
</div>
Now open your .css file and add the following code:
#background{
opacity: 0.7;
position:fixed;
}
The opacity property makes sure people can see the text in front of it, and the position property anchors it to a position on the browser window.
For future reference, W3Schools.com is a great site for beginner web programmers.
Hope I helped, Justin
Hi I'm using SquareSpace V6, with the Momentum template.
in this template there's an option to have the style of your gallery "full-bleed" or simply centered, but this setting is global and it applies to all the galleries on the website.
I'm trying to create some CSS code that will override the default and allow me to have a "full-bleed" gallery in the home page and the home page only, all the other ones will be left centered.
I've been inspecting the code with Chrome and I thought I had it, but nothing changes once I add my code to that specific page:
#collection-type-gallery { gallery-style:Full Bleed; }
Does anyone has experience with SquareSpace?
not exactly the answer I'm looking for.. but I found a workaround.
I created an empty page and added a background (with a snippet of code) to only that page.
(it only works if you want 1 single fullscreen image)
#collection-51b4ef7de4b0_use_your_own_here_62dc3410aaf3
{
background-image:url(http://static.squarespace.com/static/../background2.jpg);
background-repeat:no-repeat;
background-size:cover;
background-position:center;
}
You can call out the homepage specifically by using:
.homepage { }
or you can use a source code inspector and find the unique id as a class on the element and call out any individual page like so:
.collection-51b4ef7de4b062dc3410aaf3 { }