How can I make the home page the full height of the screen (regardless of device) and how can I make the nav bar stick to the top of the screen when viewing on mobile device?

Thanks Dominic. This fixed the nav bar to the top but it hasn’t made the home page full screen.

Please send me your site URL for further checking.

http://www.onezero.co.nz/cablecourt/#home

Also regarding the nav bar, if I want to go to the Contact section, for example, I tap the drop down menu icon and tap contact, but the drop down menu stays as it is. Can it be set so the drop down menu disappears once the menu item is selected?

Hi Dominic, it would be greatly appreciated if you were able to look into the full height and drop down queries as listed above. Thanks.

About the home page full screen, you can send me a screenshot for further checking. Also, our theme does not support to make the contact page in the drop down menu as you want.

You can see the home page at http://www.onezero.co.nz/cablecourt/#home (I can’t attach an image).

Maybe I didn’t explain the nav bar drop down issue. All I’m wanting is the dropped down part of the menu to go away when one of the menu options is selected (but still have the nav bar at the top of the screen). At the moment when a menu is dropped down and a menu option is selected, the dropped down portion of the menu remains visible, obscuring a large portion of the screen.

You can add the following code to the style.css file:

.navbar-fixed-top {
   position: absolute;
}
.section.portfolio {
  margin-top: 50px;
}

Hope this helps !

Hi Dominic. This doesn’t work. It removes the nav bar completely when not at the home page, but I’m wanting the nav bar to permanently stay at the top of the page. What I’m wanting to disappear is the drop down menu (when viewed on a phone) once a menu option has been tapped. At the moment if a section is tapped from the drop down menu it goes to that section but the drop down menu remains visible.

You can remove the following code:

 .navbar-fixed-top {  position: absolute; }
.section.portfolio {  margin-top: 50px;}

Then find the following code in the style.css file
.navbar-fixed-top { position: fixed;}
And replace with the new code: .navbar-fixed-top { position: fixed !important;}
If you still face there issue, you can send me username & password of your site for further checking.
Hope this helps !

The nav bar is staying at the top of the page, which is great, but the drop down menu still stays visible after a menu item is selected. If you visit http://www.onezero.co.nz/cablecourt on a phone, tap on the menu icon then tap on one of the options you will see that it takes you to the desired section but it still displays all options from the drop down menu. The drop down menu can be removed by tapping on the menu icon again, but I would like the drop down options to disappear by default once an option is selected (while still keeping the nav bar visible across the top of the screen).

To resolve this issue, you can open the header.php file then find the following line code (line 17) and replace it with new code:
<button data-target=".nav-collapse" data-toggle="collapse" class=" navbar-toggle btn btn-navbar" type="button">

After replacing code, you can add the following code to the wp-content\themes\dw-page-modern\inc\assets\js\script.js file:

  $(".nav li a").click(function (event) {
    // check if window is small enough so dropdown is created
    var toggle = $(".navbar-toggle").is(":visible");
    if (toggle) {
      $(".nav-collapse").collapse('hide');
    }
  });

Hope this helps !

Perfect! Thanks very much. Regarding making the home page the full height of the screen, is it ok to use the following in style.css:
.home {
height: 100vh;
}