CODEWITHSUNDEEP
javascriptjqueryhtmlcssnavbar
SafeSailor
SafeSailor

Reputation: 59

Html Navbar menu for mobile

My navbar is not working the way i want, when i resize my browser to a mobile screen-size and click the button to make the links appear, the links appear on the right side of the logo. I've looked on many websites but never found an answer.

My code:

<!DOCTYPE html>
<html>
    <head>
        <title>Timmage</title>
        <meta charset="Utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/styles.css" rel="stylesheet">
    </head>
    <body>

        <div class="navbar navbar-inverse navbar-static-top">
            <div class="container">
                <a href="index.html" class="navbar-brand"><img class="logga" src="images/Timmage.png" alt="logga"></a>
                <button class="navbar-toggle" data-toggle="collapse" data-target = ".navHeaderCollapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <div class="collapse navbar-collapse navHeaderCollapse">
                    <ul class="nav navbar-nav navbar-left">
                        <li class="dropdown">
                            <a href = "#" class="dropdown-toggle" data-toggle = "dropdown">Menu<b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href = "#">Profile</a></li>
                                <li><a href = "#">Uploads</a></li>
                                <li><a href = "#">Setting</a></li>
                                <li><a href = "#">Log out</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Settings</a></li>
                        <li><a href="#">My Profile</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <h1>Welcome to Timmage!</h1>
        <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src = "js/bootstrap.js"></script>

    </body>
</html>

Upvotes: 1

Views: 363

Answers (1)

KieranDotCo
KieranDotCo

Reputation: 467

You need to wrap your logo and the toggle in a div with a class of .navbar-header

See the plnkr - https://plnkr.co/edit/sb7vJ5mMDMpO2VMPmelL?p=preview

<div class="container">
  <div class="navbar-header">
    <a href="index.html" class="navbar-brand">
    <img class="logga" src="images/Timmage.png" alt="logga" />
  </a>
  <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>    
  </div>

  <div class="collapse navbar-collapse navHeaderCollapse">
    <ul class="nav navbar-nav navbar-left">
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu                                                                <b class="caret"></b>
          </a>
        <ul class="dropdown-menu">
          <li>
            <a href="#">Profile</a>
          </li>
          <li>
            <a href="#">Uploads</a>
          </li>
          <li>
            <a href="#">Setting</a>
          </li>
          <li>
            <a href="#">Log out</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">Settings</a>
      </li>
      <li>
        <a href="#">My Profile</a>
      </li>
      <li></li>
    </ul>
  </div>
</div>

Upvotes: 1

Related Questions