Choice of language in the navigation bar

HTML & CSS
1

Good morning,

I would like to make it possible in the navigation bar to choose the language, for example French or English.

Can you help me?

html

<header>
        <a href="#">
            <h1>Christophe Portfolio</h1>
        </a>
        <nav>
            <ul>
                <a href="#home">
                    <li>Home</li>
                </a>
                <a href="#about">
                    <li>About</li>
                </a>
                <a href="#projects">
                    <li>Projets</li>
                </a>
                <a href="#contact">
                    <li>Contact</li>
                </a>
            </ul>
        </nav>
    </header>

css

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,500;1,100;1,500&display=swap');

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    --prime-color: #6ab5d0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Roboto', sans-serif;
    max-width: 1600px;
    margin: 0 auto;
    background-color: #e5e9e9;
}

nav li {
    list-style: none;
    margin-right: 40px;
    font-size: 18px;
}

h1 {
    margin-left: 40px;
}

header a {
    text-decoration: none;
    color: #383838;
}

header a:hover {
    color: var(--prime-color);
}

header {
    display: flex;
    justify-content: space-between;
    max-width: 1600px;
    padding: 20px;
    align-items: center;
    position: fixed;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.75);
}

nav ul {
    display: flex;
}
2

You’re not going to be able to do this in straight html/css. You’ll probably want to do it using js.

But I just want to point out that the list is not valid html. The a element needs to be inside the li elements. I’d move the link inside the h1 element, but technically that’s valid

<header>
        <h1><a href="#">Christophe Portfolio</a></h1>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#projects">Projets</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
</header>
1 Like
3

thank you for the information.

I only have an index.html page with content that I would simply like to be able to translate into French and English via two flags in the navigation bar.

I looked on the web it shows examples with json.

How can I do it as simply as possible in my case which is only a simple portfolio?

4

Realistically for just one page like that, it would probably be easier for you to just make a duplicate second page in the other language. You could have index-en.html and index-fr.html, and then in the nav bar you could link the two pages to each other via a picture of the flag or something.

No technology to worry about, just translate the text.

** actually you probably want one of the files to be still named index.html so that folks end up on some file if they don’t know to add -en or -fr to the link.

1 Like
5

I can’t make a drop-down menu to get the choice of languages.

Can you help me?

I get this result

Sans titre
Sans titre1489Ă—100 16.7 KB

 <header>
        <a href="#">
            <h1>Christophe Portfolio</h1>
        </a>
        <nav>
            <ul>
                <a href="#home">
                    <li>Home</li>
                </a>
                <a href="#about">
                    <li>About</li>
                </a>
                <a href="#projects">
                    <li>Projets</li>
                </a>
                <a href="#contact">
                    <li>Contact</li>
                </a>

                <a href="#">Languages</a>
                <ul class="dropdown">
                    <li><a href="#">Anglais</a></li>
                    <li><a href="#">Français</a></li>
                </ul>
            </ul>

        </nav>
    </header>

my css

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,500;1,100;1,500&display=swap');

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    --prime-color: #6ab5d0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Roboto', sans-serif;
    max-width: 1600px;
    margin: 0 auto;
    background-color: #e5e9e9;
}

nav li {
    list-style: none;
    margin-right: 40px;
    font-size: 18px;
}

h1 {
    margin-left: 40px;
}

header a {
    text-decoration: none;
    color: #383838;
}

header a:hover {
    color: var(--prime-color);
}

header {
    display: flex;
    justify-content: space-between;
    max-width: 1600px;
    padding: 20px;
    align-items: center;
    position: fixed;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.75);
}

nav ul {
    display: flex;
}
6

You didn’t fix the list as @DaveMaxwell already mentioned as the structure is broken and unworkable like that.

If you use the correct list structure you can use nested uls for the dropdown like this:

Of course touch devices will have a few problems with that as they don’t really have a hover effect. You will need to restyle the menu and behaviour for small screens as required.

A more accessible method would be to swap the hover effect for some JS and make a click dropdown instead of a hover dropdown.

1 Like
7

Thanks for your help it’s much better with the hover effect.

8

Something like this perhaps.

1 Like
9

I have the problem that the menu is horizontal

Sans titre
Sans titre1528Ă—110 19.1 KB

10

My codepen doesn’t show that behaviour.

You probably missed the child selector from the main menu styling and thus targeted the nested list as well with the flex behaviour.

1 Like
11

here is my source

https://codepen.io/aaashpnt-the-sans/pen/LYKMdmm

1 Like
12

As I guessed :slight_smile:
This:

nav ul {
    display: flex;
}

Should be this:

nav > ul {
    display: flex;
}
1 Like
13

indeed thank you

1 Like
17

Hello, in my opinion, you have to add a attribut in your navigation links

If content is offered in a language other than the main language, then it must be indicated with the lang attribute.

For example, in this case for English langage :

  • Home(English version)

    • can you note the “lang” and the “hreflang” attribut ?

    Best regards