Reputation: 378

How to create a nav bar like Apple?

How can I create navigation bar like Apple has? I have given it a try and here is what I have so far:

As you can see, the spacing of the buttons are a bit off. I used justify-content: space-around to achieve this. I have tried to make the spacing the same like the Apple website but have not been successful and was wondering if anyone can help me. Just for a reference, here is the navigation bar of the Apple website.

Here is what I have tried:

.wrapper {
  height: 100vh;
}

nav {
  height: 44px;
  overflow: scroll;
  background: #323232;
}

nav ul {
  display: flex;
  height: 44px;
  justify-content: space-around;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style-type: none;
}

nav li {}

nav a {
  display: block;
  color: white;
  font-size: 15px;
  font-weight: lighter;
  text-decoration: none;
  transition: 0.3s;
}

nav a:hover {
  color: #B8B8B8;
}

<div class="wrapper">
  <nav>
    <ul>
      <li><a href="#"><i class="fab fa-houzz"></i></a></li>
      <li><a href="#">Ban</a></li>
      <li><a href="#">Warn</a></li>
      <li><a href="#">Gift</a></li>
      <li><a href="#">User</a></li>
    </ul>
  </nav>
</div>

Upvotes: 4

Answers (6)

Kabeer Jaffri

Reputation: 708

.wrapper {
  height: 100vh;
}

body {
  margin: 0;
}

nav {
  height: 44px;
  overflow: scroll;
  background: #323232;
}

nav ul {
  display: flex;
  height: 44px;
  justify-content: space-around;
  align-items: center;
  padding: 0;
  margin: 0 auto;
  list-style-type: none;
}

nav li {}

nav a {
  display: block;
  color: white;
  font-size: 15px;
  font-weight: lighter;
  text-decoration: none;
  transition: 0.3s;
}

nav a:hover {
  color: #B8B8B8;
}

.appleNav {
  max-width: 980px;
  margin: 0 auto;
}

<div class="wrapper">
  <nav>
    <div class="appleNav">
      <ul>
        <li>
          <a href="#"><img src="https://www.iconsdb.com/icons/preview/white/apple-xxl.png" height="20"></a>
        </li>
        <li><a href="#">Mac</a></li>
        <li><a href="#">iPad</a></li>
        <li><a href="#">iPhone</a></li>
        <li><a href="#">Watch</a></li>
        <li><a href="#">TV</a></li>
        <li><a href="#">Music</a></li>
        <li><a href="#">Support</a></li>
        <li>
          <a href="#"><img src="https://www.iconsdb.com/icons/preview/white/search-3-xxl.png" height="20"></a>
        </li>
        <li><a href="#">User</a></li>

      </ul>
    </div>
  </nav>
</div>

Upvotes: 0

Mohamed Elkholy

Reputation: 1

Here's their code in this code pen: https://codepen.io/anon/pen/aRKjzz

