href anchor element, second page - html

I have a navigation bar whose links go to the anchors on the home page.
I wished on another page that these links also arrive on the home page and towards the anchors.
Here is my code.
Thanking you,
<li role="presentation" class="nav-item active">
Portfolio
</li>
...
<section id="portfolio">

Your question: How can I link to my portfolio on my homepage from another page.
My answer: Link using Go to my portfolio on my homepage on/from the other page
Other discussion:
Why not
<li role="presentation" class="nav-item active">
Portfolio
</li>
I assume you have some kind of scroller. If you do, you need to reuse it with the hash of the page you are on.

Related

The home page translation link is static and is not used to translate all pages

I have a problem I hope to solve it as I display in the navbar languages ​​used in the site and I want whenever you click on the language the page appears with the translation in all pages and not only the main page ,with the translation link changes with each page
http://127.0.0.1:8000/fr/
http://127.0.0.1:8000/fr/our-company
So add on the home page link.
How to fixed the link on the home page so that the translation is displayed for all pages and keep on the same page translated
Navbar home page in all pages
<ul class="navigation__dropdown-wrap--language">
<li>
<a data-culture="ar" data-lang="True" href="/">العربية</a>
</li>
<hr>
<li>
<a data-culture="en" data-lang="True" href="/en/" lang="en">English</a>
</li>
<hr>
<li>
<a data-culture="fr" data-lang="True" href="/fr/" lang="fr">français</a>
</li>
<hr>
</ul>
Try looking into Django's i18n package. It comes with full support for translations, timezones and locales. (Numbers and dateformats).
The package comes with support for internationalized URLs.

freeCodeCamp Product landing page testing error, cannot find error

I am doing the freecodecamp workthroughs and it hit an error in the script that tests the product landing page project I'm working on.
Problem is as follows:
When I click a .nav-link button in the nav element, I am taken to the corresponding section of the landing page.
However, my code as far as I can tell, does exactly that.
What in my code is causing this error?
My code, JS test hamburger hidden in logo in top left
Thanks for the help.
<header>
<div id="header">
<img id="header-img" src="https://i.imgur.com/KIqkWAZ.png" alt="handbooker helper logo"/>
<nav id="nav-bar">
<a class="nav-link" href="#infoLinks">Episodes</a>
<a class="nav-link" href="#how-it-works">How It Works</a>
<a class="nav-link" href="https://critrole.com/">More from Critical Role</a>
</nav>
</div>
</header>
Considering the script assumes all your nav-links correspond to a target on the same page, there's no way you can pass that story.
I tried it by replacing the link
href="https://critrole.com/"
with href="#test" and creating a div with id test, and the story passed after doing so.

Editing a header with css

I managed to code for a header and a navigation bar however I don't know how to set the elements such as:
Contact me. etc...
I want to seperate them apart and give them icons and align the text to the right.
(I'm using bootstrap4) however nothing seems to be working not even in the css.
<div class="navbar navbar-top" id="navbar-toolbar">
<div class"container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">+97433653399</a style="background-color: #ffff;">
<a class="nav-link" href="#">Contact</a>
<a class="nav-link" href="#">Help</a>
</li>
</div>
</ul>
</div>
Navbar
Home (current)
Login
Register
Contat us
I see that you are new to HTML and CSS, w3schools.com would be a great start. I can see that you still have some issues in wrapping your HTML elements (e.g. when to open and close a <div> tag. Before proceeding to CSS, it is advisable that you already learned the basics of HTML because you will be using them when putting an attribute that you want to access in CSS (e.g. id="", class="", name="", type="", etc.)

border under the Home I go into the info then border during the info and not the front

It is such that I have a menu where there is a border in the page you're into, just currently the whole time on the index page, but if I click onto the news as it should be less.
I have tried so many ways but none of them works, think a little that you can do it with something GET?
This means that it must move to find the page you are on, and view page not in the menu so it should not be there.
there are border in Home, how can I do so that, for example, I go into the info then border under the info and not the front, what should I do there?
<div class="pi-header-block pi-pull-right">
<ul class="pi-simple-menu pi-has-hover-border pi-full-height pi-hidden-sm">
<li class="pi-has-dropdown active"><span>Forside</span></li>
<li class="pi-has-dropdown"><span>Info</span></li>
<li class="pi-has-dropdown"><span>Nyhed</span></li>
<li class="pi-has-dropdown"><span>Team</span></li>
<li class="pi-has-dropdown"><span>Kontakt</span></li>
<li class="pi-has-dropdown"><span>Opret bruger</span></li>
</ul>
</div>
Ses image HER
Here you can see how my menu appears when I click on the info.
The answer is as simple as this: see the pi-has-dropdown active part. If you don't want it, just remove it. If you want it in other pages, add it to each page, for example in Info, like this:
<div class="pi-header-block pi-pull-right">
<ul class="pi-simple-menu pi-has-hover-border pi-full-height pi-hidden-sm">
<li class="pi-has-dropdown"><span>Forside</span></li>
<li class="pi-has-dropdown active"><span>Info</span></li>
<li class="pi-has-dropdown"><span>Nyhed</span></li>
<li class="pi-has-dropdown"><span>Team</span></li>
<li class="pi-has-dropdown"><span>Kontakt</span></li>
<li class="pi-has-dropdown"><span>Opret bruger</span></li>
</ul>
</div>
. You usually do this with the help of a CMS or some JS/Jquery coding, but you could totally hard code it on each page if you want. This way, you need to copy this snippet of code on each page, only changing the active class keeping in mind in which page are you. As simple as that

Twitter Bootstrap scrollspy in menu

I had a menu with links into another pages (with same menu) Now I add scrollspy on home page and add sections from home page into menu. Now my menu looks like:
<li class="">Home</li>
<li class="">Foo</li>
<li class="">Boo</li>
<li class="">Moo</li>
But scrollspy doesn't work. When I remove "/home/" from section links scrollspy works but menu works only on home page. Is possible do what I need?
My solution is check on server side whether I am on a home page and If not I am adding /home before section part.
So my code now looks like:
<li class="">Home</li>
<li class="">Foo</li>
<li class="">Boo</li>
<li class="">Moo</li>
Code for server side is in scala (I am using play framework) but in php and whatever else it would be similar.