Jump to content



Recommended Posts




i m trying to 

1- Add a sticky menu to a video background and

2- Have a sticky menu with different style (font, color and size of the item and box) for each item of the navbar, so instead of this:  HOME  NEWS CONTACT -

i was looking for this: HOME         NEWS CONTACT .....(but also considering the font and color which i couldn t change here).

What s wrong with my menu and how can i have the itens this way?




Link to comment
Share on other sites

Move all page content, including the navbar, inside the <div class="content"> element.

Your HTML structure is broken, so that will be the source of some layout problems. You should make sure your page has only one <head> tag and only one <body> tag. Make sure that your <meta> and <style> elements are all in the <head> section, while all of the visible page content itself is in the <body>

Link to comment
Share on other sites

This is the result.


But there s still a  problem...i believe it s in the . content - relative.... i guess the menu should be fixed...but i dont know how to program it to have one part of the content relative and the other fixed

Besides, i guess the menu style is not in the right position too... we can see that the result is totally different from the code ...



Link to comment
Share on other sites

It's not complicated. Keep your CSS the same, just change the HTML structure: https://www.w3schools.com/code/tryit.asp?filename=FOR65BU7Z5IV

The structure is simple: one video element positioned in the background, all the rest of the content styled the same way as you would without a video background, but inside the <div class="content"> wrapper.

Link to comment
Share on other sites

Thanks, Ingolme. But that s not all. In the same link


i want to:

1 - change the style only of the item HELLO  in the navbar, so i m trying to add something like these style="font-family:verdana;font-size:300%;" , but there s no effect.

2 - when hovering in the navbar, i would like only the words to change color, and not all the box. I tried to rewrite this code but i didn t obtain success.

/* Change the link color to #111 (black) on hover */
li a:hover {
    background-color: #111;

And to make things worst, i want only the word HOME to change the color, not all of them. So, how can i specify one item?


Thanks again!

Edited by MARCELO
Link to comment
Share on other sites

All of this is very basic CSS. You should be able to easily find the answers to all your questions in the selector reference and the property reference. If that's a bit too advanced, take a while to read through the CSS tutorial.

You already know how to use the font-size rule, so just apply it to the menu item. If you want to change the text color instead of the background, then change the color property instead of the background-color property. You can select individual elements of the menu using the :nth-child() selector.


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...