Bootstrap Components

navbar, footer

How to open a navbar dropdown on hover

A standard behaviour of Bootstrap dropdowns is that they open on click. It has its pros and cons and I usually keep it as default. If you would like to open dropdowns on hover, it is not a complicated process to achieve it.

We will need to change two things and we will apply our changes only if the viewport's wider than 768px (i.e. navbar is not collapsed).

First, add this CSS rule to your stylesheet after loading the Bootstrap's CSS. It is quite straightforward - if the viewport's wider than 768px and you hover above a .dropdown link, a .dropdown-menu opens.

Second, if the parent link should point to an URL too, we will need  to add a bit of JS code to change the .dropdown links' onclick behaviour. 

How to change navbar height

When you want to change the navbar height, you will need to adjust more things than simply adding a new height value for .navbar. 

In the following code, I outline an approach how to change your navbar's height to 80px. 

How to create sticky footer

Create a sticky footer for your website following these steps:

1. Create a footer element and set its position to absolute with bottom offset 0. 2. Set a fixed height for it. (In my example, it will be 80px).

3. Add bottom padding to your element, set it to the same value as the footer's height.