<nav id="ac-globalnav" class="js no-touch" role="navigation" aria-label="Global" data-hires="false" data-analytics-region="global nav" lang="en-US" dir="ltr" data-store-locale="us" data-store-api="/[storefront]/shop/bag/status" data-search-locale="en_US" data-search-api="/search-services/suggestions/">
<div class="ac-gn-content">
    <ul class="ac-gn-header">
        <li class="ac-gn-item ac-gn-menuicon">
            <label class="ac-gn-menuicon-label" for="ac-gn-menustate" aria-hidden="true">
                <span class="ac-gn-menuicon-bread ac-gn-menuicon-bread-top">
                    <span class="ac-gn-menuicon-bread-crust ac-gn-menuicon-bread-crust-top"></span>
                </span>
                <span class="ac-gn-menuicon-bread ac-gn-menuicon-bread-bottom">
                    <span class="ac-gn-menuicon-bread-crust ac-gn-menuicon-bread-crust-bottom"></span>
                </span>
            </label>
            <a href="#ac-gn-menustate" class="ac-gn-menuanchor ac-gn-menuanchor-open" id="ac-gn-menuanchor-open">
                <span class="ac-gn-menuanchor-label">Open Menu</span>
            </a>
            <a href="#" class="ac-gn-menuanchor ac-gn-menuanchor-close" id="ac-gn-menuanchor-close">
                <span class="ac-gn-menuanchor-label">Close Menu</span>
            </a>
        </li>
        <li class="ac-gn-item ac-gn-apple">
            <a class="ac-gn-link ac-gn-link-apple" href="/" data-analytics-title="apple home" id="ac-gn-firstfocus-small">
                <span class="ac-gn-link-text">Apple</span>
            </a>
        </li>
        <li class="ac-gn-item ac-gn-bag ac-gn-bag-small" id="ac-gn-bag-small">
            <a class="ac-gn-link ac-gn-link-bag" href="/us/shop/goto/bag" data-analytics-title="bag" data-analytics-click="bag" aria-label="Shopping Bag" data-string-badge="Shopping Bag with Items" role="button" aria-haspopup="true" aria-expanded="false" aria-controls="ac-gn-bagview-content">
                <span class="ac-gn-link-text">Shopping Bag</span>
                <span class="ac-gn-bag-badge"></span>
            </a>
            <span class="ac-gn-bagview-caret ac-gn-bagview-caret-large"></span>
        </li>
    </ul>
    <div class="ac-gn-search-placeholder-container" role="search">
        <div class="ac-gn-search ac-gn-search-small">
            <a id="ac-gn-link-search-small" class="ac-gn-link" href="/us/search" data-analytics-title="search" data-analytics-click="search" data-analytics-intrapage-link="" aria-label="Search apple.com" role="button" aria-haspopup="true">
                <div class="ac-gn-search-placeholder-bar">
                    <div class="ac-gn-search-placeholder-input">
                        <div class="ac-gn-search-placeholder-input-text" aria-hidden="true">
                            <div class="ac-gn-link-search ac-gn-search-placeholder-input-icon"></div>
                            <span class="ac-gn-search-placeholder">Search apple.com</span>
                        </div>
                    </div>
                    <div class="ac-gn-searchview-close ac-gn-searchview-close-small ac-gn-search-placeholder-searchview-close">
                        <span class="ac-gn-searchview-close-cancel" aria-hidden="true">Cancel</span>
                    </div>
                </div>
            </a>
        </div>
    </div>
    <ul class="ac-gn-list">
        <li class="ac-gn-item ac-gn-apple">
            <a class="ac-gn-link ac-gn-link-apple" href="/" data-analytics-title="apple home" id="ac-gn-firstfocus">
                    <span class="ac-gn-link-text">Apple</span>
                </a>
        </li>
        <li class="ac-gn-item ac-gn-item-menu ac-gn-mac">
            <a class="ac-gn-link ac-gn-link-mac" href="/mac/" data-analytics-title="mac">
                    <span class="ac-gn-link-text">Mac</span>
                </a>
        </li>
        <li class="ac-gn-item ac-gn-item-menu ac-gn-ipad">
            <a class="ac-gn-link ac-gn-link-ipad" href="/ipad/" data-analytics-title="ipad">
                    <span class="ac-gn-link-text">iPad</span>
                </a>
        </li>
        <li class="ac-gn-item ac-gn-item-menu ac-gn-iphone">
            <a class="ac-gn-link ac-gn-link-iphone" href="/iphone/" data-analytics-title="iphone">
                    <span class="ac-gn-link-text">iPhone</span>
                </a>
        </li>
        <li class="ac-gn-item ac-gn-item-menu ac-gn-watch">
            <a class="ac-gn-link ac-gn-link-watch" href="/watch/" data-analytics-title="watch">
                    <span class="ac-gn-link-text">Watch</span>
                </a>
        </li>
        <li class="ac-gn-item ac-gn-item-menu ac-gn-tv">
            <a class="ac-gn-link ac-gn-link-tv" href="/tv/" data-analytics-title="tv">
                    <span class="ac-gn-link-text">TV</span>
                </a>
        </li>
        <li class="ac-gn-item ac-gn-item-menu ac-gn-music">
            <a class="ac-gn-link ac-gn-link-music" href="/music/" data-analytics-title="music">
                    <span class="ac-gn-link-text">Music</span>
                </a>
        </li>
        <li class="ac-gn-item ac-gn-item-menu ac-gn-support">
            <a class="ac-gn-link ac-gn-link-support" href="https://support.apple.com" data-analytics-title="support">
                    <span class="ac-gn-link-text">Support</span>
                </a>
        </li>
        <li class="ac-gn-item ac-gn-item-menu ac-gn-search" role="search">
            <a id="ac-gn-link-search" class="ac-gn-link ac-gn-link-search" href="/us/search" data-analytics-title="search" data-analytics-click="search" data-analytics-intrapage-link="" aria-label="Search apple.com" role="button" aria-haspopup="true"></a>
        </li>
        <li class="ac-gn-item ac-gn-bag" id="ac-gn-bag">
            <a class="ac-gn-link ac-gn-link-bag" href="/us/shop/goto/bag" data-analytics-title="bag" data-analytics-click="bag" aria-label="Shopping Bag" data-string-badge="Shopping Bag with Items" role="button" aria-haspopup="true" aria-expanded="false" aria-controls="ac-gn-bagview-content">
                    <span class="ac-gn-link-text">Shopping Bag</span>
                    <span class="ac-gn-bag-badge" aria-hidden="true"></span>
                </a>
            <span class="ac-gn-bagview-caret ac-gn-bagview-caret-large"></span>
        </li>
    </ul>
    <aside id="ac-gn-searchview" class="ac-gn-searchview" role="search" data-analytics-region="search">
        <div class="ac-gn-searchview-content">
            <div class="ac-gn-searchview-bar">
                <div class="ac-gn-searchview-bar-wrapper">
                    <form id="ac-gn-searchform" class="ac-gn-searchform" action="/us/search" method="get">
                        <div class="ac-gn-searchform-wrapper">
                            <input id="ac-gn-searchform-input" class="ac-gn-searchform-input" type="text" aria-label="Search apple.com" placeholder="Search apple.com" autocorrect="off" autocapitalize="off" autocomplete="off" spellcheck="false">
                            <input id="ac-gn-searchform-src" type="hidden" name="src" value="globalnav">
                            <button id="ac-gn-searchform-submit" class="ac-gn-searchform-submit" type="submit" disabled="" aria-label="Submit Search"></button>
                            <button id="ac-gn-searchform-reset" class="ac-gn-searchform-reset" type="reset" disabled="" aria-label="Clear Search">
                                    <span class="ac-gn-searchform-reset-background"></span>
                                </button>
                        </div>
                    </form>
                    <button id="ac-gn-searchview-close-small" class="ac-gn-searchview-close ac-gn-searchview-close-small" aria-label="Cancel Search">
                            <span class="ac-gn-searchview-close-cancel" aria-hidden="true">
                                Cancel
                            </span>
                        </button>
                </div>
            </div>
            <aside id="ac-gn-searchresults" class="ac-gn-searchresults" data-string-quicklinks="Quick Links" data-string-suggestions="Suggested Searches" data-string-noresults=""> <section class="ac-gn-searchresults-section ac-gn-searchresults-section-defaultlinks" data-analytics-region="defaultlinks search">
    <div class="ac-gn-searchresults-section-wrapper">
        <h3 class="ac-gn-searchresults-header ac-gn-searchresults-animated">Quick Links</h3>
        <ul class="ac-gn-searchresults-list">
            <li class="ac-gn-searchresults-item ac-gn-searchresults-animated">
                <a href="https://www.apple.com/retail/" class="ac-gn-searchresults-link ac-gn-searchresults-link-defaultlinks" data-query="no keyword" data-section="defaultlinks" data-items="5" data-index="0" data-label="Find a Store" data-analytics-click="eVar23: {data-query} | {data-section} | {data-items} | {data-label} | {data-index}, events:event50">Find a Store</a>
            </li>
            <li class="ac-gn-searchresults-item ac-gn-searchresults-animated">
                <a href="https://www.apple.com/us/shop/goto/accessories/apple_accessories" class="ac-gn-searchresults-link ac-gn-searchresults-link-defaultlinks" data-query="no keyword" data-section="defaultlinks" data-items="5" data-index="1" data-label="Accessories" data-analytics-click="eVar23: {data-query} | {data-section} | {data-items} | {data-label} | {data-index}, events:event50">Accessories</a>
            </li>
            <li class="ac-gn-searchresults-item ac-gn-searchresults-animated">
                <a href="https://www.apple.com/ipod/" class="ac-gn-searchresults-link ac-gn-searchresults-link-defaultlinks" data-query="no keyword" data-section="defaultlinks" data-items="5" data-index="2" data-label="iPod" data-analytics-click="eVar23: {data-query} | {data-section} | {data-items} | {data-label} | {data-index}, events:event50">iPod</a>
            </li>
            <li class="ac-gn-searchresults-item ac-gn-searchresults-animated">
                <a href="https://www.apple.com/ios/" class="ac-gn-searchresults-link ac-gn-searchresults-link-defaultlinks" data-query="no keyword" data-section="defaultlinks" data-items="5" data-index="3" data-label="iOS" data-analytics-click="eVar23: {data-query} | {data-section} | {data-items} | {data-label} | {data-index}, events:event50">iOS</a>
            </li>
            <li class="ac-gn-searchresults-item ac-gn-searchresults-animated">
                <a href="https://www.apple.com/us/shop/goto/giftcards" class="ac-gn-searchresults-link ac-gn-searchresults-link-defaultlinks" data-query="no keyword" data-section="defaultlinks" data-items="5" data-index="4" data-label="Gift Cards" data-analytics-click="eVar23: {data-query} | {data-section} | {data-items} | {data-label} | {data-index}, events:event50">Gift Cards</a>
            </li>
        </ul>
    </div>
