Bootstrap navbar stylen

Een standaard Bootstrap navigation bar ziet er niet bijzonder smakelijk uit. Het is echter wel zeer handig en functioneel. Het is responsive, voorziet in dropdown menu’s, er kan een logo in en een zoekveld. Echter, dit is allemaal aan te passen. Wanneer je deze opdracht maakt, is het verstandig om middels comments aan te geven wat je doet. Dan kun je het een volgende keer sneller doen!

Het standaard Bootstrap menu.

Het standaard Bootstrap menu voorziet in alles maar is wat saai.

 

Opdracht

Pas het Bootstrap menu aan

Het volgende moet gebeuren:

  1. Kleuren en het font aanpassen. Kies kleuren en een font wat je zelf mooi vindt.

    Navbar met aangepaste kleuren.

    Navbar met aangepaste kleuren en aangepast font.

  2. Tekst uitlijning rechts.
  3. Een logo invoegen; dit logo wijzigt van formaat wanneer het scherm kleiner wordt (dan wordt de navbalk ook minder hoog). Maak zelf een logo of kies iets wat je al hebt.

    Logo is kleiner bij een smal scherm.

    Logo is kleiner bij een smal scherm.

  4. Het menu moet strak tegen de bovenkant van het scherm aanzitten (normaliter is er een kleine ronding te zien rondom de navbar).

 

Tips

• Kijk de tutorial https://www.youtube.com/watch?v=qpWlaOeGZ_4 voor een goede start.
• Of maak de tutorials via http://www.w3schools.com/bootstrap/bootstrap_case_navigation.asp
• Gebruik een # als linkje voor de linkjes. Je hebt immers nog geen pagina’s.
• Wanneer je in het Engels zoekt, heb je meer kans op resultaat. Er zijn nu eenmaal meer Engelstalige tutorials dan Nederlandstalige.