Hi everyone. There is something I am trying to understand I've seen few websites all the content  is displayed in a single page,  for example  I go to the navbar and I click in one of the bottoms and  it takes me straight to a section in the body I mean after clicking automatically goes down the page and show the content of that bottom in the navbar, how that trick works?

Lots of ways to do this. Google ‘one page scrolling’ or ‘one page website’.

A lot depends on how you have built your website. You can for example download ready made templates. You can add plugins or extensions or you can handccode.

Let's say I am hand coding I have the html code and I have my css code example:

This is my html code:

<!--Nav-->

<nav class="navbar navbar-expand-lg main-navbar bg-color main-navbar-color"

id="main-navbar">

<div class="container">

<a class="navbar-brand" href="#">Restaurant</a>

<div class="order-lg-last btn-group">

<i class="fas fa-shopping-bag fa-2x"></i>

</div>

<button class="navbar-toggler" type="button" data-toggle="collapse"

data-target="#myNav" aria-controls="nav" aria-expanded="false"

aria-label="Toggle navigation">

<i class="fas fa-bars"></i></button>

<div class="collapse navbar-collapse"id="myNav">

<ul class="navbar-nav ml-auto">

<li class="nav-item">

<a href="#"class="nav-link">Home</a>

</li>

<li class="nav-item">

<a href="#"class="nav-link">Categorias</a>

</li>...

From this example above I want to know what do I have to change or write on my html code or css code so that when I click on categories for example automatically shows me or scrolls down  the information related in the same page this what I need to know, what do I need to add?

 

I want to make it work like few pages I saw before, when you click in one of the buttons on the navbar it takes you to a different section on the same page.

You'll need to add anchor links to the parts of the page you want to go to.

<a href="#a">Jump to section A</a>
<a href="#b">Jump to section B</a>
<a href="#c">Jump to section C</a>

<div id="a"></div>
<div id="b"></div>
<div id="c"></div>

Note how the href attributes link to the container (div's in my example).

 

@BlueDreamer I  think I am getting there, so I posted a html code earlier nav bar that contains a button categorias , then I have this section with important information :

section id="variety" class="variety pt-4">

<div class="container">

<div class="section-title">

<h2 class="text-center font-weight-bold">Categorias</h2>

<p>Seleção dos melhores pratos e ingredientes, para que desfrute

de uma refeição rica e saudável.

</p>

</div>

To add the anchor link I have to change section id= "variety" with id= "main nav-bar" this where I get after seen your example is it correct?

 

 

Edited October 13, 20214 yr by CM21

Ok so your container has an iD of "variety".

What you now need to do as link to that ID,  e.g.

<a href="#variety">Jump to variety</a>

You can use js or php and their libraries for a better SEO.

<script>

$('.id').addclass('hide');     or $('.id').addclass('active'):

</script>

Also many of these sites created by wordpress (most famous cms) witch you can download it freely and use it in xampp or wamp server.

You can freely download it's themes and plugins.

By the way wordpress is open source

https://wordpress.com/

https://www.apachefriends.org/download.html

 

Edited December 14, 20214 yr by Parsa

10 hours ago, Parsa said:

You can use js or php and their libraries for a better SEO.

 

 

have you any evidence to support this whacky claim? 

12 hours ago, Parsa said:

You can use js or php and their libraries for a better SEO.

What a load of rubbish.

And why the link XAMPP?