MARCELO Posted February 23, 2018 Share Posted February 23, 2018 HELLO! IN THIS URL https://www.w3schools.com/code/tryit.asp?filename=FOQNYKJAA4MH 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? THANKS. Link to comment Share on other sites More sharing options...
Ingolme Posted February 23, 2018 Share Posted February 23, 2018 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 More sharing options...
MARCELO Posted February 23, 2018 Author Share Posted February 23, 2018 This is the result. https://www.w3schools.com/code/tryit.asp?filename=FOR5OPMTHJUG 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 More sharing options...
Ingolme Posted February 23, 2018 Share Posted February 23, 2018 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 More sharing options...
MARCELO Posted February 25, 2018 Author Share Posted February 25, 2018 (edited) Thanks, Ingolme. But that s not all. In the same link https://www.w3schools.com/code/tryit.asp?filename=FOSJLJBZP7JA 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 February 25, 2018 by MARCELO Link to comment Share on other sites More sharing options...
Ingolme Posted February 25, 2018 Share Posted February 25, 2018 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 More sharing options...
dsonesuk Posted February 25, 2018 Share Posted February 25, 2018 There is no closing head tag or opening body tag, which you should have noticed by the highlighting in red of the closing body tag that there is a problem. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now