How to make navigation centered, spreaded and and scales with screen size

Question

How to make navigation centered, spreaded and and scales with screen size

57 Views Asked by shireef khatab At 03 April 2025 at 18:39

I`m making a portfolio website using bootstrap for my layout , however all is good except that I want to make the top navigation scales and keeps centered (each item takes a percentage of the width equally) on all devices. (something like apple.com)

this is my index.html

<!DOCTYPE html>

<html>

  <head>
    <link data-require="[email protected]" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <script data-require="[email protected]" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script data-require="[email protected]" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div class="header">
      <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button type="button" id="navbarToggle" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapsable-nav" aria-expanded="false">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
              <a class="navbar-brand" ui-sref="app" style="padding:0 0 0 10px;">
                <img alt="Brand" class="img-responsive" src="image url here" />
              </a>
          </div>
          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="collapsable-nav">
            <ul class="nav navbar-nav">
              <li ui-sref-active="active">
                <a ui-sref="home" class="first">Home                                                                        <span class="sr-only">(current)</span>
                </a>
              </li>
              <li ui-sref-active="active">
                <a ui-sref="projects">Projects</a>
              </li>
              <li ui-sref-active="active">
                <a ui-sref="about">About</a>
              </li>
              <li ui-sref-active="active">
                <a ui-sref="contact">Contact</a>
              </li>
              <li ui-sref-active="active">
                <a ui-sref="awards">Awards</a>
              </li>
            </ul>
          </div>
          <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
      </nav>
    </div>
  </body>

</html>

this my style:

.navbar-brand > img {
    width: auto;
    height: 44px;
    max-width: 100%;
    min-width: 60px;
    position: absolute;
    left: 5px;
}

ul.navbar-nav {
  list-style-type: none;
  text-align: justify;
}
ul.navbar-nav > li {
  margin: 0 auto;
  content: '';
  max-width: 100;
  width: auto;
  display: inline-block;
} 
ul.navbar-nav > li > a {
  margin: 0 auto;
  content: '';
  max-width: 100;
  width: auto;
  display: inline-block;
}

And here is my plunker editor:

https://plnkr.co/edit/bXOx4mwzdbFwEYRtdNd6?p=preview

And here is my plunker full screen (just easier for you to test and change screen size)

https://run.plnkr.co/ZPgTeuYZA2LYl7Et/

Thanks in advance.

Original Q&A

There are 1 best solutions below

**Banzay** · Accepted Answer

To make the top navigation scales: there is instruction in the basic template of Bootstrap docs:

Copy the HTML below to begin working with a minimal Bootstrap document:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

add float:none to ul.navbar-nav and changewidth: 19%; to ul.navbar-nav > li:

.navbar-brand > img {
    width: auto;
    height: 44px;
    max-width: 100%;
    min-width: 60px;
    position: absolute;
    left: 5px;
}

ul.navbar-nav {
  list-style-type: none;
  text-align: center;
  float: none;
}
ul.navbar-nav > li {
  margin: 0 auto;
  max-width: 100;
  width: 19%;
  display: inline-block;
}

I removed ul.navbar-nav > li > a which doesn't affects to neither items order nor common markup.

How to make navigation centered, spreaded and and scales with screen size

There are 1 best solutions below

Related Questions in TWITTER-BOOTSTRAP

Related Questions in NAVIGATION

Related Questions in NAV

Trending Questions

Popular # Hahtags

Popular Questions