title: Xamarin.forms - Login page with Navigation to Master Detail page has a weird layout
body: <p>I have an app that features a login page which starts up when you open the app. Once you are in the main page, it has a master-detail page to display the data. The problem is the weird layout. The navigation page is on top of the master-detail page.  Like this:<a href="https://i.stack.imgur.com/leeZZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/leeZZ.png" alt="enter image description here"></a></p>
  
  <p>here is the code for the login</p>
  
  <pre><code>public partial class LoginPage : ContentPage
             {
                  public LoginPage ()
                  {
                      InitializeComponent ();
                  }
                  async void OnSignUpButtonClicked (object sender, EventArgs e)
                  {
                      await Navigation.PushAsync (new SignUpPage ());
                  }
  
                  async void OnLoginButtonClicked (object sender, EventArgs e)
                  {
                      var user = new User {
                          Username = usernameEntry.Text,
                          Password = passwordEntry.Text
                      };
  
                      var isValid = AreCredentialsCorrect (user);
                      if (isValid) {
                          App.IsUserLoggedIn = true;
                          Navigation.InsertPageBefore (new MainPage (), this);
                          await Navigation.PopToRootAsync ();
                      } else {
                          messageLabel.Text = "Login failed";
                          passwordEntry.Text = string.Empty;
                      }
                  }
  
                  bool AreCredentialsCorrect (User user)
                  {
                      return user.Username == Constants.Username &amp;&amp; user.Password ==    Constants.Password;
                  }
              }
  </code></pre>