rhinotago
asked 5 years ago

I’d like to make the home page fill the screen when viewed on all devices (but keep the remaining sections at their current heights) and I’d liek the nav bar to stay at the top of the screen when viewing on a mobile device (like it does when viewing on desktop device).

1 Answers
DominicStaff
answered 5 years ago

Hi,
To resolve this issue, you can add the following code to the style.css file:

@media only screen and (max-device-width: 480px) {
.home {
  padding-bottom: 160px;
}
.navbar-fixed-top {
  position: fixed;
}
}

Hope this helps !

rhinotago
replied 5 years ago

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

dominic Staff
replied 5 years ago

Please send me your site URL for further checking.

rhinotago
replied 5 years ago

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?

rhinotago
replied 5 years ago

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.

dominic Staff
replied 5 years ago

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.

rhinotago
replied 5 years ago

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.

dominic Staff
replied 5 years ago

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

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

Hope this helps !

rhinotago
replied 5 years ago

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.

dominic Staff
replied 5 years ago

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 !

rhinotago
replied 5 years ago

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).

dominic Staff
replied 5 years ago

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 !

rhinotago
replied 5 years ago

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;
}

Powered by DW Question & Answer Pro