Nice video, really helpful! I've got a question though. Everything worked well, but I'm trying to find out how to display this dropdown on all my pages and how to enlarge the text.
Thanks. You just add under the style > nav the: font-size: 26px; you can under: /*-font-family: var(--main-font);*/ to be easier to identify. You can use instead of 26px the size you want.
@@webdoze I've made progress with my website, thank you it's coming along nicely. However, I'm currently facing an issue with getting the menu to close upon clicking the selection. I appreciate your continued assistance! Additionally, I'd appreciate any insights you might have on resolving an issue where a black bar slides over the top of my banner when scrolling. Thanks in advance for your help with this.
Hi! I have a solution to this. After the nav bar you need to put a #control then select the type to "HEADER MARKER" so that everything before this element will remain visible regardless of which section is visible. example [Nav Bar] #control (Header End)
Thank you for this! Super userful. One question - I can't figure out how to bold my font and add spacing between the letters. I added --mbm-main-font: 'Raleway', heavy; and --mbm-letter-spacing: 2px; but those don't show up. Any suggestions?
Thank you! But i have a question; When I go to change the font (I want it to be Inter) it does not work... I have tried various methods, and even tried copying your example by using 'Abril Fatface' . Nothing seems to work... Any suggestions? Awesome video, thank you again!
Very good video, thank you. I have a problem on the mobile version, as each time I select a page from the menu and navigate to it, the dropdown menu remains deployed. It should retract when I move to another page, do you know how I can fix this? i Also have the problem with the fonts. I can´t change it. Thanks a lot
Hello, I’ve just used this tutorial on my carrd site. I had the same problem with the font and the drop down menu. This is what I did to fix this. I removed [/*-] and [*/] on the line /*-font-family: var(--main-font);*/ (in the /* Navigation Styling */ part). I replaced [//¬] by [/*] and added [*/] to the last query at the bottom, like this : /* Close menu on menu item click */ Hope this will help !
The menu only works on the home page. On secondary pages like 'About', when I go to mobile I can see the hamburger menu but when i click on it nothing happens.
I think it has something to do with the eventListener for the close button. @webdoze can we modify this code to remove the EventListener after it's clicked? document .querySelector(".close-button") .addEventListener("click", function () { document.getElementById("menu-toggle").checked = false; }); document .querySelector(".close-button") .addEventListener("click", function () { document.getElementById("menu-toggle").checked = false; }); // Close menu on menu item click document.querySelectorAll(".menu a").forEach((link) => { link.addEventListener("click", function () { document.getElementById("menu-toggle").checked = false; }); });
I'm am definately not a developer, but I think it has something to do with the eventlisteners. I noticed that these two lines are duplicated: document .querySelector(".close-button") .addEventListener("click", function () { document.getElementById("menu-toggle").checked = false; }); document .querySelector(".close-button") .addEventListener("click", function () { document.getElementById("menu-toggle").checked = false; });
Hi! I have a solution to this. After the nav bar you need to put a #control then select the type to "HEADER MARKER" so that everything before this element will remain visible regardless of which section is visible. example [Nav Bar] #control (Header End)
Hi! I have a solution to this. After the nav bar you need to put a #control then select the type to "HEADER MARKER" so that everything before this element will remain visible regardless of which section is visible. example [Nav Bar] #control (Header End)
Hi! I have a solution to this. After the nav bar you need to put a #control then select the type to "HEADER MARKER" so that everything before this element will remain visible regardless of which section is visible. example [Nav Bar] #control (Header End)
Hello, great tutorial, I used the code from your website and got it working perfectly. I have a small question though, I want to use a custom font for the menu, do you know how can I do this? I managed to use custom using method 2 of this video: ruclips.net/video/sctl4iZEIqo/видео.html thanks! (i basically have an invisible embed calling out the font hosted in a cloud platform) (i tried to replace arial with my font family:custom font but it didnt work)
Thanks. You should uncomment the font thing in css in 2 places. You have the details here also ruclips.net/video/oz6TxBO5WQo/видео.htmlsi=W1_hvn9V6OCBdNP2
Nice video, really helpful! I've got a question though. Everything worked well, but I'm trying to find out how to display this dropdown on all my pages and how to enlarge the text.
Hi! I have a solution to this. After the nav bar you need to put a #control then select the type to "HEADER MARKER" so that everything before this element will remain visible regardless of which section is visible. example [Nav Bar] #control (Header End)
![⚡[TUTO COMPLET] COMMENT UN CRÉER UN SITE AVEC CARRD⚡](http://i.ytimg.com/vi/RRSnnJl7IUY/mqdefault.jpg)
So helpful! Thank God I've found your channel!! 🙏🙏
Thanks!
Grest content.Thanks a lot!
Thanks!
Nice video, really helpful! I've got a question though. Everything worked well, but I'm trying to find out how to display this dropdown on all my pages and how to enlarge the text.
Thanks. You just add under the style > nav the:
font-size: 26px; you can under: /*-font-family: var(--main-font);*/ to be easier to identify. You can use instead of 26px the size you want.
@@webdoze I've made progress with my website, thank you it's coming along nicely. However, I'm currently facing an issue with getting the menu to close upon clicking the selection. I appreciate your continued assistance! Additionally, I'd appreciate any insights you might have on resolving an issue where a black bar slides over the top of my banner when scrolling. Thanks in advance for your help with this.
Hi! I have a solution to this.
After the nav bar you need to put a #control then select the type to "HEADER MARKER" so that everything before this element will remain visible regardless of which section is visible.
example
[Nav Bar]
#control (Header End)
Thank you for this! Super userful. One question - I can't figure out how to bold my font and add spacing between the letters. I added --mbm-main-font: 'Raleway', heavy; and --mbm-letter-spacing: 2px; but those don't show up. Any suggestions?
Thank you! But i have a question; When I go to change the font (I want it to be Inter) it does not work... I have tried various methods, and even tried copying your example by using 'Abril Fatface' . Nothing seems to work... Any suggestions? Awesome video, thank you again!
So helpful man! Do more videos on Carrd!
This is helpful! Thank you!
Thanks!
Very good video, thank you. I have a problem on the mobile version, as each time I select a page from the menu and navigate to it, the dropdown menu remains deployed. It should retract when I move to another page, do you know how I can fix this? i Also have the problem with the fonts. I can´t change it. Thanks a lot
Thanks. Not sure what is happening you need to debug it with the browser tools to see if you find out more. May e something is blocking it.
Hello,
I’ve just used this tutorial on my carrd site. I had the same problem with the font and the drop down menu.
This is what I did to fix this.
I removed [/*-] and [*/] on the line /*-font-family: var(--main-font);*/ (in the /* Navigation Styling */ part).
I replaced [//¬] by [/*] and added [*/] to the last query at the bottom, like this :
/* Close menu on menu item click */
Hope this will help !
The menu only works on the home page. On secondary pages like 'About', when I go to mobile I can see the hamburger menu but when i click on it nothing happens.
I think it has something to do with the eventListener for the close button. @webdoze can we modify this code to remove the EventListener after it's clicked?
document
.querySelector(".close-button")
.addEventListener("click", function () {
document.getElementById("menu-toggle").checked = false;
});
document
.querySelector(".close-button")
.addEventListener("click", function () {
document.getElementById("menu-toggle").checked = false;
});
// Close menu on menu item click
document.querySelectorAll(".menu a").forEach((link) => {
link.addEventListener("click", function () {
document.getElementById("menu-toggle").checked = false;
});
});
I'm am definately not a developer, but I think it has something to do with the eventlisteners. I noticed that these two lines are duplicated:
document
.querySelector(".close-button")
.addEventListener("click", function () {
document.getElementById("menu-toggle").checked = false;
});
document
.querySelector(".close-button")
.addEventListener("click", function () {
document.getElementById("menu-toggle").checked = false;
});
@ thanks I’ll try that!
Hi! I have a solution to this.
After the nav bar you need to put a #control then select the type to "HEADER MARKER" so that everything before this element will remain visible regardless of which section is visible.
example
[Nav Bar]
#control (Header End)
Hi! I have a solution to this.
After the nav bar you need to put a #control then select the type to "HEADER MARKER" so that everything before this element will remain visible regardless of which section is visible.
example
[Nav Bar]
#control (Header End)
quick question how can i thicken the text on the navbar
THANK YOU
Thanks!
I'm thankful to you
Thanks!
This is cool! For some reason the dropdown menu gets hidden behind my other containers below it on the page. Do you know how to avoid this?
Hi! I have a solution to this.
After the nav bar you need to put a #control then select the type to "HEADER MARKER" so that everything before this element will remain visible regardless of which section is visible.
example
[Nav Bar]
#control (Header End)
Legend!
Thanks!
pro!
Thanks. Hope it was for me 😀
How to add links? :/
The ul and li section has the links. You can also ask chatgpt to inser them for you if you are a beginner.
Hello, great tutorial, I used the code from your website and got it working perfectly. I have a small question though, I want to use a custom font for the menu, do you know how can I do this? I managed to use custom using method 2 of this video: ruclips.net/video/sctl4iZEIqo/видео.html thanks! (i basically have an invisible embed calling out the font hosted in a cloud platform) (i tried to replace arial with my font family:custom font but it didnt work)
Thanks. You should uncomment the font thing in css in 2 places. You have the details here also ruclips.net/video/oz6TxBO5WQo/видео.htmlsi=W1_hvn9V6OCBdNP2
helpful video thank you so much!!
Nice video, really helpful! I've got a question though. Everything worked well, but I'm trying to find out how to display this dropdown on all my pages and how to enlarge the text.
same thought ..
Hi! I have a solution to this.
After the nav bar you need to put a #control then select the type to "HEADER MARKER" so that everything before this element will remain visible regardless of which section is visible.
example
[Nav Bar]
#control (Header End)