</section>

CSS is too big to include here.

Upvotes: -3

dalal

Reputation: 1

If you want to make a space between each button and a button you have to use the margin command to make a break and a distance between all the buttons equally. Position margin before the button you want to make an equal distance between it and the remaining buttons and then define it within the style setting the distance you want between each button and Use the margin command and select the direction you want to set the distance between and the other button if left or right, such as:

margin-right: 20px;

Upvotes: 0

Dhaval Jardosh

Reputation: 7299

You will need to add an additional wrapper to ul let's say "appleNav"

Add properties of the following to appleNav

.appleNav {
  max-width: 980px;
  margin: 0 auto;
}

.wrapper {
  height: 100vh;
}

body {
  margin: 0;
}

nav {
  height: 44px;
  overflow: scroll;
  background: #323232;
}

nav ul {
  display: flex;
  height: 44px;
  justify-content: space-around;
  align-items: center;
  padding: 0;
  margin: 0 auto;
  list-style-type: none;
}

nav li {}

nav a {
  display: block;
  color: white;
  font-size: 15px;
  font-weight: lighter;
  text-decoration: none;
  transition: 0.3s;
}

nav a:hover {
  color: #B8B8B8;
}

.appleNav {
  max-width: 980px;
  margin: 0 auto;
}

<div class="wrapper">
  <nav>
    <div class="appleNav">
      <ul>
        <li>
          <a href="#"><img src="https://www.iconsdb.com/icons/preview/white/apple-xxl.png" height="20"></a>
        </li>
        <li><a href="#">Mac</a></li>
        <li><a href="#">iPad</a></li>
        <li><a href="#">iPhone</a></li>
        <li><a href="#">Watch</a></li>
        <li><a href="#">TV</a></li>
        <li><a href="#">Music</a></li>
        <li><a href="#">Support</a></li>
        <li>
          <a href="#"><img src="https://www.iconsdb.com/icons/preview/white/search-3-xxl.png" height="20"></a>
        </li>
        <li><a href="#">User</a></li>
      </ul>
    </div>
  </nav>
