Good evening
I found a website template that suits me and I would like to know how to indicate a design title on the index.html page because the image is in the css.
https://codepen.io/aaashpnt-the-sans/pen/azomMGN
Can you help me?
Thank you
1 Like
Hi there. Your question is a bit unclear. All you have on that page is a menu, but you can add any content you like, such as a heading in the “hero” section:
<section class="hero">
<h1>Title</h1>
</section>
1 Like
Thank you.
I arrived like this but I don’t know how to make sure that when the size of the screen changes the title remains fixed.
Can you help me?
https://codepen.io/aaashpnt-the-sans/pen/azomMGN
<section class="hero">
<h1>Mon Titre</h1>
</section>
css
.hero h1 {
position: relative;
top: 200px;
text-align: center;
color: var(--fourth-color);
font-family: var(--secondary-font);
font-size: 3rem;
text-decoration: none;
transition: color 1s;
}
}
Try something like this:
.hero h1 {
text-align: center;
color: var(--third-color);
font-family: var(--primary-font);
font-size: 3rem;
}
1 Like
It works, the problem is that when I click on the hamburger menu the Title is also indicated on this page even though it should not be there.
How to solve this problem?
https://codepen.io/aaashpnt-the-sans/pen/azomMGN
.hero h1 {
position: relative;
top: 200px;
text-align: center;
color: var(--third-color);
font-family: var(--primary-font);
font-size: 3rem;
}
You could add z-index: 1 here:
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 1;
}
That will cause problems later on, though, so it’s not a proper solution. You kind on want z-index only to apply when the menu is open, but the whole layout is a bit too complex for me. These fancy effects always come with a cost.
1 Like
I would also like to anchor each element and stay on the same page: for example I click on “About” and it remains on the same page with text.
I see more or less how to do it I have to make a div I think with the element indicate for example #about and the css that goes with it or am I wrong?
<a href="#about">About <span class="menu__left__inner__item__small">#02</span></a>
AND
<div id="about">Mon point ancrage</div>
My in my index.html page how to do this?
<div class="menu">
<div class="menu__left">
<div class="menu__left__inner">
<div class="menu__left__inner__item">
<a href="#">Home <span class="menu__left__inner__item__small">#01</span></a>
</div>
<div class="menu__left__inner__item">
<a href="#">About <span class="menu__left__inner__item__small">#02</span></a>
</div>
<div class="menu__left__inner__item">
<a href="#">Products <span class="menu__left__inner__item__small">#03</span></a>
</div>
<div class="menu__left__inner__item">
<a href="#">Contact <span class="menu__left__inner__item__small">#04</span></a>
</div>
</div>
</div>
1 Like
That link will take you to an element on the same page with the ID of #about.
<div id="about">Mon point ancrage</div>
That seems to be OK. What problem are you having with it?
You can enable smooth scrolling with the following css rather than a sudden jump.
html,
body {
scroll-behavior: smooth;
}
There’s an old demo here that may be of help.
1 Like
I understood the principle but I can’t implement it in my page.
For example, I would like when we click on “About” the about section appears on the same page.
As I don’t have a lot of content I thought for example when I click on one of the menus it is displayed on the right.
I don’t know if it’s feasible
https://codepen.io/aaashpnt-the-sans/pen/azomMGN
like this I would like to do for each element to have are content on the right
That will be a little weird I think in that you basically have a landing page that does nothing and then you click the menu to get the site and then you use the site all in one overlay? usually you would click say #about and then the menu would close and you would slide down to the about section.
It is possible of course to keep the menu open but usually you would js to script the hiding and showing of the new sections as you have done for the initial view.
There is a limited amount you can do with CSS using :target to hide and show the elements and will work for smallish sections that don’t have more in-page links inside.
I’ve very roughly coded your example to show this working just to get an idea whether this is the way you want to approach this. You’ll have to click “Edit on codepen” to see full size as it won’t work in the editor window here.
It may be better if you just test and see if that’s the way you want to go and see if it is viable for your content (I have added no small screen or small height views as this is just an example to test).
2 Likes
Thank you for your help and advice, that’s really what I wanted to do, it’s great.
In the .js are there things that have been modified ?
I also have a problem with my h1 title I would like to reassemble it because before I did like that
.hero h1 {
position: relative;
top: 200px;
text-align: center;
color: var(--third-color);
font-family: var(--primary-font);
font-size: 3rem;
}
No I didn’t change any JS at all.
All the css changes were listed at the bottom of the css only.
The html was changed as seen.
I don’t know what you want to do with that?
I centred it in the viewport and removed it from blocking the overlay also.
You will (almost) never do that in a responsive site. Position:relative does not move anything physically but only visually. It always occupies its original place in the flow.
If you want it moved by 200px (another bad magic number) then use a margin or a better positioning system. (200px is a magic number because if your screen was only 200px tall then the element is never seen). Think carefully before using extravagant numbers like that unless there simply is no choice. You could instead use a value based on viewport height (vh) where 100vh equals the height of the viewport.
Many thanks for all your explanations and your patience.
If I want to add a type of footer, how can I do it in this type of template ?
Well you can do anything you want within reason but it would really be better to plan as much as possible before you code it. There are a lot of considerations to take into account.
You could simply place a fixed footer at the bottom but you will need to steer content clear of it by padding or other means.
e.g.
It all depends on whether its a small footer as you can get away with some things but if its a massive footer that resizes due to responsiveness then you can’t really use fixed positioning in a limited environment.
2 Likes
Thank you for your help, this is really what I wanted.
If in the footer I want for example to add 2 or 3 links and that it is aligned with the text, I have to make a new DIV?
If they are on the same line you can do something like this:
<footer class="footer">
<p>Quick Links : <a href="#">Link 1</a> | <a href="#">Link 2</a> | <a href="#">Link 3</a>
</footer>
If you wanted the links under the text then they would need to be wrapped in a block element like a div or p.
1 Like
I think adding a h1 tag is pretty basic. However can you tell a bit more what you wanna do?
Please read the thread first before posting then you will see that more information has been provided and the issue resolved.
1 Like
Good evening,
A big thank you to you and your help because without this forum I would not be able to do what I want.
I am also busy following a small training in css which will give me more autonomy but it is true that css is a lot of tinkering and not obvious for me.
1 Like