At the end of this Tutorial you will be able to:
You can view a finished version of the Bootstrap menu and footer web page you will work in this Tutorial by clicking the image or text link below. The finished web page will open in a new tab of your web browser.
bootstrap-menu-footer.html
On desktop/laptop screens, the main navigation menu is commonly a horizontal bar that stretches left-to-right across the top of the screen. It is referred to as a menubar or navbar. Typically:
In terms of visual appearance, navigation menus can be regarded as of three main types:
The Bootstrap CSS and JavaScript files include features that make it easy to create and modify website menus.
One such feature is that Bootstrap automatically converts desktop/laptop menus to drop-down mobile menus automatically, depending on the width of the user's screen.
In this exercise, you will work with the following web page and stylesheet:
You can close the browser tab containing the bootstrap-menu-footer.html web page.
Your websites/bootstrap sub-folder shown now look as shown below.
You can close the browser tab containing the bootstrap-menu-footer.css stylesheet.
Your websites/bootstrap/assets/css sub-folder shown now look as shown below.
You have now saved the web page and stylesheet you need for this Tutorial.
A menu will typically include a logo image. Right-click on the placeholder logo below, choose Save Image As from the context menu, and download it to your C:/websites/bootstrap/assets/img sub-folder.
When you use this sample menu web page in a website, you will replace this image with the actual logo image of the website.
In your web browser, display the bootstrap-menu-footer.html web page.
In VS Code, open the bootstrap-menu-footer.html file and the bootstrap-menu-footer.css stylesheet.
Let's review some elements of the Bootstrap menu system.
In the navbar block at the top of the bootstrap-menu-footer.html web page, you can see two classes navbar-dark and bg-dark. These, working together, control the background colour of the navbar.
If you prefer a navbar with a light background, replace these classes with navbar-light and bg-light as shown below.
When you change the navbar background from dark to light, the colour of the hyperlinks in the navbar also changes accordingly. In this way, the text of the menu links is always visible against the navbar background.
You can edit the dark or light background colour of the navbar in the bootstrap-menu-footer.css stylesheet.
To apply a transparent background to a navbar, replace the two dark or light coloured background classes with a single class named navbar-transparent.
The first item within the navbar is the logo of the website. Your sample web page includes an image named website-logo.png. This sample logo is 200 pixels high and 40 pixels wide.
This logo image is one image you do not want the web browser to resize according to the width of the user's screen. For this reason, the logo's dimensions are set in the web page where they cannot be overwritten by a setting in a stylesheet.
The so-called hamburger icon that is displayed at the right of the Bootstrap menu on mobile screens is provided by the Font Awesome icon set. For this reason, a web page that includes a Bootstrap menu must include a link to Font Awesome stylesheet in the head of the web page.
Each of the text hyperlinks in the navbar is created as an item in a HTML bulleted list. You can edit the text displayed (Link 1, Link 2, ...) and also the link destination.
To add a new menu option, just add a further HTML list item. Conversely, to remove a menu option, just delete the bulleted item.
The final menu option is typically styled as a button with an icon.
A so-called sticky menu is one that remains fixed at the top of the desktop/laptop or mobile screen, even as the user scrolls down through the web page. This makes it easier for the user to navigate to other pages on the website.
Let's make the menu on your sample web page sticky:
The bootstrap-menu-footer.html file contains a sample web page footer that is styled by the bootstrap-menu-footer.css file.
You could create the footer block in the web page with a pair of opening and closing <div> ... </div> tags. However, the more modern HTML5 way is to use the <footer> ... </footer> tags.
You can change the background colour of your footer so that it matches the rest of your web page.
In the footer section are various contact details and social media hyperlinks you will need to update.
Change the name 'Mary Smith' and the various contact details to your own. You can add or remove different social media contact points, such as Twitter, Facebook, YouTube or Instagram, as required.
When finished, save your bootstrap-menu-footer.html file and the bootstrap-menu-footer.css stylesheet.
Follow these steps below to upload your entire Bootstrap folder to your website on GitHub.
Your uploaded web page is published on GitHub at a web address similar to the following, where username is the username you have chosen for your GitHub account:
https://username.github.io/bootstrap/bootstrap-menu-footer.html
It may take a few minutes for your uploaded files to appear on GitHub.