</div>

Upvotes: 3

dalal

Reputation: 1

Position before the button you want to make an equal distance between it and the remaining buttons and then define it within the stayle setting the distance you want between each button and Use the command and select the direction you want to set the distance between and the other button if left or right, such as

Upvotes: 0

random_user_name

Reputation: 26150

A few things:

Apple applies a "container" with a "max width" the the nav. That has been added below.
I've adjusted some styling to improve the look / feel. Comments in the CSS below.
If you look carefully, apple has "dead space" between links. That exists in this markup / layout as well.

If this does not solve your problem, then please advise what you mean by "the spacing is off" - be specific and clear, otherwise it's impossible to help.... :)

body {
margin: 0;
}

.wrapper {
  height: 100vh;
}

nav {
  height: 44px;
  background: #323232;
  text-align: center; /* to center the UL in the nav */
}

nav ul {
  display: flex;
  max-width: 1200px; /* change to desired width */
  /* removed height from here, apply to a elements */
  justify-content: space-around;
  align-items: center;
  padding: 0;
  margin: 0 auto; /* 0 auto allows it to self-center in the nav */
  list-style-type: none;
}

nav li {}

nav a {
  display: inline-block;
  height: 44px; /* apply the height here, pushes the li / ul to be the correct height */
  line-height: 44px; /* to get vertical centering */
  color: white;
  font-size: 15px;
  font-weight: 100;
  text-decoration: none;
  transition: 0.3s;
}

nav a:hover {
  color: #B8B8B8;
}

<div class="wrapper">
  <nav>
    <ul>
      <li><a href="#"><i class="fab fa-houzz"></i></a></li>
      <li><a href="#">Ban</a></li>
      <li><a href="#">Warn</a></li>
      <li><a href="#">Gift</a></li>
      <li><a href="#">User</a></li>
    </ul>
  </nav>
</div>

Upvotes: 4

How to create a nav bar like Apple?

Answers (6)

Related Questions