Jump to content

Yinnav

Members
 View Profile  See their activity

  • Posts

    3

  • Joined

  • Last visited

Yinnav's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. Yinnav
    That is fantastic, thank you so much!! After fiddling about with where to place the css part and getting a squiggly bracket the wrong way round I've now managed to get it working! 😆 Awesome, thank you again! 😎
  2. Yinnav
    Thank you very much for your reply. I've had a go, as I'm still very much learning so I always try to work things out for myself. I made a good job of making half the nav bar disappear but didn't succeed in getting multi colours! 😆 Would you be able to give me an example of where the class names should go within that code? I should be good to go then. Thanks again! 😊
  3. Yinnav
    This Dropdown Nav Bar code is pasted directly from a W3schools tutorial. It is for a horizontal nav bar with drop down menu. Do you know if it's possible to change the colours behind each individual button title? So at the moment the nav bar is black. Instead of it being all black like that, is it possible to have one colour for the Home button, a different colour for the News button, and different colours again for each individual drop down Link button? <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> body { font-family: Arial, Helvetica, sans-serif; } .navbar { overflow: hidden; background-color: #333; } .navbar a { float: left; font-size: 16px; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } .dropdown { float: left; overflow: hidden; } .dropdown .dropbtn { font-size: 16px; border: none; outline: none; color: white; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; } .navbar a:hover, .dropdown:hover .dropbtn { background-color: red; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: #ddd; } .dropdown:hover .dropdown-content { display: block; } </style> </head> <body> <div class="navbar"> <a href="#home">Home</a> <a href="#news">News</a> <div class="dropdown"> <button class="dropbtn">Dropdown <i class="fa fa-caret-down"></i> </button> <div class="dropdown-content"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </div> </div> </div> <h3>Dropdown Menu inside a Navigation Bar</h3> <p>Hover over the "Dropdown" link to see the dropdown menu.</p> </body> </html>
×
×
  • Create New...