CODEWITHSUNDEEP
javascriptnavbarmaterialize
MariaKhan
MariaKhan

Reputation: 91

Materialize Navbar issue

I am currently a student learning to code. I started using materialized and am having issues with mobile responsiveness. The navbar text comes out of the bar which I find strange. Below I have attached a photo of the issue and my HTM, CSS code. I have never posted a question here so forgive me if I have not posted the code here properly. Thanks! HTML:

`<nav class="nav-extended">
        <div class="nav-wrapper cyan darken-1">
            <a href ="index.html" class="brand-logo center ">Animal Quiz Games</a>
            <a href="#" class="sidenav-trigger" data-target="mobile-links">
              <i class="material-icon">menu</i>
            </a>
            <ul id="nav-mobile" class="left hide-on-med-and-down">
                <li><a href="score-board.html">Score Board</a></li>
                <li><a href="index.html">Quiz</a></li>
            </ul>
        </div>
  </nav>

  <ul class="sidenav" id="mobile-links">
      <li><a href="/score-board.html">Score Board</a></li>
      <li><a href="index.html">Quiz</a></li>
  </ul>`

CSS:
* #box {
    border-style: double;
    border-color: #00acc1;
    border-width: 10px;
    padding: 50px;
    text-align: center;
    background-color: white;
    font-weight: bold;
    color: #1565c0;
}

html {
    font-family: 'Times New Roman', Times, serif;
}

body {
    background: no-repeat center fixed
        url(https://images.pexels.com/photos/145939/pexels-photo-145939.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);

    background-size: cover;
    height: 100vh;
}
.row .col {
    float: none;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
}

.timeStyle {
    color: #1565c0;
    border: double;
    border-color: #00acc1;
    background: white;
    margin-bottom: 20px;
    width: 300px;
    height: 150px;
    text-align: center;
}
p {
    font-size: 25px;
}
nav ul a {
    font-size: 22px;
}
#choice1,
#choice2,
#choice3,
#choice4 {
    display: block;
    background-color: #00acc1;
}
@media (max-width: 483px) {
    .col {
        width: 50%;
        margin: 0 auto;
    }
}
.sidenav li > a {
    font-size: 22px;
    background-color: #00acc1;
    color: white;
}

h4 {
    text-align: center;
}

Project image of error

Upvotes: 2

Views: 587

Answers (2)

Sean Doherty
Sean Doherty

Reputation: 2378

nav .brand-logo {
    font-size: 1.3rem;
}

The above will fix it for iPhone5 and above.

Your problem is the length of your title .brand-logo - it is too long at the default Materialize nav font size, which is 2.1rem, so it wraps onto a new line. So you need to reduce the font size of your logo for mobile devices.

You will also need a media query to increase the font size once you have enough screen width:

@media (min-width: 600px) {
  nav .brand-logo {
    font-size: 2.1rem;
  }
}

Codepen here.

Upvotes: 1

Ilia
Ilia

Reputation: 110

If I understood the issue correctly. The width of the title is forcing text down to the next line. I suggest right clicking the title, inspecting element and hovering over the html that is responsible for the element. This should help visualize your problem. To actually fix the problem you could play with the width of the title.

Upvotes: 1

Related Questions